/**
 * Styles for the ON1 Resize AI 2026 overview page
 *
 * Purple is Resize AI's identity colour, so eyebrows, box accents and CTAs all
 * sit on the --purple ramp. There is no --purple-transparent token - only blue,
 * green, orange and gold carry one - so the tinted fills are color-mix() off
 * --purple-500 at the same 16% the tokens use. The Photo RAW MAX subscription
 * box keeps the pink it has carried on this page.
 *
 * @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:
 *
 *   purple-400 #9d63ff   4.50 on #1e1e1e   4.97 on #141414   3.98 on #282828
 *   purple-300 #af82ff   5.92 on #1e1e1e   6.54 on #141414   5.24 on #282828
 *   purple-600 #7841d3   5.56 on #f6f6f7   5.18 on #eeeeef   4.99 on #eaeaea
 *
 * So -400 carries the dark bands, -600 the light ones, and the single lifted
 * --bg-800 band steps up to -300 because -400 does not clear there.
 */
.eyebrow span {
	background: color-mix(in srgb, var(--purple-500) 16%, transparent);
	border-radius: var(--border-radius);
	color: var(--purple-400);
	padding: 0.25rem 0.625rem;
}

.eyebrow {
	color: var(--purple-400);
}

/* 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.
 * #whats-new and the guarantee are the pinned ones. */
[data-theme="light"] .eyebrow,
[data-theme="light"] .eyebrow span,
[data-theme="light"] .check-list li i,
[data-theme="light"] .text-purple,
[data-theme="light"] #rai-specs #faq-specs td p.specs-eyebrow {
	color: var(--purple-600);
}

/* Which means the rule above also reaches into the bands this page pins dark
 * once the visitor picks light, where purple-600 is the wrong end of the ramp.
 * Put those back on the dark step. */
[data-theme="light"] [data-theme="dark"] .eyebrow,
[data-theme="light"] [data-theme="dark"] .eyebrow span,
[data-theme="light"] [data-theme="dark"] .check-list li i {
	color: var(--purple-400);
}

/* !- Section banding
 *
 * The page is long and the legacy version ran every band on the same surface
 * plus two `.gradient-bg` wrappers. Three tones carry it now, on the 70/20/10
 * split the mockup calls for:
 *
 *   dark      the body surface, and --bg-950 one step deeper for alternation
 *   light     #whats-new and the guarantee, pinned light so the ratio survives
 *             the theme toggle the way the guarantee already did
 *   lifted    #ready-for-print, the single --bg-800 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 bands
 * below therefore re-state `color` so it resolves against their own tokens;
 * the same pair of declarations serves both directions.
 */
#what-you-get,
#resize-in-action {
	background: var(--bg-950);
}

#overview,
#whats-new {
	background: var(--bg-900);
	color: var(--text-300);
}

#stands-out {
	background: var(--bg-950);
	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.
 *
 * The purple wash behind it is loaded via image-set rather than a hardcoded
 * @2x URL, so the choice follows the display's pixel ratio instead of the
 * viewport width - the form the 2027 heroes use. background-color carries the
 * frame, since the art is roughly 2:1 and this band runs taller than that.
 */
#hero {
	background-color: var(--bg-900);
	background-image: image-set(url(https://ononesoft.cachefly.net/images/products/2026/resize-ai/hero-bg.jpg) 1x, url(https://ononesoft.cachefly.net/images/products/2026/resize-ai/hero-bg@2x.jpg) 2x);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	color: var(--text-300);
	margin-top: -46px;
	padding: calc(5rem + 46px) 0 5rem;
	position: relative;
}

/* The art runs from near-black on the left to a hot purple on the right. The
   copy column sits on the dark end and reads without help, so the scrim is
   only there to keep the bright end from overpowering the screenshot. */
#hero::before {
	background: linear-gradient(90deg, rgba(10, 9, 8, 0.3) 0%, rgba(10, 9, 8, 0.25) 45%, rgba(10, 9, 8, 0.45) 100%);
	content: '';
	inset: 0;
	position: absolute;
}

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

#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);
}

/* Pills between the sub-headline and the price, the same idiom as the Effects
   and Photo Studio heroes.

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

#hero .quick-badges li {
	background: color-mix(in srgb, var(--purple-500) 16%, transparent);
	border: 1px solid var(--purple-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-buttons .btn {
	padding: 0.75rem 1.5rem;
}

/* !- Image lightbox
 *
 * The three screenshots on this page carry "Click to Compare" and "Click to
 * View Larger" in the artwork itself, so each one opens the shared #image-modal
 * from partials/image-modal.php.
 *
 * The spinner/image swap is handled by base.js and partials/image-modal.php,
 * which now toggle .d-none rather than .hide - .hide is only defined in
 * assets/css/legacy/utilities.css, which the new-stack pages don't load, so it
 * was a no-op here and the spinner's line box sat as a 26px strip across the
 * top of the dialog. Nothing for this sheet to do about it any more.
 *
 * modal-xl caps the dialog at 1140px, which leaves the 1875x601 hero
   comparison small on a large display - the whole point of that shot is seeing
   the detail. Run it to the window instead.

   The height cap is for the Standard Model shot, which is portrait (960x1200)
   and would otherwise run well past the fold at this width. It letterboxes on
   the dialog's own --bg-900 surface rather than overflowing. 6rem rather than a
   tighter figure because .modal .btn-close sits at top: -2rem, outside the
   content box - a 2rem cap puts the close button hard against the top of the
   window on the tall shot. */
#image-modal .modal-dialog {
	max-width: calc(100% - 2rem);
}

#image-modal .modal-body img {
	max-height: calc(100vh - 6rem);
	object-fit: contain;
}

/* !- Overview */
#overview {
	padding: 5rem 0;
}

/* The pull quote that used to be its own "ON1 Customers love Resize AI" band.
   A card, per the mockup: its --bg-2 is #282828, which is --bg-800, and
   #overview is pinned dark so it holds that colour under either theme. The
   mockup's 760px max-width is a grid column here instead. */
#overview .testimonial {
	background: var(--bg-800);
	border: 1px solid var(--bg-700);
	border-radius: var(--border-radius);
	padding: 2rem 2.5rem;
	text-align: center;
}

#overview .testimonial p {
	color: var(--text-100);
	font-size: var(--text-lg);
	font-style: italic;
	line-height: 1.6;
	margin-bottom: 0.875rem;
}

#overview .testimonial span {
	color: var(--text-500);
	font-size: var(--text-xs);
	font-weight: 600;
}

/* !- What you get */
#what-you-get {
	padding: 5rem 0;
}

#what-you-get .overview-box {
	align-items: center;
	background: var(--bg-800);
	border-radius: var(--border-radius);
	display: flex;
	gap: 1rem;
	padding: 1.5rem;
}

#what-you-get .overview-icon {
	flex: none;
	height: 4.125rem;
	width: 4.125rem;
}

#what-you-get .overview-title {
	color: var(--text-50);
	font-size: var(--text-lg);
	font-weight: 600;
	line-height: 1.3;
	margin-bottom: 0.25rem;
}

#what-you-get .overview-copy {
	color: var(--text-400);
	font-size: var(--text-sm);
	margin-bottom: 0;
}

/* !- What's new
 *
 * This page's light band. Three stacked rows rather than a card grid: the two
 * new models have real screenshots to show, and a card grid would have had to
 * drop them.
 */
#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 .whats-new-note {
	color: var(--text-400);
	font-size: var(--text-sm);
	margin-bottom: 0;
}

#whats-new .whats-new-note strong {
	color: var(--text-100);
}

#whats-new .input-options {
	margin-top: 1.5rem;
}

#whats-new .input-option-label {
	color: var(--text-100);
	font-weight: 600;
	margin: 0.5rem 0 0;
}

/* !- Tools for print-ready output
 *
 * This page's one "slightly lighter than dark" band.
 */
#ready-for-print {
	background: var(--bg-800);
	padding: 5rem 0;
}

/* --bg-800 here and the guarantee's own --bg-800 are the same #eeeeef once the
   page is light. These two are not adjacent, but #whats-new directly above is
   --bg-900, which is the light body surface - one step further down the ramp
   keeps the seam between them. */
[data-theme="light"] #ready-for-print {
	background: var(--bg-700);
}

/* The one band where purple-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. */
#ready-for-print .eyebrow {
	color: var(--purple-300);
}

[data-theme="light"] #ready-for-print .eyebrow {
	color: var(--purple-600);
}

#ready-for-print .print-box {
	background: var(--bg-900);
	border-radius: var(--border-radius);
	overflow: hidden;
}

[data-theme="light"] #ready-for-print .print-box {
	background: var(--bg-800);
}

#ready-for-print .print-body {
	padding: 1.25rem;
}

#ready-for-print .print-title {
	color: var(--text-50);
	font-size: var(--text-lg);
	font-weight: 600;
	line-height: 1.4;
	margin-bottom: 0.25rem;
}

#ready-for-print .print-copy {
	color: var(--text-400);
	font-size: var(--text-sm);
	margin-bottom: 0;
}

/* !- Check lists */
.check-list {
	list-style: none;
	margin: 0;
	padding-left: 0;
}

.check-list li {
	color: var(--text-100);
	margin-bottom: 0.75rem;
}

.check-list li:last-child {
	margin-bottom: 0;
}

.check-list li i {
	color: var(--purple-500);
	margin-right: 0.5rem;
}

/* !- Batch resize & export */
#batch-resize {
	padding: 5rem 0;
}

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

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

/* !- How it stands out */
#stands-out {
	padding: 5rem 0;
}

#stands-out .stands-out-buttons {
	margin-top: 1.75rem;
}

#stands-out .stands-out-buttons .btn {
	padding: 0.75rem 1.5rem;
}

/* !- 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 purple, the same as the Photo RAW and NoNoise
   buy sections. #buy is pinned dark, so green-500 always sits on --bg-950
   (8.9:1) 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(--purple-500) 16%, transparent), color-mix(in srgb, var(--blue-500) 8%, transparent));
	border: 1px solid color-mix(in srgb, var(--purple-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(--purple-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(--purple-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(--purple-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 ran together as one band. Not the --bg-800
 * lift, because #ready-for-print already carries this page's 10%. The table
 * itself is styled in base.css off #rai-specs #faq-specs, and its cells are
 * --bg-800, which reads against --bg-950 without an override.
 */
#rai-specs {
	background: var(--bg-950);
	padding: 5rem 0;
}

/* The shared rule paints this green; Resize AI is a purple page. */
#rai-specs #faq-specs td p.specs-eyebrow {
	color: var(--purple-400);
}

/* !- Purple 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 purple 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% purple tint, not the band:
 *
 *   Q chip, dark band   #302642   purple-300 5.04   (purple-400 only 3.82)
 *   Q chip, light band  #e6dbf8   purple-600 4.54
 *   guarantee icon      #e6dbf8   purple-600 4.54   (pinned light, always)
 *   resources eyebrow   #1e1e1e   purple-400 4.50 / #f6f6f7 purple-600 5.56
 */
#faqs .faq-q::before {
	background: color-mix(in srgb, var(--purple-500) 16%, transparent);
	color: var(--purple-300);
}

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

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

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

#resources .eyebrow,
#resources .resources-section .eyebrow {
	color: var(--purple-400);
}

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

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

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

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

#resize-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. (It used to
 * carry .mb-2r, which only exists in assets/css/legacy/utilities.css and so did
 * nothing on either of the new-stack pages that render it.)
 */
#resize-ai-feature-list {
	background: var(--bg-900);
	color: var(--text-300);
	padding: 5rem 0;
}

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

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

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

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

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

/* !- Buy page
 *
 * Section order follows the buy mockup: pricing, the Trustpilot band, FAQs and
 * specs, "Why Choose ON1?" and then the guarantee. #buy pulls up under the
 * sticky product nav the way the overview hero does, unless a passed video is
 * sitting above it.
 */
#resize-ai-buy #buy {
	margin-top: -46px;
	padding: calc(5rem + 46px) 0 5rem 0;
}

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

/* !- Why choose ON1
 *
 * The page's light band. Left-aligned per the mockup, and carrying the copy the
 * old "Made by Photographers Like You" section used to hold on its own.
 */
#why-on1 {
	background: var(--bg-900);
	color: var(--text-300);
	padding: 5rem 0;
}

#why-on1 .why-on1-cta {
	margin-bottom: 0;
	margin-top: 1.75rem;
}

#why-on1 .why-on1-cta .btn {
	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,
#commercial-video,
#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);
}

#commercial-video {
	background: var(--bg-950);
}

#commercial-video .video-figure {
	margin-bottom: 0;
}

#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% purple chip, not the band - #302642 - where
   purple-400 only manages 3.82:1, so it takes -300 (5.04:1), same as the FAQ
   chip. The check icons are non-text, and purple-500 is 3.78:1 on #1e1e1e. */
.trial-steps li::before {
	background: color-mix(in srgb, var(--purple-500) 16%, transparent);
	color: var(--purple-300);
}

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