/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

.landing-video-pair-card {
	background-color: #fff !important;
	background-image: none !important;
	border-radius: 1rem;
	box-shadow:
		0 28px 70px rgba(15, 23, 42, 0.10),
		0 0 0 1px rgba(255, 255, 255, 0);
	isolation: isolate;
}

.landing-phone-preview {
	border-radius: 0.5rem;
	overflow: hidden;
	clip-path: inset(0 round 0.5rem);
}

.landing-phone-preview > img {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 0.5rem;
	clip-path: inset(0 round 0.5rem);
}

/* ── Report Preview — animated 3-page stack ──────────────────────── */
.rp-stage {
	position: relative;
	width: 100%;
	max-width: 22rem;
}

.rp-page {
	background: #fff;
	border-radius: 0.75rem;
	overflow: hidden;
	box-shadow: 0 8px 32px rgba(15, 23, 42, 0.11), 0 0 0 1px rgba(226, 232, 240, 0.8);
	transition: transform 0.65s cubic-bezier(0.34, 1.15, 0.64, 1), opacity 0.5s ease, z-index 0s;
	will-change: transform, opacity;
}

.rp-page img { display: block; width: 100%; height: auto; }

/* Pages 2 & 3 overlay page 1 (the height-setter) */
.rp-page-2,
.rp-page-3 { position: absolute; top: 0; left: 0; width: 100%; }

/* ── Phase 0 defaults (all hidden) ── */
.rp-page-1 { position: relative; z-index: 3; opacity: 0; }
.rp-page-2 { z-index: 4; opacity: 0; transform: translateX(0) translateY(-45%) scale(0.92); }
.rp-page-3 { z-index: 2; opacity: 0; transform: translateX(0) translateY(-25%) scale(0.88); }

/* ── Phase 1: page 2 drops to center ── */
[data-phase="1"] .rp-page-2 {
	opacity: 1;
	transform: translateX(0) translateY(0) scale(1);
}

/* ── Phase 2: fan / spread — pages fully separated ── */
[data-phase="2"] .rp-page-1 {
	opacity: 1;
	transform: translateX(-58%) translateY(4%) scale(0.84);
	z-index: 3;
}
[data-phase="2"] .rp-page-2 {
	opacity: 1;
	transform: translateX(0%) translateY(-3%) scale(0.84);
	z-index: 4;
}
[data-phase="2"] .rp-page-3 {
	opacity: 0.9;
	transform: translateX(62%) translateY(5%) scale(0.84);
	z-index: 2;
}

/* ── Phase 3: final stack ── */
[data-phase="3"] .rp-page-1 {
	opacity: 1;
	transform: none;
	z-index: 3;
}
[data-phase="3"] .rp-page-2 {
	opacity: 1;
	transform: translateX(6%) translateY(0.65rem);
	z-index: 2;
}
[data-phase="3"] .rp-page-3 {
	opacity: 1;
	transform: translateX(11%) translateY(1.3rem);
	z-index: 1;
}

@media (min-width: 1024px) {
	/* Landscape: fill the grid column but cap by section height so it doesn't overflow */
	.rp-stage { max-width: min(100%, calc((100svh - 16rem) * 0.70)); }
}

@media (max-width: 1023px) {
	/* Shrink stage so image + text stack fits in the panel height */
	.rp-stage { max-width: 16rem; }
	/* Skip the fan on mobile — jump straight to final stack layout */
	[data-phase="2"] .rp-page-1 { opacity: 1; transform: none; z-index: 3; }
	[data-phase="2"] .rp-page-2 { opacity: 1; transform: translateX(6%) translateY(0.65rem); z-index: 2; }
	[data-phase="2"] .rp-page-3 { opacity: 1; transform: translateX(11%) translateY(1.3rem); z-index: 1; }
}
@media (max-width: 639px) {
	/* Further shrink on small phones */
	.rp-stage { max-width: 12rem; }
}

/* ═══════════════════════════════════════════════════════════════
   SECTION_FEATURES_MORE — animated dot background + Three.js canvas
   ═══════════════════════════════════════════════════════════════ */

/* ── Dot layers: static base + smooth-drifting overlay ──────── */
/* Layer 1 (bottom): fixed grid — provides stable visual anchor  */
.fm-dot-static {
        background-image: radial-gradient(rgba(99, 102, 241, 0.22) 1.5px, transparent 1.5px);
        background-size: 32px 32px;
        background-position: 0px 0px;
}
/* Layer 2 (top): identical grid that drifts diagonally.         */
/* 32px → 0px loops seamlessly because tile repeats at 32px.    */
.fm-dot-float {
        background-image: radial-gradient(rgba(99, 102, 241, 0.14) 1.5px, transparent 1.5px);
        background-size: 32px 32px;
        animation: fm-dot-drift 10s linear infinite;
}
@keyframes fm-dot-drift {
        0%   { background-position: 0px   0px; }
        100% { background-position: 32px  32px; }
}

/* ── Site footer — Apple reference (awesome-design-md/apple): parchment band, quiet link columns,
      fine-print legal row under one hairline. Flat: no shadows, no boxed icons. ─────────────── */
.site-footer {
	--footer-canvas: #f5f5f7;
	--footer-ink: #1d1d1f;
	--footer-ink-80: #333336;
	--footer-ink-48: #6e6e73;
	--footer-hairline: #d2d2d7;
	--footer-focus: #0071e3;
	background: var(--footer-canvas);
	color: var(--footer-ink-80);
	font-family: "SF Pro Text", -apple-system, BlinkMacSystemFont, "Helvetica Neue", system-ui, sans-serif;
	word-break: keep-all;
}

.site-footer-inner { padding-top: 3.5rem; padding-bottom: 2rem; }

.site-footer a { color: inherit; text-decoration: none; }
.site-footer a:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.site-footer a:focus-visible { outline: 2px solid var(--footer-focus); outline-offset: 2px; border-radius: 4px; }

.site-footer-top { display: grid; gap: 2.5rem; }

.site-footer-logo {
	display: inline-flex;
	align-items: center;
	gap: 0.625rem;
	color: var(--footer-ink) !important;
	font-size: 1.0625rem;
	font-weight: 600;
	letter-spacing: -0.022em;
}
.site-footer-logo:hover { text-decoration: none !important; }
.site-footer-logo img { width: 2rem; height: 2rem; border-radius: 0.5rem; }

.site-footer-description {
	margin-top: 1rem;
	max-width: 22rem;
	font-size: 0.875rem;
	line-height: 1.6;
	color: var(--footer-ink-48);
}

.site-footer-social { display: flex; gap: 1.25rem; margin-top: 1.25rem; }
.site-footer-social a { display: inline-flex; color: var(--footer-ink-48); transition: color 160ms ease; }
.site-footer-social a:hover { color: var(--footer-ink); }
.site-footer-social svg { width: 1.125rem; height: 1.125rem; }

.site-footer-columns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem 1rem; }
.site-footer-columns h2 {
	margin-bottom: 0.5rem;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--footer-ink);
}
.site-footer-columns ul { list-style: none; margin: 0; padding: 0; }
/* The relaxed leading is what keeps dense link columns scannable (dense-link, 2.41 in the reference). */
.site-footer-columns li { font-size: 0.875rem; line-height: 2.2; }

.site-footer-legal {
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
	margin-top: 3rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--footer-hairline);
	font-size: 0.75rem;
	line-height: 1.5;
	color: var(--footer-ink-48);
}
.site-footer-legal-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.5rem; }
.site-footer-status { display: inline-flex; align-items: center; gap: 0.5rem; }
.site-footer-status > span { width: 0.4375rem; height: 0.4375rem; border-radius: 50%; background: #34c759; }

@media (min-width: 900px) {
	.site-footer-inner { padding-top: 4rem; }
	.site-footer-top { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 4rem; }
	.site-footer-legal { flex-direction: row; justify-content: space-between; align-items: center; }
}