/* Public landing-page styles, kept separate from the canvas UI.
   Color and shadow tokens inherit from app.css. */

/* Global anchor reset for the landing surface. The shared app.css
   gives every <a> a transparent border-bottom that animates to the
   accent color on hover, meant as the canvas's link affordance.
   But the landing's per-anchor rules ALSO add text-decoration:
   underline on hover (.lp-hero-trust a, .lp-trust-item a, etc.).
   The two combined render as a visible "double underline" on every
   hovered link.
   Scope the reset to non-button anchors only: .lp-cta--secondary and
   the fixed sign-in pill use actual borders, and a blanket
   `.lp-body a { border-bottom: 0 }` clips their bottom edges. */
.lp-body a:not(.lp-cta):not(.lp-signin-pill) { border-bottom: 0; }

/* ===== Preview banner (delete with this page) =====
   Sits BELOW the shared .app-top-strip (which is position:fixed at
   top:0, z-index:1000). top: 48px aligns the banner immediately
   beneath the top-strip's bottom edge. z-index above 1000 keeps the
   banner visible above any other absolutely-positioned content. */
.lp-preview-banner {
	position: sticky; top: 48px; z-index: 1010;
	display: flex; justify-content: center; align-items: center; gap: 1em;
	padding: 0.5em 1em;
	background: var(--accent, #e09240); color: var(--accent-text, #181b20);
	font-size: 0.85rem;
}
.lp-preview-banner-link { color: inherit; text-decoration: underline; font-weight: 500; }

/* ===== Sign-in pill (top-right, fixed) =====
   Sits OVER the shared .app-top-strip (z-index:1000) on the right
   side, occupying the area the top-strip leaves empty for signed-out
   visitors. Needs z-index > 1000 to overlay the top-strip; the small
   top:8px aligns vertically with the top-strip's brand text.

   When the real landing ships (preview banner gone), this pill stays
   exactly where it is: top-right is the canonical "Sign in" spot
   that returning users instinctively scan. */
.lp-signin-pill {
	position: fixed;
	top: 8px;
	right: 1.2em;
	z-index: 1020;
	display: inline-flex; align-items: center; gap: 0.35em;
	/* Integer height keeps the 1px bottom border on a whole-pixel
	   boundary; em-padding gave a fractional height (32.27px) whose
	   bottom border antialiased into invisibility at 1x DPI. */
	height: 32px;
	box-sizing: border-box;
	padding: 0 1em;
	background: var(--bg-card, #262a31);
	border: 1px solid var(--border, #383d46);
	border-radius: 999px;
	color: var(--ink, #ede8dd);
	font-size: 0.85rem; font-weight: 500;
	text-decoration: none;
	box-shadow: var(--shadow-soft, 0 1px 4px rgba(0,0,0,0.18));
	transition: border-color 100ms, color 100ms, transform 100ms;
}
.lp-signin-pill:hover {
	border-color: var(--accent, #e09240);
	color: var(--accent, #e09240);
	transform: translateY(-1px);
}

/* ===== Layout shell ===== */
.lp-body { background: var(--bg, #181b20); color: var(--ink, #ede8dd); }
.lp-main { max-width: 1180px; margin: 0 auto; padding: 0 1.5em; }
.lp-section { padding: 5em 0; border-top: 1px solid var(--border-soft, #2a2e36); }
.lp-section-title { font-size: 2rem; margin: 0 0 0.8em; letter-spacing: -0.01em; text-align: center; }
.lp-section-sub { color: var(--ink-soft, #cfccc3); text-align: center; max-width: 36em; margin: -0.4em auto 2.5em; }

/* ===== Hero ===== */
.lp-hero {
	display: grid; grid-template-columns: 1fr; gap: 2.75em;
	padding: 5em 0 4em;
}
.lp-hero-text {
	display: block;
	text-align: center;
}
.lp-hero-copy { max-width: 900px; margin: 0 auto; }
.lp-hero-actions { margin-top: 1.6em; }
.lp-headline {
	font-size: 3.2rem; line-height: 1.05; letter-spacing: -0.02em;
	margin: 0 0 0.7em;
}
.lp-headline-accent { color: var(--accent, #e09240); }
.lp-subhead {
	font-size: 1.15rem; line-height: 1.5; color: var(--ink-soft, #cfccc3);
	margin: 0 auto 1.6em; max-width: 42em;
}
.lp-hero-ctas { display: flex; gap: 0.7em; align-items: center; justify-content: center; flex-wrap: wrap; }

/* ===== Hero trust list =====
   Keeps the three friction-removal claims in a quiet strip below
   the product image, then stacks them on narrow screens. */
.lp-hero-trust {
	list-style: none;
	padding: 1em 1.2em;
	margin: 1.2em 0 0;
	display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1em;
	background: var(--bg-elev, #20242a);
	border: 1px solid var(--border-soft, #2a2e36);
	border-radius: 8px;
	color: var(--ink-soft, #cfccc3);
	font-size: 0.92rem;
}
.lp-hero-trust li {
	display: flex; align-items: center; justify-content: center; gap: 0.5em;
	text-align: center;
}
.lp-hero-trust .lp-trust-icon {
	color: var(--success, #7ac96a);
	font-size: 1em;
	flex: 0 0 auto;
}
.lp-hero-trust a {
	color: var(--accent, #e09240);
	text-decoration: none;
}
.lp-hero-trust a:hover {
	text-decoration: underline;
}
.lp-hero-visual { display: block; width: 100%; }
.lp-hero-screenshot {
	width: 100%; aspect-ratio: 1976 / 883;
	background: var(--bg-elev, #20242a); border: 1px solid var(--border, #383d46);
	border-radius: 10px; box-shadow: 0 20px 60px rgba(0,0,0,0.4);
	overflow: hidden;
}
.lp-hero-screenshot-image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* ===== CTAs ===== */
.lp-cta {
	display: inline-flex; align-items: center; justify-content: center;
	padding: 0.7em 1.4em; border-radius: 6px;
	font-size: 1rem; font-weight: 500; text-decoration: none;
	transition: transform 80ms ease, background 100ms ease, color 100ms ease;
}
.lp-cta--primary {
	background: var(--accent, #e09240); color: var(--accent-text, #181b20);
}
.lp-cta--primary:hover { background: var(--accent-hot, #f5a347); transform: translateY(-1px); }
.lp-cta--secondary {
	background: transparent; color: var(--ink, #ede8dd);
	border: 1px solid var(--border, #383d46);
}
.lp-cta--secondary:hover { border-color: var(--border-hot, #484d57); color: var(--ink, #ede8dd); }
.lp-cta--large { padding: 1em 2em; font-size: 1.1rem; }

/* ===== Trust strip ===== */
.lp-trust-strip {
	display: flex; justify-content: center; gap: 2.5em; flex-wrap: wrap;
	padding: 1.8em 1.5em;
	border-top: 1px solid var(--border-soft, #2a2e36);
	border-bottom: 1px solid var(--border-soft, #2a2e36);
	background: var(--bg-inset, #14171c);
	margin: 0 -1.5em;
	color: var(--ink-soft, #cfccc3); font-size: 0.95rem;
}
.lp-trust-item { display: flex; align-items: center; gap: 0.5em; }
.lp-trust-icon { color: var(--success, #7ac96a); font-size: 1.1em; }
.lp-trust-item a { color: var(--accent, #e09240); text-decoration: none; }
.lp-trust-item a:hover { text-decoration: underline; }

/* ===== Problem / Solution =====
   Override .lp-section's default 5em vertical padding so the pain
   trio sits closer to the features section that answers it. The
   narrative flow is "here's the binary → here's the alternative";
   tighter spacing between the two sections makes that handoff read
   as a single beat instead of two stacked moments. The matching
   override on .lp-features pulls its top edge up to meet. */
.lp-problem { padding: 2.5em 0 1.5em; }
.lp-problem-grid {
	display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5em;
	margin-bottom: 0;
}
.lp-pain-card {
	padding: 1.1em 1.2em;
	background: var(--bg-elev, #20242a);
	border: 1px solid var(--border-soft, #2a2e36); border-radius: 8px;
}
.lp-pain-head {
	display: flex; align-items: center; gap: 0.5em;
	margin-bottom: 0.5em;
}
.lp-pain-icon {
	color: var(--warn, #e0a048);
	font-size: 1.1em;
	line-height: 1;
	flex: 0 0 auto;
}
.lp-pain-title { font-size: 1rem; margin: 0; line-height: 1.2; }
.lp-pain-card p { color: var(--ink-soft, #cfccc3); font-size: 0.9rem; line-height: 1.5; margin: 0; }
.lp-problem-solution {
	text-align: center; max-width: 38em; margin: 0 auto;
	color: var(--ink, #ede8dd); font-size: 1.05rem; line-height: 1.55;
}

/* ===== Features =====
   Top padding tightened to pull this section up against the
   problem section above (see .lp-problem above for the matching
   override). Bottom padding stays at the .lp-section default 5em
   so the visual rhythm restores after the features→comparison
   transition. */
.lp-features { padding-top: 2.5em; }
.lp-features-grid {
	display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5em;
}
.lp-feature-card {
	padding: 1.8em 1.6em;
	background: var(--bg-card, #262a31);
	border: 1px solid var(--border-soft, #2a2e36); border-radius: 8px;
}
/* Soft accent-tinted circle gives each feature card a deliberate visual
   anchor instead of a bare glyph floating above the title. Sized so a
   24-28 px SVG or a Unicode glyph at ~1.4em both center cleanly, with
   line-height: 1 so the glyph doesn't shift the circle's vertical
   center. Works for both the current Unicode entities and any inline
   SVG that respects currentColor (Lucide, Heroicons, Phosphor, etc.)
   without further changes. */
.lp-feature-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: color-mix(in srgb, var(--accent, #e09240) 14%, transparent);
	color: var(--accent, #e09240);
	font-size: 1.4em;
	line-height: 1;
	margin-bottom: 0.9em;
}
.lp-feature-icon svg, .lp-feature-icon img { display: block; width: 24px; height: 24px; }
.lp-feature-title { font-size: 1.15rem; margin: 0 0 0.4em; }
.lp-feature-card p { color: var(--ink-soft, #cfccc3); font-size: 0.95rem; line-height: 1.55; margin: 0; }

/* ===== Comparison ===== */
/* Horizontal-overflow wrapper for the comparison table. Six tool
   columns + the label column don't fit readably under ~720px, so the
   wrapper lets the table scroll horizontally on narrow viewports
   while the grid stays intact at desktop widths. -webkit-overflow-
   scrolling: touch gives iOS-style momentum on Safari. The negative
   margin + matching padding lets the table bleed to the section's
   left/right edges on phone widths so the scrollable area uses the
   full viewport. */
.lp-compare-table-wrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	max-width: 100%;
}
.lp-compare-table {
	max-width: 940px;
	min-width: 720px;
	margin: 0 auto;
	border: 1px solid var(--border-soft, #2a2e36); border-radius: 8px;
	overflow: hidden;
}
.lp-compare-row {
	display: grid;
	grid-template-columns: 2.2fr 1fr 1fr 1fr 1fr 1fr;
	padding: 0.9em 1.2em;
	border-top: 1px solid var(--border-soft, #2a2e36);
	align-items: center;
}
.lp-compare-row:first-child { border-top: 0; }
.lp-compare-row--header {
	background: var(--bg-elev, #20242a);
	font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-soft, #cfccc3);
}
.lp-compare-row--header .lp-compare-col--us { color: var(--accent, #e09240); font-weight: 600; }
.lp-compare-label { color: var(--ink, #ede8dd); font-size: 0.95rem; }
.lp-compare-col { text-align: center; color: var(--ink-faint, #6d6a62); font-size: 0.95rem; }
.lp-compare-check { color: var(--success, #7ac96a); font-weight: 500; }

/* ===== Pricing ===== */
.lp-pricing-grid {
	display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5em;
	max-width: 1000px; margin: 0 auto;
}
.lp-price-card {
	padding: 2em 1.6em;
	background: var(--bg-card, #262a31);
	border: 1px solid var(--border-soft, #2a2e36); border-radius: 10px;
	display: flex; flex-direction: column;
	position: relative;
}
.lp-price-card--featured {
	border-color: var(--accent, #e09240); border-width: 2px;
	transform: scale(1.03);
}
.lp-price-ribbon {
	position: absolute; top: -0.7em; left: 50%; transform: translateX(-50%);
	background: var(--accent, #e09240); color: var(--accent-text, #181b20);
	padding: 0.2em 0.8em; border-radius: 999px;
	font-size: 0.75rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em;
}
.lp-price-name { font-size: 1.05rem; color: var(--ink-soft, #cfccc3); margin-bottom: 0.4em; text-transform: uppercase; letter-spacing: 0.05em; }
.lp-price-amount { font-size: 2.4rem; font-weight: 600; line-height: 1; margin-bottom: 1.2em; }
.lp-price-period { font-size: 0.85rem; font-weight: 400; color: var(--ink-faint, #6d6a62); margin-left: 0.2em; }
.lp-price-features { list-style: none; padding: 0; margin: 0 0 1.6em; color: var(--ink-soft, #cfccc3); font-size: 0.9rem; }
.lp-price-features li { padding: 0.35em 0; border-bottom: 1px solid var(--border-soft, #2a2e36); }
.lp-price-features li:last-child { border-bottom: 0; }
.lp-price-card .lp-cta { margin-top: auto; width: 100%; box-sizing: border-box; }

/* ===== Security ===== */
.lp-security-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5em; }
.lp-security-card {
	padding: 1.2em 1.6em 1.8em;
	background: var(--bg-elev, #20242a);
	border: 1px solid var(--border-soft, #2a2e36); border-radius: 8px;
}
.lp-security-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--bg-inset, #14171c);
	border: 1px solid var(--border-soft, #2a2e36);
	margin-bottom: 0.7em;
}
.lp-security-icon svg, .lp-security-icon img { display: block; width: 24px; height: 24px; }
.lp-security-title { font-size: 1.05rem; margin: 0 0 0.4em; }
.lp-security-card p { color: var(--ink-soft, #cfccc3); font-size: 0.92rem; line-height: 1.55; margin: 0; }
.lp-security-card a { color: var(--accent, #e09240); text-decoration: none; }
.lp-security-card a:hover { text-decoration: underline; }

/* ===== FAQ ===== */
.lp-faq-list { max-width: 740px; margin: 0 auto; }
.lp-faq-item {
	padding: 1em 1.2em;
	border-bottom: 1px solid var(--border-soft, #2a2e36);
}
.lp-faq-item summary {
	cursor: pointer;
	font-size: 1rem; font-weight: 500; color: var(--ink, #ede8dd);
	list-style: none;
}
.lp-faq-item summary::-webkit-details-marker { display: none; }
.lp-faq-item summary::before {
	content: '+';
	margin-right: 0.6em; color: var(--accent, #e09240); font-weight: 700;
	display: inline-block; width: 1em;
}
.lp-faq-item[open] summary::before { content: '\2013'; }
.lp-faq-item p { margin: 0.7em 0 0 1.6em; color: var(--ink-soft, #cfccc3); font-size: 0.92rem; line-height: 1.55; }

/* ===== Final CTA ===== */
.lp-final-cta {
	text-align: center;
	padding: 5em 0;
	border-top: 1px solid var(--border-soft, #2a2e36);
}
.lp-final-headline { font-size: 2.2rem; margin: 0 0 0.4em; letter-spacing: -0.01em; }
.lp-final-sub { color: var(--ink-soft, #cfccc3); margin: 0 0 2em; }
.lp-final-fineprint { color: var(--ink-faint, #6d6a62); font-size: 0.85rem; margin-top: 1.4em; }
.lp-final-fineprint a { color: var(--accent, #e09240); text-decoration: none; }
.lp-final-fineprint a:hover { text-decoration: underline; }

/* Footer styles moved to app.css as .site-footer*: the footer is
   now a shared partial (partials/site-footer.ejs) used by every
   non-canvas page, including this one. */

/* ===== Responsive ===== */
@media (max-width: 820px) {
	.lp-hero { grid-template-columns: 1fr; padding: 4em 0 2em; gap: 2em; }
	.lp-hero-trust { grid-template-columns: 1fr; gap: 0.6em; }
	.lp-headline { font-size: 2.2rem; }
	.lp-problem-grid { grid-template-columns: 1fr; }
	.lp-features-grid { grid-template-columns: 1fr; }
	.lp-compare-row { grid-template-columns: 1.6fr repeat(5, 1fr); padding: 0.8em 0.8em; font-size: 0.8rem; }
	.lp-pricing-grid { grid-template-columns: 1fr; }
	.lp-price-card--featured { transform: none; }
	.lp-security-grid { grid-template-columns: 1fr; }
	.lp-section { padding: 3em 0; }
}