/*!
Template :	AppsLand @by Softnio
Preset   :	Beacon Budget (green)
Version	 :	2.0.0
Updated	 :	2026-07-22
*/

/* Beacon Budget brand palette — single source of truth.
   App UI intentionally stays blue; this marketing surface is green. */
:root {
	--brand-primary:      #435C4A; /* Deep Forest Green — primary, CTA fill, headings */
	--brand-primary-dark: #384D3E; /* darker forest — CTA hover */
	--brand-secondary:    #C9D6C2; /* Soft Sage — panels, fills */
	--brand-accent:       #8A9E82; /* Muted Olive — links, accents */
	--brand-tint:         #EEF2EA; /* very light sage — icon backgrounds */
	--brand-bg:           #FFFFFF; /* Background */
	--brand-text:         #2E2E2E; /* Slate — body text */
}

.active .steps h4,
.heading span,
.box-icon .fa,
.box-icon .ti,
.video-play,
.video-play:hover,
.video-play:focus,
.owl-theme .owl-nav [class*=owl-],
.single-features .ti,
.single-features .fa,
.contact-form h3,
.contact-info h6 .fa,
.footer-navigation li a:hover,
.social-list li a:hover,
.owl-theme .owl-nav [class*="owl-"]:hover,
.footer-links li a:hover{
	color: var(--brand-primary);
}

.pricing-bottom .ti-check{
	color: var(--brand-primary);
}

.pricing-bottom .ti-close{
	color: #B0483C; /* muted terracotta — softer than pure red, still reads as "not included" */
}

.owl-theme .owl-dots .owl-dot span:after,
.affix .navbar-default .navbar-toggle,
.affix .navbar-default .navbar-toggle,
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
	border-color: var(--brand-primary);
}
.primary-bg{
	background: var(--brand-primary);
}
.secondary-bg{
	background: var(--brand-secondary);
}
.owl-theme .owl-dots .owl-dot.active span,
.owl-theme .owl-dots .owl-dot:hover span,
.affix .navbar-default .navbar-toggle,
.affix .navbar-default .navbar-toggle,
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
	background: var(--brand-primary);
}
.button{
	background: var(--brand-primary);
}
.button:hover {
	background: var(--brand-primary-dark);
}
.header-texts .button{
	background: #fff;
	color: var(--brand-primary);
}
.header-texts .button:hover {
	background: var(--brand-secondary);
	color: var(--brand-primary);
}
.button.button-transparent{
	background:transparent;
}
.button.button-transparent:hover{
	background: #fff;
	color: var(--brand-primary);
	border-color: #fff;
}

.navbar-default .navbar-nav > li > a.button,
.navbar-default .navbar-nav > li > a.button:focus{
	border:2px solid var(--brand-primary);
	background: var(--brand-primary);
}
.navbar-default .navbar-nav > li > a.button:hover{
	color: var(--brand-primary);
}
.affix .navbar-default .navbar-nav > li > a.button:hover,
.affix .navbar-default .navbar-nav > li.active > a.button,
.affix .navbar-default .navbar-nav > li.active > a.button:focus{
	color: var(--brand-primary);
	border-color: var(--brand-primary);
}

/* Flat Deep Forest — the old diagonal cyan→blue gradient read as "generic template".
   Calm, single-tone brand fill instead. */
.gradiant-background,
.bg-gradiant.mfp-bg,
.box-icon,
.team-member .team-photo:after{
	background-image: none;
	background-color: var(--brand-primary);
}
.meta-heading{
	color: var(--brand-accent);
	margin-bottom: 5px;
}
.feature-col .icon{
	background: var(--brand-tint);
	color: var(--brand-primary);
}
.button.alt{
	background: #fff;
	color: var(--brand-primary);
}
.button.alt:hover{
	background: var(--brand-primary);
	color: #fff;
}
.button.light{
	background: var(--brand-secondary);
	color: var(--brand-primary);
}
.button.light:hover{
	background: var(--brand-accent);
	color: #fff;
}
.bg-circle .small, .bg-circle .big{
	background: var(--brand-secondary);
}
.bg-circle .big:before{
	background-image: -o-linear-gradient(157deg, #fff 0%, var(--brand-secondary) 100%);
	background-image: linear-gradient(157deg, #fff 0%, var(--brand-secondary) 100%);
}
.bg-circle .big:after{
	background-image: -o-linear-gradient(157deg, #fff 0%, var(--brand-primary) 100%);
	background-image: linear-gradient(157deg, #fff 0%, var(--brand-primary) 100%);
}
 .pricing-box.alt h5{
 	color: var(--brand-primary);
 }

@media only screen and (max-width: 991px) {
	.navbar-default .in .navbar-nav > li > a:hover,
	.navbar-default .in .navbar-nav > li > a:focus,
	.affix .navbar-default .navbar-nav > li > a:hover,
	.affix .navbar-default .navbar-nav > li > a:focus,
	.affix .navbar-default .navbar-nav > .active > a,
	.affix .navbar-default .navbar-nav > .active > a:hover,
	.affix .navbar-default .navbar-nav > .active > a:focus {
		background: var(--brand-primary);
	}

}

.logo-text {
	color: white;
	font-family: 'DM Serif Display', Georgia, serif;
	font-weight: 700;
	font-size: 2em;
	vertical-align: middle;
}

.logo-text-black {
	color: var(--brand-text);
}

@media only screen and (max-width: 375px) {
	.logo-text {
		font-size: 1.3em;
	}
}

/* Restore a visible keyboard focus indicator (base template strips outlines).
   Brand-colored, only on keyboard focus so mouse users don't see it. */
a:focus-visible,
button:focus-visible,
.button:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
	outline: 2px solid var(--brand-primary);
	outline-offset: 2px;
}

/* Respect reduced-motion preferences — disable WOW.js fades and carousel autoplay feel. */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
	.wow {
		visibility: visible !important;
		opacity: 1 !important;
		transform: none !important;
	}
}

/* ============================================================
   Beacon — new marketing components (Stage 3)
   ============================================================ */

/* App store badges */
.store-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	justify-content: center;
	align-items: center;
	margin-top: 10px;
}
.store-badges.store-badges-left { justify-content: flex-start; }
.store-badge img {
	height: 52px;
	width: auto;
	display: block;
	transition: transform .15s ease, opacity .15s ease;
}
.store-badge:hover img { transform: translateY(-2px); opacity: .92; }

/* Trial reassurance line under CTAs */
.trial-note {
	margin-top: 16px;
	font-size: 15px;
	color: rgba(255,255,255,.85);
}
.trial-note.trial-note-dark { color: #5a6b5f; }

/* Trust / security band */
.trust-section { background: var(--brand-tint); }
.trust-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 28px;
	margin-top: 20px;
}
.trust-item { text-align: center; padding: 8px 12px; }
.trust-item .trust-icon {
	font-size: 26px;
	color: var(--brand-primary);
	margin-bottom: 14px;
}
.trust-item h5 {
	font-family: 'DM Serif Display', Georgia, serif;
	color: var(--brand-primary);
	margin-bottom: 8px;
	font-size: 18px;
}
.trust-item p { color: #5a6b5f; font-size: 15px; line-height: 1.6; margin: 0; }

/* How it works — 3 steps */
.steps-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 32px;
	margin-top: 24px;
}
.step-item { text-align: center; padding: 0 12px; }
.step-num {
	width: 52px; height: 52px; line-height: 52px;
	margin: 0 auto 18px;
	border-radius: 50%;
	background: var(--brand-primary);
	color: #fff;
	font-family: 'DM Serif Display', Georgia, serif;
	font-size: 22px;
	font-weight: 700;
}
.step-item h5 {
	font-family: 'DM Serif Display', Georgia, serif;
	color: var(--brand-primary);
	font-size: 19px;
	margin-bottom: 10px;
}
.step-item p { color: #5a6b5f; font-size: 15px; line-height: 1.65; margin: 0; }

/* Testimonials / reviews */
.reviews-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 24px;
	margin-top: 20px;
}
.review-card {
	background: #fff;
	border: 1px solid rgba(67,92,74,.12);
	border-radius: 12px;
	padding: 26px 24px;
	text-align: left;
	display: flex;
	flex-direction: column;
}
.review-card .review-stars { color: #E0A93B; margin-bottom: 12px; font-size: 14px; }
.review-card blockquote {
	border: 0;
	padding: 0;
	margin: 0 0 18px;
	font-size: 15.5px;
	line-height: 1.7;
	color: var(--brand-text);
}
.review-card .review-author {
	font-family: 'DM Serif Display', Georgia, serif;
	font-weight: 600;
	color: var(--brand-primary);
	font-size: 15px;
}
.review-card .review-source { color: #8a988e; font-size: 13px; }

@media (prefers-color-scheme: dark) {
	/* marketing site is light-only by design; no dark overrides needed */
}

/* Hero subhead */
.header-subtext {
	color: rgba(255,255,255,.92);
	font-size: 19px;
	line-height: 1.6;
	max-width: 880px;
	margin: 4px auto 20px;
}

/* Skip link (visible only on focus) */
.skip-link:focus {
	position: fixed;
	top: 8px;
	left: 8px;
	z-index: 2000;
	background: var(--brand-primary);
	color: #fff;
	padding: 10px 16px;
	border-radius: 6px;
	width: auto;
	height: auto;
	clip: auto;
	margin: 0;
}

/* ---- Pricing polish (Stage 3.1) ---- */
/* Card definition on a light section */
.pricing-section .pricing-box {
	position: relative;
	box-shadow: 0 4px 24px rgba(67,92,74,.10);
	overflow: visible;
}
/* "Most Popular" as a pill straddling the top edge of the card */
.pricing-badge {
	position: absolute;
	top: -15px;
	left: 50%;
	transform: translateX(-50%);
	margin: 0;
	background: var(--brand-accent);
	color: #fff;
	padding: 6px 18px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .6px;
	white-space: nowrap;
	box-shadow: 0 4px 14px rgba(0,0,0,.18);
	z-index: 4;
}
/* Highlight the popular plan a touch */
.pricing-box:has(.pricing-badge) {
	box-shadow: 0 8px 32px rgba(67,92,74,.18);
}
/* Visible annual-savings pill on the green plan header */
.save-pill {
	display: inline-block;
	background: rgba(255,255,255,.92);
	color: var(--brand-primary);
	font-size: 12px;
	font-weight: 700;
	padding: 2px 10px;
	border-radius: 999px;
	margin-left: 8px;
	vertical-align: middle;
	letter-spacing: .3px;
}

/* ---- Prominent Log in / Sign up in the transparent hero nav ---- */
/* On the green hero the default green button vanished; give it a white outline. */
.navbar-default.navbar-default .navbar-nav > li > a.button {
	border: 2px solid rgba(255,255,255,.9);
	background: transparent;
	color: #fff;
	border-radius: 999px;
	padding: 8px 22px;
}
.navbar-default .navbar-nav > li > a.button:hover {
	background: #fff;
	color: var(--brand-primary);
	border-color: #fff;
}
/* When scrolled (affix, white nav) invert to a solid Deep Forest pill */
.affix .navbar-default .navbar-nav > li > a.button {
	border-color: var(--brand-primary);
	background: var(--brand-primary);
	color: #fff;
}
.affix .navbar-default .navbar-nav > li > a.button:hover {
	background: var(--brand-primary-dark);
	border-color: var(--brand-primary-dark);
	color: #fff;
}

/* ---- Deep Forest footer (darker than the green contact band above it) ---- */
.footer-section {
	background: var(--brand-primary-dark);
}
.footer-links li,
.footer-links li a {
	color: rgba(255,255,255,.62);
}
.footer-navigation li a:hover,
.social-list li a:hover,
.footer-links li a:hover {
	color: var(--brand-secondary); /* Soft Sage on hover (green hover was invisible on green) */
}

/* ---- Reviews carousel: equal-height cards ---- */
.reviews-carousel { margin-top: 20px; }
.reviews-carousel .owl-stage { display: flex; }
.reviews-carousel .owl-item { display: flex; height: auto; }
.reviews-carousel .item { display: flex; width: 100%; }
.reviews-carousel .review-card { height: 100%; margin: 0; }
.reviews-carousel .owl-dots { margin-top: 28px; text-align: center; }

/* ---- Mobile: stack multi-column grids one-per-row (like the Features list) ---- */
@media (max-width: 767px) {
	.steps-grid,
	.trust-grid,
	.reviews-grid {
		grid-template-columns: 1fr;
	}
}

/* ---- Device-adaptive hero CTA ---- */
/* Desktop (default): show the smart "Get Started" button, hide store badges */
.hero-cta.cta-mobile { display: none; }
.hero-cta.cta-desktop { display: inline-block; }
/* Mobile: hide the button, show the store badges */
@media (max-width: 767px) {
	.hero-cta.cta-desktop { display: none; }
	.hero-cta.cta-mobile { display: flex; }
}

/* ---- Tablet (medium) grid layout ---- */
/* Steps: 2 across with the third centered below; Trust: 2 x 2 */
@media (min-width: 768px) and (max-width: 991px) {
	.steps-grid { grid-template-columns: repeat(2, 1fr); }
	.steps-grid .step-item:nth-child(3) { grid-column: 1 / -1; }
	.trust-grid { grid-template-columns: repeat(2, 1fr); }
}