/* iPlot marketing landing page, scoped to this page only (pushed via
   @push('styles') in resources/views/marketing/landing.blade.php), so it
   never touches the dashboard/theme styles used everywhere else.

   Brand colors come from the actual logo/favicon SVGs (public/images/logo.svg,
   public/favicon.svg): navy + cyan, not the bought theme's default teal
   accent (#00e2bd in public/css/style.css), since the logo is the one
   deliberate brand choice that exists in this app. */

html {
	scroll-behavior: smooth;
}

:root {
	--lp-navy: #0C1623;
	--lp-navy-soft: #16273b;
	--lp-cyan: #20BEDC;
	--lp-cyan-dark: #17a0bb;
	--lp-ink: #1c2733;
	--lp-muted: #5b6b7a;
	--lp-border: #e7ecf1;
	--lp-bg-soft: #f5f9fb;
}

/* Organic "blob" shape (neither square nor a plain circle) - lifted from
   public/css/style.css's own .single-counter i rule (the "fun fact" counter
   icon this theme already ships), which this page had overridden away to a
   plain circle. Reused everywhere an icon sits in a shape on this page. */
.lp-blob {
	border-radius: 33% 66% 70% 30% / 49% 62% 38% 51% !important;
}

/* Header nav + "Log In" inherit the theme's default blue accent (#0053e2,
   public/css/colors/blue.css's `a` and `#navigation ul li a.current` rules)
   - recolor to the brand cyan so the header doesn't mix two accent colors. */
#navigation ul li a.current,
#navigation ul li a.current:after {
	color: var(--lp-cyan-dark) !important;
}
.right-side .header-widget > a:not(.button) {
	color: var(--lp-cyan-dark);
}
.right-side .header-widget > a:not(.button):hover {
	color: var(--lp-navy);
}

/* ---------- Buttons (one variant the theme doesn't already ship) ---------- */
a.button.button-transparent,
button.button.button-transparent {
	background-color: transparent;
	border: 2px solid rgba(255, 255, 255, .55);
	color: #fff;
}
a.button.button-transparent:hover,
button.button.button-transparent:hover {
	background-color: rgba(255, 255, 255, .12);
	border-color: #fff;
	color: #fff;
}

/* Landing CTAs use the brand cyan instead of the theme's default accent. */
.lp-hero-ctas .button:not(.gray):not(.button-transparent),
.lp-track .button:not(.gray),
.lp-plan-card .button,
.lp-final-cta .button:not(.button-transparent) {
	background-color: var(--lp-cyan);
	border-color: var(--lp-cyan);
	color: var(--lp-navy);
	font-weight: 700;
}
.lp-hero-ctas .button:not(.gray):not(.button-transparent):hover,
.lp-track .button:not(.gray):hover,
.lp-plan-card .button:hover,
.lp-final-cta .button:not(.button-transparent):hover {
	background-color: var(--lp-cyan-dark);
	border-color: var(--lp-cyan-dark);
}
.lp-hero-ctas .button.gray,
.lp-track .button.gray {
	background-color: rgba(255, 255, 255, .1);
	border: 2px solid rgba(255, 255, 255, .55);
	color: #fff;
}
.lp-hero-ctas .button.gray:hover,
.lp-track .button.gray:hover {
	background-color: rgba(255, 255, 255, .18);
	border-color: #fff;
	color: #fff;
}
.lp-track .button.gray {
	background-color: var(--lp-bg-soft);
	border: 2px solid var(--lp-border);
	color: var(--lp-ink);
}
.lp-track .button.gray:hover {
	background-color: #fff;
	border-color: var(--lp-cyan);
	color: var(--lp-navy);
}

/* ---------- Hero ---------- */
.lp-hero {
	position: relative;
	min-height: 92vh;
	display: flex;
	align-items: center;
	overflow: hidden;
	background-color: var(--lp-navy);
}
/* Hero slider - slick (already bundled sitewide: JS in
   public/js/custom.js's script tag, full core CSS baked into
   public/css/style.css from .slick-list down) - initialized in
   public/js/landing.js with its own settings (fade, autoplay, no arrows),
   not reusing the theme's .testimonial-carousel/.logo-carousel presets,
   since a full-bleed background slider needs different behavior than a
   card carousel. */
.lp-hero-slider {
	position: absolute;
	inset: 0;
	z-index: 1;
}
.lp-hero-slider .slick-list,
.lp-hero-slider .slick-track,
.lp-hero-slide {
	height: 100%;
}
/* style.css's base .slick-list rule hardcodes margin-top:40px (meant for
   the theme's other carousels, which sit below a heading) - on this
   full-bleed background slider it pushed the image down 40px on every
   load, revealing .lp-hero's plain navy fallback in a flat band at the
   very top. Only found by checking the top pixels closely, not the
   overall composition - it was there on every single load, not just
   after hash navigation (that was a wrong first theory). */
.lp-hero-slider .slick-list {
	margin-top: 0;
}
.lp-hero-slide picture,
.lp-hero-slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}
/* Before slick initializes (or if JS fails to load), fall back to
   showing just the first slide full-bleed rather than a stack of
   overlapping images. */
.lp-hero-slider:not(.slick-initialized) .lp-hero-slide:not(:first-child) {
	display: none;
}
.lp-hero-slider .slick-dots {
	position: absolute;
	bottom: 22px;
	left: 0;
	right: 0;
	z-index: 4;
	display: flex !important;
	justify-content: center;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.lp-hero-slider .slick-dots li {
	margin: 0;
}
.lp-hero-slider .slick-dots li button {
	width: 26px;
	height: 4px;
	padding: 0;
	border: none;
	border-radius: 2px;
	background: rgba(255, 255, 255, .35);
	color: transparent;
	font-size: 0;
	cursor: pointer;
	transition: background .25s ease;
}
.lp-hero-slider .slick-dots li.slick-active button {
	background: var(--lp-cyan);
}
.lp-hero-overlay {
	position: absolute;
	inset: 0;
	z-index: 2;
	background: linear-gradient(115deg, rgba(12, 22, 35, .94) 0%, rgba(12, 22, 35, .82) 38%, rgba(12, 22, 35, .55) 68%, rgba(12, 22, 35, .35) 100%);
	/* Purely decorative - was blocking clicks to the slider dots beneath it
	   (same stacking-context trap as .lp-hero-inner above). */
	pointer-events: none;
}
.lp-hero-inner {
	position: relative;
	z-index: 3;
	padding: 190px 0 110px;
	max-width: 720px;
	/* This wrapper's own box extends well past its visible text/buttons
	   (Bootstrap's .container plus this element's own padding), and it
	   sat on top of the slider's dots below (z-index alone can't fix this:
	   .lp-hero-slider is its own stacking context, so its dots' z-index
	   never competes with elements outside that context - confirmed live,
	   a dot click was silently swallowed by this wrapper's empty space).
	   Disable pointer events on the wrapper itself and re-enable them only
	   on the actual interactive children. */
	pointer-events: none;
}
.lp-hero-inner a,
.lp-hero-inner button {
	pointer-events: auto;
}
.lp-eyebrow {
	display: inline-block;
	color: var(--lp-cyan);
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	font-size: 13px;
	margin-bottom: 18px;
}
.lp-hero-inner h1 {
	color: #fff;
	font-size: 48px;
	line-height: 1.15;
	font-weight: 700;
	margin-bottom: 22px;
}
.lp-hero-lead {
	color: rgba(255, 255, 255, .82);
	font-size: 18px;
	line-height: 1.65;
	margin-bottom: 34px;
	max-width: 600px;
}
.lp-hero-ctas {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}
.lp-hero-ctas .button {
	border-radius: 50px;
	padding: 14px 30px;
}
.lp-hero-login {
	margin: 22px 0 0;
	color: rgba(255, 255, 255, .75);
	font-size: 14px;
}
.lp-hero-login a {
	color: #fff;
	font-weight: 600;
	text-decoration: underline;
}
.lp-scroll-cue {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 56px;
	color: rgba(255, 255, 255, .7);
	font-size: 13px;
	text-decoration: none;
	transition: color .2s ease;
}
.lp-scroll-cue:hover {
	color: #fff;
}
.lp-scroll-cue i {
	animation: lp-bounce 1.8s ease-in-out infinite;
}
@keyframes lp-bounce {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(5px); }
}

/* public/css/style.css forces #header-container{position:relative!important}
   at this breakpoint - !important beats the non-important
   .transparent-header{position:absolute} rule regardless of specificity or
   source order, so below 1099px the header always sits in normal document
   flow as a plain white bar above the hero (confirmed via computed style:
   position resolves to "relative", background stays transparent - it's the
   page's own white background showing through, not a header background
   bug). The white logo variant is invisible against that white bar, so
   force it dark here instead of fighting the theme's !important. */
@media (max-width: 1099px) {
	#header-container #logo img {
		filter: brightness(0);
	}
}

@media (max-width: 767px) {
	.lp-hero {
		min-height: unset;
	}
	.lp-hero-inner {
		padding: 150px 0 70px;
	}
	.lp-hero-inner h1 {
		font-size: 32px;
	}
	.lp-hero-lead {
		font-size: 16px;
	}
	.lp-problem,
	.lp-how-it-works,
	.lp-included,
	.lp-trust,
	.lp-faq {
		padding: 56px 0;
	}
	.lp-final-cta {
		padding: 56px 0;
	}
}

/* ---------- Live stats ---------- */
.lp-stats {
	background-color: var(--lp-navy-soft);
	padding: 46px 0;
}
.lp-stats .single-counter i {
	background: var(--lp-cyan);
	color: var(--lp-navy);
	height: 60px;
	width: 60px;
	line-height: 60px;
	font-size: 24px;
	display: inline-block;
}
.lp-stats .single-counter h3 {
	color: #fff;
	margin-top: 18px;
}
.lp-stats .single-counter .counter-title {
	color: rgba(255, 255, 255, .68);
}

/* ---------- Section rhythm ----------
   public/css/style.css's own .section rule is just `display:block` - no
   padding at all (confirmed by reading it directly). Every other page that
   uses .section apparently supplies its own spacing per-view; this page
   never did, so sections butted straight against each other (most visible
   right after the dark .lp-stats band, where the next heading had
   effectively zero breathing room above it). */
.lp-whatis,
.lp-glance,
.lp-problem,
.lp-how-it-works,
.lp-included,
.lp-trust,
.lp-faq,
.lp-contact {
	padding: 90px 0;
}
.lp-whatis .section-headline,
.lp-glance .section-headline,
.lp-problem .section-headline,
.lp-how-it-works .section-headline,
.lp-included .section-headline,
.lp-trust .section-headline,
.lp-faq .section-headline,
.lp-contact .section-headline {
	margin-bottom: 50px;
}
.lp-whatis .section-headline span,
.lp-glance .section-headline span,
.lp-problem .section-headline span,
.lp-how-it-works .section-headline span,
.lp-included .section-headline span,
.lp-trust .section-headline span,
.lp-faq .section-headline span,
.lp-contact .section-headline span {
	color: var(--lp-cyan-dark);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	font-size: 13px;
}
.lp-whatis .section-headline h2,
.lp-glance .section-headline h2,
.lp-problem .section-headline h2,
.lp-how-it-works .section-headline h2,
.lp-included .section-headline h2,
.lp-trust .section-headline h2,
.lp-faq .section-headline h2,
.lp-contact .section-headline h2 {
	color: var(--lp-navy);
	font-size: 32px;
	line-height: 1.3;
}

/* ---------- What is iPlot ---------- */
.lp-whatis-lead {
	text-align: center;
	color: var(--lp-muted);
	font-size: 19px;
	line-height: 1.75;
	max-width: 760px;
	margin: 0 auto;
}

/* ---------- How it works, at a glance ---------- */
.lp-glance-row {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	gap: 8px;
	max-width: 1100px;
	margin: 0 auto;
}
.lp-glance-step {
	flex: 1;
	text-align: center;
	max-width: 300px;
}
.lp-glance-step i {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 68px;
	height: 68px;
	background: var(--lp-navy);
	color: var(--lp-cyan);
	font-size: 26px;
	margin-bottom: 20px;
}
.lp-glance-step h4 {
	color: var(--lp-navy);
	font-size: 17px;
	margin-bottom: 8px;
}
.lp-glance-step p {
	color: var(--lp-muted);
	font-size: 14.5px;
	line-height: 1.6;
	margin: 0;
}
.lp-glance-arrow {
	flex: none;
	color: var(--lp-border);
	font-size: 24px;
	margin-top: 22px;
}
@media (max-width: 767px) {
	.lp-glance-row {
		flex-direction: column;
		align-items: center;
		gap: 24px;
	}
	.lp-glance-arrow {
		transform: rotate(90deg);
		margin-top: 0;
	}
	.lp-whatis,
	.lp-glance {
		padding: 56px 0;
	}
	.lp-whatis-lead {
		font-size: 16px;
	}
}

/* ---------- Cards ---------- */
/* row-gap (not margin-bottom on .lp-card) makes the vertical spacing
   between wrapped rows. These cards sit inside a Bootstrap flex .row,
   and a child's margin-bottom collapses/escapes out of its .col flex-item
   parent's box instead of pushing the next flex line down, which left
   wrapped rows touching with zero gap between them regardless of the
   margin value. row-gap is part of the flex layout algorithm itself, so
   it isn't subject to that collapse. */
.lp-trust-grid,
.lp-problem-grid {
	row-gap: 30px;
}
.lp-card {
	background: #fff;
	border: 1px solid var(--lp-border);
	border-radius: 14px;
	padding: 34px 28px;
	height: 100%;
	transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.lp-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 18px 40px rgba(12, 22, 35, .1);
	border-color: var(--lp-cyan);
}
.lp-card i {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	background: var(--lp-bg-soft);
	color: var(--lp-cyan-dark);
	font-size: 22px;
	margin-bottom: 18px;
	transition: background .25s ease, color .25s ease;
}
.lp-card:hover i {
	background: var(--lp-cyan);
	color: var(--lp-navy);
}
.lp-card h4 {
	color: var(--lp-navy);
	margin-bottom: 10px;
	font-size: 18px;
}
.lp-card p {
	color: var(--lp-muted);
	font-size: 15px;
	line-height: 1.6;
	margin: 0;
}

/* ---------- How it works tracks ---------- */
.lp-tracks {
	margin-bottom: 10px;
}
.lp-track {
	background: #fff;
	border: 1px solid var(--lp-border);
	border-radius: 16px;
	padding: 40px 36px;
	height: 100%;
	margin-bottom: 30px;
	/* The two tracks' step text runs different lengths ("Registering an
	   Estate"'s steps wrap to more lines than "Checking a Plot"'s), so the
	   CTA button landed at a different height in each card even though the
	   cards themselves were already equal height (Bootstrap's row stretches
	   both columns to match). Flex column + pushing the button to the
	   bottom with margin-top:auto pins both buttons to the same Y position
	   regardless of how much the step text above them runs, without
	   needing to artificially force every step row to match a fixed
	   height. */
	display: flex;
	flex-direction: column;
}
.lp-track > .button {
	margin-top: auto;
	align-self: flex-start;
}
.lp-track-title {
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--lp-navy);
	font-size: 20px;
	margin-bottom: 26px;
}
.lp-track-title i {
	color: var(--lp-cyan-dark);
}
.lp-steps {
	list-style: none;
	margin: 0 0 28px;
	padding: 0;
}
.lp-steps li {
	display: flex;
	gap: 16px;
	padding: 0 0 22px;
	/* The two tracks' step descriptions run different lengths (some wrap to
	   2-3 lines, some don't), so pushing the CTA to the bottom of the card
	   (see .lp-track above) left all the slack as one gap right above the
	   button on the shorter card instead of spread evenly - confirmed live:
	   row heights measured at [75,98,75,76] on one card vs [98,98,98,76] on
	   the other. A shared min-height (tallest measured row, +2px safety)
	   makes every row the same height in both cards, so corresponding
	   steps land at the same Y and the leftover space distributes across
	   the rows instead of collecting in one spot before the button. */
	min-height: 100px;
}
.lp-steps li:last-child {
	padding-bottom: 0;
}
.lp-step-num {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	background: var(--lp-navy);
	color: var(--lp-cyan);
	font-weight: 700;
	font-size: 14px;
}
.lp-steps strong {
	display: block;
	color: var(--lp-ink);
	margin-bottom: 4px;
	font-size: 16px;
}
.lp-steps p {
	color: var(--lp-muted);
	font-size: 14.5px;
	line-height: 1.55;
	margin: 0;
}

/* ---------- Photo bands ---------- */
.lp-photo-band {
	margin: 20px 0 0;
	border-radius: 16px;
	overflow: hidden;
}
.lp-photo-band img {
	width: 100%;
	height: auto;
	max-height: 420px;
	object-fit: cover;
	display: block;
}
.lp-photo-band figcaption {
	background: var(--lp-navy);
	color: rgba(255, 255, 255, .85);
	font-size: 13.5px;
	padding: 14px 20px;
}
/* ---------- Free vs Verified comparison ---------- */
.lp-compare {
	align-items: stretch;
}
.lp-plan-card {
	background: #fff;
	border: 1px solid var(--lp-border);
	border-radius: 16px;
	padding: 40px 36px;
	height: 100%;
	margin-bottom: 30px;
}
.lp-plan-card-highlight {
	border-color: var(--lp-cyan);
	box-shadow: 0 18px 40px rgba(32, 190, 220, .16);
}
.lp-plan-badge {
	display: inline-block;
	background: var(--lp-bg-soft);
	color: var(--lp-muted);
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	padding: 6px 14px;
	border-radius: 50px;
	margin-bottom: 16px;
}
.lp-plan-badge-accent {
	background: var(--lp-navy);
	color: var(--lp-cyan);
}
.lp-plan-card h3 {
	color: var(--lp-navy);
	font-size: 24px;
	margin-bottom: 6px;
}
.lp-plan-sub {
	color: var(--lp-muted);
	font-size: 14px;
	margin-bottom: 24px;
}
.lp-check-list {
	list-style: none;
	margin: 0 0 28px;
	padding: 0;
}
.lp-check-list li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	color: var(--lp-ink);
	font-size: 15px;
	line-height: 1.5;
	padding-bottom: 12px;
}
.lp-check-list li i {
	color: var(--lp-cyan-dark);
	margin-top: 3px;
	flex: none;
}

/* ---------- FAQ accordion ---------- */
.lp-accordion {
	border-top: 1px solid var(--lp-border);
}
.lp-accordion .js-accordion-item {
	border-bottom: 1px solid var(--lp-border);
}
.lp-accordion .js-accordion-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 22px 4px;
	cursor: pointer;
	font-weight: 600;
	color: var(--lp-ink);
	font-size: 16px;
}
.lp-accordion .js-accordion-header i {
	flex: none;
	color: var(--lp-cyan-dark);
	transition: transform .25s ease;
}
.lp-accordion .js-accordion-item.active .js-accordion-header i {
	transform: rotate(180deg);
}
.lp-accordion .js-accordion-body {
	/* Closed by default (matches pre-JS state) - but no ".active" override
	   forcing display:block here. public/js/custom.js's accordion.toggle()
	   adds the "active" class BEFORE calling jQuery's slideToggle(); if CSS
	   also flips display:block the instant that class lands, slideToggle
	   reads the element as "already visible" and immediately animates it
	   back closed - a real bug, reproduced live: clicking any item opened
	   it for one frame then slid it shut again. jQuery owns this element's
	   display entirely from here (its own init() call already does
	   .find('> .js-accordion-body').show() for the server-rendered "active"
	   item once, before any click happens). */
	display: none;
	padding: 0 4px 22px;
}
.lp-accordion .js-accordion-body p {
	color: var(--lp-muted);
	line-height: 1.65;
	margin: 0;
}

/* ---------- Final CTA band ---------- */
.lp-final-cta {
	background: linear-gradient(120deg, var(--lp-navy) 0%, var(--lp-navy-soft) 100%);
	padding: 80px 0;
	text-align: center;
}
.lp-final-cta h2 {
	color: #fff;
	font-size: 30px;
	margin-bottom: 30px;
}
.lp-final-cta .lp-hero-ctas {
	justify-content: center;
}
/* layouts/app.blade.php always inserts a <div class="margin-top-70"></div>
   spacer right before the footer, sized for a plain white page ending in
   text - it leaves an unstyled white gap between this section's own navy
   background and the dark footer. Scoped to just that one sibling so the
   generic .margin-top-70 utility class is untouched everywhere else. */
.lp-final-cta + .margin-top-70 {
	display: none;
}

/* Footer socials default to the theme's teal accent (#00e2bd) - swap to
   the brand cyan so the page doesn't shift palette right above the footer.
   Scoped to this page only (landing.css isn't loaded elsewhere).
   style.css's own .footer-social-links li a rule also sets opacity:.5 by
   default (full opacity only on :hover) - looks washed out/disabled at
   rest, confirmed live, and mobile visitors have no hover at all so they'd
   never see it at full strength. Force full opacity always; keep the
   existing hover color shift as the only hover feedback. */
.footer-social-links a {
	background-color: var(--lp-cyan) !important;
	opacity: 1 !important;
}
.footer-social-links a:hover {
	background-color: var(--lp-cyan-dark) !important;
}

/* #footer's decorative swirl graphic (public/images/hossain.gif,
   .footer-animate-gif-inner, position:absolute, height:500px, top:-40px -
   all from style.css, unmodified) overflows well past this page's actual
   footer content height and was never clipped, since no other page in the
   app renders the full footer to begin with (login/register/etc. all use
   bare-page mode, which hides it entirely - this is, again, the first page
   to actually exercise it). Clip it to the real footer bounds instead of
   letting it hang into empty space below the visible content. */
#footer {
	overflow: hidden;
}

/* header.fullwidth .container (public/css/style.css) sets max-width:100%
   with no cap at all - fine on typical laptop/desktop widths, but on a
   large/ultra-wide monitor (confirmed live at 2560px and 3440px) the logo
   stays pinned near the true left edge (its own margin-left:140px) while
   .right-side is position:absolute; right:25px - 25px from the true
   viewport edge, not from any contained width - leaving a huge, visually
   disconnected gap between the nav and the Log In/Sign Up buttons. This is
   a site-wide header rule, not landing-page-specific, but only fixed here
   (landing.css only loads on this page) - the same gap likely shows on
   every other page at this width too, worth a wider fix later.
   Constraining .container's width keeps .right-side's right:25px anchored
   to a sane edge instead of the raw viewport (it's already
   position:relative, so this reflows the absolute child correctly). */
#header .container {
	max-width: 1600px;
	margin-left: auto;
	margin-right: auto;
}

/* Sign Up sits inside .header-widget (display:inline-block, height:100%)
   with no vertical-centering rule that actually matches this markup - the
   theme's .log-in-button centering CSS targets a class neither header link
   carries (checked layouts/app.blade.php's actual markup: plain <a> tags,
   no .log-in-button class on either), and .header-widget's guest links have
   never rendered on any other page (same reason as the footer above - every
   other guest page is bare-page, hiding the header). Fix alignment with
   flexbox and use the brand cyan instead of the theme's default blue. */
/* Second attempt, and a second real bug found live testing this: forcing
   #header .right-side itself to display:flex (to vertically center its
   child) fixed centering on desktop but broke mobile - .right-side is
   position:absolute with only `right` set, no explicit width, so its
   width comes from a shrink-to-fit calculation that differs by display
   mode: block shrink-to-fit sizes to its WIDEST single child, flex
   shrink-to-fit sizes to the SUM of all children side by side (.header-
   widget + the hamburger trigger). That sum was wide enough to push
   .right-side's left edge back under the logo - confirmed live at 390px:
   "Log In" rendered directly against "iPlot" with the two overlapping.
   Vertical centering .header-widget itself, the same way (never applied,
   since no header-widget link actually carries the class) the theme's own
   .log-in-button rule already does it - position:relative + top:50% +
   translateY(-50%) - centers it without touching .right-side's own
   display or width algorithm at all. */
.right-side .header-widget {
	position: relative;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	gap: 20px;
	height: auto;
}
.right-side .header-widget a.button {
	background-color: var(--lp-cyan);
	border-color: var(--lp-cyan);
	color: var(--lp-navy);
}
.right-side .header-widget a.button:hover {
	background-color: var(--lp-cyan-dark);
	border-color: var(--lp-cyan-dark);
}
/* .right-side is position:absolute;right:25px with no explicit width - its
   shrink-to-fit width is the combined line width of .header-widget (Log In
   + gap + Sign Up) and the hamburger trigger, ~277px, regardless of the
   flex/block question above (confirmed unchanged either way). On a 390px
   viewport that's wide enough to structurally overlap the logo (measured
   live: right-side's left edge landed at x=88, logo's right edge at
   x=130). Not something the vertical-centering fix could address - it's
   the box's width, not its alignment. "Log In" is already reachable from
   the mm-menu (confirmed: the cloned mobile nav already lists it), so
   dropping the redundant inline copy below this breakpoint removes enough
   width to clear the overlap instead of fighting the theme's absolute
   positioning math. */
@media (max-width: 420px) {
	.right-side .header-widget a:not(.button) {
		display: none;
	}
}

/* ---------- Scroll-reveal (public/js/landing.js toggles .is-visible) ---------- */
.reveal {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity .6s ease, transform .6s ease;
}
.reveal.is-visible {
	opacity: 1;
	transform: none;
}
@media (prefers-reduced-motion: reduce) {
	.reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
	.lp-scroll-cue i {
		animation: none;
	}
}

/* ---------- Contact ---------- */
/* .input-with-icon-left's left-padding rule (style.css) only targets
   `input`, since every other use of that wrapper in the app is a single
   line field. The message textarea needs the same padding itself, or its
   text sits directly under the icon box. */
.lp-contact .input-with-icon-left textarea {
	padding-left: 65px;
}
/* This page brands with the logo cyan everywhere else; plain <a> and
   .button pick up the theme's default blue skin (public/css/colors/blue.css,
   #0053e2) otherwise. */
.lp-contact .contact-details a {
	color: var(--lp-cyan-dark);
}
.lp-contact .button {
	background-color: var(--lp-cyan);
	border-color: var(--lp-cyan);
	color: var(--lp-navy);
	font-weight: 700;
}
.lp-contact .button:hover {
	background-color: var(--lp-cyan-dark);
	border-color: var(--lp-cyan-dark);
}
/* #backtotop (public/js/custom.js) is appended to every page's <body>, but
   this rule only loads on the pages that push landing.css, so it's already
   scoped to this one without needing a body class. */
#backtotop a {
	background-color: var(--lp-cyan);
}
#backtotop a:hover {
	background-color: var(--lp-cyan-dark);
}