/* SOLA brand layer.
 *
 * Loaded after the purchased template's styles.css, which is vendor code we never
 * edit: everything here is an override, so the template stays updatable and the
 * whole brand identity lives in one readable file.
 *
 * Palette and typeface come from the graphic charter (August 2026): blue #3781C3
 * is the dominant colour (logotype, headings, structural elements), green #4BAD33
 * is the accent (pictograms, bullets, punctual highlights), white on coloured
 * backgrounds, and Montserrat is the typeface. The template shipped a violet
 * (#594bec) / Inter identity, redefined below through its own custom properties.
 */

:root {
	--sola-blue: #3781c3;
	--sola-blue-dark: #2b6699;
	--sola-blue-darker: #1f4a70;
	--sola-green: #4bad33;
	--sola-ink: #1f2d3d;
	--sola-muted: #5b6b7c;
	--sola-surface: #f2f6fa;
	--sola-border: #d8e3ee;

	/* Template tokens, repointed at the charter. Names are the template's own. */
	--_colors---bright-blue: var(--sola-blue);
	--_colors---deep-violet: var(--sola-blue-darker);
	--_colors---muted-purple: var(--sola-blue-darker);
	--_colors---darkslate-blue: var(--sola-ink);
	--_colors---smoky-black: var(--sola-ink);
	--_colors---gray: var(--sola-muted);
	--_colors---lavender: #dce8f4;
	--_colors---misty-blue: var(--sola-border);
	--_colors---grayish-blue: var(--sola-surface);

	--font-family--inter: 'Montserrat', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* The template ships its own artwork baked into CSS backgrounds: a violet page
 * background, a fingerprint and a keyboard behind the feature cards, a wall of
 * binary digits behind the "about" section, a violet banner behind the call to
 * action. None of it depicts this product, and the card artwork sat on top of
 * the card text. Each rule below drops one of those images and gives the block
 * the charter's colours instead. */
body {
	background-image: none;
	background-color: var(--sola-surface);
}

.choose-card._03,
.choose-card._04 {
	height: auto;
	min-height: 14rem;
	background-image: none;
	background-color: #fff;
	border: 1px solid var(--sola-border);
	justify-content: flex-start;
}

/* The template staged the four cards as a cascade: fixed heights (30rem / 21rem)
 * and a -6.6rem pull on the second row, so each card overlapped the artwork of
 * the one above. Text-only cards have no fixed height, so that pull made them
 * overlap each other instead. Plain two-column grid, equal heights. */
.choose-grid-1,
.choose-grid-1._01,
.choose-grid-1._02 {
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: stretch;
	margin-top: 0;
}

.choose-grid {
	gap: 1.5rem;
}

/* Two columns of ~170px turn each card into a one-word-per-line ribbon: below the
 * template's mobile breakpoint the cards stack instead. */
@media (max-width: 767px) {
	.choose-grid-1,
	.choose-grid-1._01,
	.choose-grid-1._02 {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Decorative badge anchored mid-cascade; without the cascade it floats over the
 * gap between two cards. */
.choose-icon {
	display: none;
}

/* The hero was sized around a product screenshot we do not have yet: without it
 * the section kept the empty space the image used to fill. */
.home-hero-wrapper {
	padding-bottom: 2rem;
}

/* The template's 4.5rem h1 was written for a three-word headline; the brand
 * baseline runs four lines at that size and pushes the whole page down. */
.hero-title {
	font-size: 3.5rem;
	max-width: 46rem;
}

@media (max-width: 767px) {
	.hero-title {
		font-size: 2.25rem;
	}
}

/* height:100vh + position:sticky staged a full-screen parallax on the artwork;
 * without it the section only needs the height of its own text. */
.about-section {
	background-image: none;
	background-color: transparent;
	height: auto;
	position: static;
	padding-top: 6rem;
	padding-bottom: 6rem;
}

.cta-wrap {
	background-image: linear-gradient(135deg, var(--sola-blue) 0%, var(--sola-blue-darker) 100%);
	border-color: var(--sola-blue-dark);
}

.primary-button {
	background-image: linear-gradient(135deg, var(--sola-blue) 0%, var(--sola-blue-dark) 100%);
	color: #fff;
}

/* Inside the blue call-to-action block the charter asks for pure white text, and
 * a blue button on a blue ground reads as a flat rectangle: invert it. */
.cta-para {
	color: #fff;
	opacity: .92;
}

.cta-button {
	background-image: none;
	background-color: #fff;
	color: var(--sola-blue-darker);
}

.cta-wrap {
	padding-top: 5rem;
	padding-bottom: 5rem;
}

/* The full logo carries the two baseline lines; the charter sets its minimum
 * on-screen width at 120px, and they only become comfortable around 200. */
.footer-img {
	width: 220px;
	max-width: 100%;
}

body,
.heading-h2,
.hero-title,
.about-title,
.faq-ques,
.cta-title,
.choose-card-title,
.typography-title {
	font-family: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* The template fades sections in on scroll (`.reveal` + IntersectionObserver in
 * main.js). Anything above the fold must not depend on that observer having run:
 * a slow script, a blocked file or a reduced-motion setting would leave the hero
 * blank, which is the one screen a visitor always sees. */
.js .home-hero-section .reveal {
	opacity: 1;
	transform: none;
}

/* Brand accent on the eyebrow labels that head each section. */
.typography-title {
	color: var(--sola-blue);
}

.subtitle-block {
	border-color: var(--sola-border);
}

/* The charter reserves green for punctual highlights: the bullet of a feature
 * item is exactly that, and it is the only place the accent appears on a page. */
.sola-feature-list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: .75rem;
}

.sola-feature-list li {
	position: relative;
	padding-left: 1.75rem;
	color: var(--sola-muted);
}

.sola-feature-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .45em;
	width: .7rem;
	height: .7rem;
	border-radius: 50%;
	background: var(--sola-green);
}

/* The footer logo block lays its children in a row; the baseline belongs under
 * the logo, and the charter asks for clear space around it equal to the height
 * of the S. */
.footer-logo-wrap {
	flex-direction: column;
	align-items: flex-start;
}

/* Heading levels were fixed for the document outline (the FAQ questions were h5
 * under absent h3/h4, the feature titles were plain divs, the editor section was
 * an h3 nested in the features one). The template sized those blocks through the
 * TAG, not the class, so changing the tag changed the design: `.faq-ques` and
 * `.about-title` declare no size of their own. The sizes below restore what each
 * block looked like, taken from the template's own variables so a template update
 * carries through. Semantics on the tag, appearance on the class. */
.faq-ques {
	font-size: var(--_sizes---font-sizes--h5);
	line-height: var(--_sizes---line-height--h5);
	letter-spacing: var(--_sizes---letter-spacing--h5);
	margin-top: 0;
	margin-bottom: 0;
}

.about-title {
	font-size: var(--_sizes---font-sizes--h3);
	line-height: var(--_sizes---line-height--h3);
	letter-spacing: var(--_sizes---letter-spacing--h3);
	margin-top: 0;
	margin-bottom: 0;
}

.choose-card-title {
	line-height: var(--_sizes---line-height--h4);
	letter-spacing: var(--_sizes---letter-spacing--h4);
	margin-top: 0;
	margin-bottom: 0;
}

/* Legal pages: the template has no long-form text container, only marketing
 * blocks. One readable column, measure capped where a line stays comfortable. */
.sola-legal {
	max-width: 46rem;
	margin: 0 auto;
	color: var(--sola-muted);
	line-height: 1.7;
}

.sola-legal h2 {
	margin: 2.5rem 0 .75rem;
	color: var(--sola-ink);
	font-size: 1.25rem;
	font-weight: 600;
}

.sola-legal p,
.sola-legal ul {
	margin: 0 0 1rem;
}

.sola-legal ul {
	padding-left: 1.25rem;
}

.sola-legal li {
	margin-bottom: .5rem;
}

.sola-legal a {
	color: var(--sola-blue);
	text-decoration: underline;
}

/* Publisher identity block: readable, but visually secondary to the product
 * content it follows. */
.sola-publisher {
	max-width: 46rem;
	margin: 2.5rem auto 0;
	padding-top: 1.5rem;
	border-top: 1px solid var(--sola-border);
	color: var(--sola-muted);
	font-size: .875rem;
	line-height: 1.7;
	text-align: center;
}

.sola-publisher p {
	margin: 0 0 .5rem;
}

.sola-publisher a {
	color: var(--sola-blue);
}

/* Baseline of the charter, set under the footer logo. */
.sola-baseline {
	margin-top: .75rem;
	max-width: 22rem;
	color: var(--sola-muted);
	font-size: .875rem;
	line-height: 1.5;
}

/* Client logos and testimonials, both fed by the back-office. The sections only
 * exist when something is published, so these rules are dormant until then. */
.sola-client-logos {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 2.5rem;
}

.sola-client-logo {
	max-height: 2.75rem;
	max-width: 10rem;
	object-fit: contain;
}

.sola-client-name {
	color: var(--sola-muted);
	font-weight: 600;
}

.sola-testimonials {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
	gap: 1.5rem;
}

.sola-testimonial {
	margin: 0;
	padding: 1.5rem;
	border: 1px solid var(--sola-border);
	border-radius: 1rem;
	background: #fff;
}

.sola-testimonial blockquote {
	margin: 0 0 1rem;
	color: var(--sola-ink);
	font-size: 1.0625rem;
	line-height: 1.6;
}

.sola-testimonial figcaption {
	color: var(--sola-muted);
	font-size: .875rem;
	line-height: 1.6;
}

.sola-testimonial-company,
.sola-testimonial-rating,
.sola-testimonial-source {
	display: block;
}

.sola-testimonial-rating {
	color: var(--sola-green);
	font-weight: 600;
}

.sola-testimonial-source {
	color: var(--sola-blue);
}

/* Footer bottom line: the template gives it a 2rem box and no typography, which
 * left three sentences stacked in a large card. One discreet line, the update
 * date pushed to the opposite end. */
.footer-bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: .5rem 1.5rem;
	padding-top: 1.25rem;
	padding-bottom: 1.25rem;
}

.footer-bottom .copyright-text {
	color: var(--sola-muted);
	font-size: .8125rem;
}

/* The template reserved the bottom of the section for a giant background wordmark
 * (`.footer-logo`), which we do not use: without it the section kept its height. */
.footer .wrapper {
	padding-bottom: 2rem;
}

/* Effective date of the terms, set apart from the body of the contract. */
.sola-legal-version {
	color: var(--sola-ink);
	font-weight: 600;
}

/* Pricing. The template compares two or three competing plans behind
 * monthly/yearly tabs; the offer here is one base subscription plus optional
 * modules, so the section is laid out to say that instead. */
.sola-pricing {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	gap: 1.5rem;
	align-items: start;
}

.sola-pricing-core,
.sola-pricing-modules {
	padding: 2rem;
	border: 1px solid var(--sola-border);
	border-radius: 1rem;
	background: #fff;
}

.sola-pricing-label {
	color: var(--sola-blue);
	font-size: .8125rem;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
}

.sola-pricing-amount {
	margin: .5rem 0 1.5rem;
	color: var(--sola-ink);
	font-size: 2.75rem;
	font-weight: 700;
	line-height: 1.1;
}

.sola-pricing-period {
	color: var(--sola-muted);
	font-size: 1rem;
	font-weight: 500;
}

/* Centred under the feature list: `inline-flex` alone leaves it hanging on the
 * left, and auto margins only bite on a block-level box with a bounded width. */
.sola-pricing-core .primary-button {
	display: flex;
	width: fit-content;
	margin: 1.75rem auto 0;
}

.sola-pricing-seat {
	margin: -1rem 0 1.5rem;
	color: var(--sola-muted);
	font-size: .9375rem;
}

.sola-pricing-module {
	padding: 1rem 0;
	border-top: 1px solid var(--sola-border);
}

.sola-pricing-module:first-of-type {
	margin-top: 1rem;
}

.sola-pricing-module-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: .5rem;
}

.sola-pricing-module-name {
	margin: 0;
	color: var(--sola-ink);
	font-size: 1.0625rem;
	font-weight: 600;
}

.sola-pricing-module-price {
	color: var(--sola-blue);
	font-weight: 700;
	white-space: nowrap;
}

.sola-pricing-module p {
	margin: .35rem 0 0;
	color: var(--sola-muted);
	font-size: .9375rem;
	line-height: 1.6;
}

.sola-pricing-note {
	margin: 1.25rem 0 0;
	color: var(--sola-muted);
	font-size: .875rem;
	line-height: 1.6;
}

@media (max-width: 991px) {
	.sola-pricing {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Application screenshots behind the tabs. The template already hides inactive
 * panes and styles the tab links, so only the shots themselves need rules. */
.sola-app-tabs-menu {
	flex-wrap: wrap;
	justify-content: center;
}

.sola-app-shot {
	display: block;
	width: 100%;
	height: auto;
	border: 1px solid var(--sola-border);
	border-radius: .75rem;
	box-shadow: 0 18px 40px rgba(31, 45, 61, .12);
}

.sola-app-caption {
	max-width: 46rem;
	margin: 1rem auto 0;
	color: var(--sola-muted);
	font-size: .9375rem;
	line-height: 1.6;
	text-align: center;
}

/* Sticky header.
 *
 * The template lays the bar out as a floating pill (max-width, auto margins,
 * top margin) inside a static .header; fixing that same element keeps the design
 * untouched and only changes where it lives. The pill itself is opaque, so the
 * content scrolling underneath stays readable.
 *
 * --sola-header-height is what the rest of the page uses to make room, declared
 * once so the compensation can never drift from the real height.
 */
:root {
	/* Measured: the bar's own height plus the top margin the template gives it. */
	--sola-header-height: 7.125rem;
}

.header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1000;
}

/* The page starts below the bar instead of under it. */
.main-wrapper {
	padding-top: var(--sola-header-height);
}

/* Anchor targets stop under a fixed header unless they reserve the room. */
[id] {
	scroll-margin-top: calc(var(--sola-header-height) + 1rem);
}

@media (max-width: 991px) {
	:root {
		--sola-header-height: 5rem;
	}

	/* The mobile menu is absolutely positioned under the bar; inside a fixed
	 * header a long menu would overflow the viewport with no way to reach its
	 * end, since body scrolling is locked while it is open. */
	.navbar.nav-open .nav-menu-wrapper {
		max-height: calc(100vh - var(--sola-header-height) - 1rem);
		overflow-y: auto;
	}
}

/* The template's bar held three blocks - logo, menu, cart - and `space-between`
 * left the menu in the middle. We dropped the cart, so the same rule pushed the
 * menu hard against the right edge. Auto margins put it back in the centre,
 * which is where it was drawn to sit. */
.header {
	max-width: 66rem;
}

.nav-menu-wrapper {
	margin-left: auto;
	margin-right: auto;
}

.nav-link-block {
	white-space: nowrap;
}