/* ============================================================
	LAYOUT.CSS
	Navigation, footer, section scaffolding, and structural
	grid containers. Depends on tokens in base.css.
	============================================================ */


/* ── PRIMARY NAVIGATION ── */

.nav-primary {
	position:        fixed;
	top:             0; left: 0; right: 0;
	z-index:         100;
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	padding:         18px 40px;
	background:    rgba(245, 242, 235, 0.9);
	backdrop-filter: blur(16px);
	border-bottom:   1px solid var(--color-border);
	transition:      padding var(--transition-slow);
}

.nav-primary.is-scrolled {
	padding: 12px 40px;
}

/* Logo lockup */
.nav-logo {
	display:         flex;
	align-items:     baseline;
	gap:             7px;
	text-decoration: none;
}

.nav-logo-mark {
	display:     flex;
	align-items: center;
	gap:         8px;
}

.nav-logo-name {
	font-family:    var(--font-mono);
	font-weight:    500;
	font-size:      26px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color:          var(--color-ink);
	transition:     font-size var(--transition-slow);
}

.nav-primary.is-scrolled .nav-logo-name {
	font-size: 14px;
}

.nav-logo-product {
	font-family:    var(--font-mono);
	font-size:      13px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color:          var(--color-muted-text);
	position:       relative;
	top:            1px;
	transition:     font-size var(--transition-slow);
}

.nav-primary.is-scrolled .nav-logo-product {
	font-size: 10px;
}

/* Status dot */
.nav-status-dot {
	width:         8px;
	height:        8px;
	border-radius: 50%;
	background:    var(--color-signal);
	position:      relative;
	top:           -1px;
	flex-shrink:   0;
	transition:    width var(--transition-slow), height var(--transition-slow);
}

.nav-primary.is-scrolled .nav-status-dot {
	width:  6px;
	height: 6px;
}

/* Right side */
.nav-actions {
	display:     flex;
	align-items: center;
	gap:         18px;
}


/* ── PAGE HERO ── */

.page-hero {
	padding:    180px 32px 100px;
	text-align: center;
	max-width:  var(--max-content-width);
	margin:     0 auto;
}

.page-hero-eyebrow {
	font-family:    var(--font-mono);
	font-size:      10px;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color:          var(--color-signal-solid);
	opacity:        0.65;
	margin-bottom:  28px;
	display:        inline-flex;
	align-items:    center;
	gap:            12px;
}

.page-hero-eyebrow::before,
.page-hero-eyebrow::after {
	content:    '';
	display:    block;
	width:      24px;
	height:     1px;
	background: var(--color-signal-solid);
	opacity:    0.65;
}

.page-hero-headline {
	margin-bottom: 28px;
}

.page-hero-headline em {
	font-style: italic;
	color:      var(--color-muted-text);
}

.page-hero-headline .headline-highlight {
	position:      relative;
	display:       inline-block;
	font-style:    normal;
	color:         var(--color-ink);
	background:    var(--color-signal-subtle);
	padding:       2px 10px 6px;
	border-radius: 3px;
	border-bottom: 2px solid var(--color-signal);
}

.page-hero-subheading {
	font-size:   18px;
	color:     #3e3d3a;
	max-width:   580px;
	margin:      0 auto 44px;
	line-height: 1.75;
}

.page-hero-cta-group {
	display:         flex;
	align-items:     center;
	justify-content: center;
	gap:             20px;
	flex-wrap:       wrap;
	margin-bottom:   64px;
}


/* ── SECTION SCAFFOLDING ── */

.section-cta {
	margin-bottom: 32px;
}

/* Thin divider line between sections */
.section-divider {
	max-width:  var(--max-content-width);
	margin:     0 auto;
	height:     1px;
	background: var(--color-border);
}

/* Standard section header block (eyebrow + heading + subtext) */
.section-header {
	text-align: center;
	padding:    100px 32px 64px;
	max-width:  var(--max-content-width);
	margin:     0 auto;
}

.section-eyebrow {
	font-family:    var(--font-mono);
	font-size:      10px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color:          var(--color-signal-solid);
	opacity:        0.65;
	margin-bottom:  16px;
}

.section-header h2 {
	margin-top: 18px;
}

.section-header h2 em {
	font-style: italic;
	color:      var(--color-muted-text);
}

.section-header p {
	font-size:   17px;
	color:     #4a4a47;
	line-height: 1.75;
	max-width:   580px;
	margin:      0 auto;
}

/* Dark background section wrapper (features section) */
.section-dark-wrap {
	background:     var(--color-ink);
	color:          var(--color-paper);
	padding-bottom: var(--space-3xl);
}

.section-dark-wrap .section-eyebrow {
	color: rgba(1, 85, 1, 0.7);
	opacity: 1;
}

.section-dark-wrap .section-header h2 {
	color: var(--color-paper);
}

.section-dark-wrap .section-header h2 em {
	color: rgba(74, 158, 74, 0.85);
}

.section-dark-wrap .section-header p {
	color: rgba(245, 242, 235, 0.52);
}

/* Signal green banner section */
.section-signal-banner {
	background:    var(--color-signal);
	padding:       48px 32px 40px;
	text-align:    center;
	border-bottom: 1px solid rgba(1, 85, 1, 0.3);
	margin-bottom: 32px;
	margin-top:    32px;
}

.section-signal-banner h2 {
	font-family:   var(--font-serif);
	font-size:     clamp(24px, 3.5vw, 40px);
	color:       white;
	line-height:   1.1;
	margin-bottom: 10px;
}

.section-signal-banner p {
	font-size: 15px;
	color:   rgba(255, 255, 255, 0.7);
}


/* ── CONTENT GRIDS ── */

/* Three-column feature grid (dark section) */
.feature-card-grid {
	max-width:             var(--max-content-width);
	margin:                0 auto;
	padding:               0 32px;
	display:               grid;
	grid-template-columns: repeat(3, 1fr);
	gap:                   1px;
	background:          rgba(255, 255, 255, 0.07);
	border:                1px solid rgba(255, 255, 255, 0.07);
	border-radius:         6px;
	overflow:              hidden;
}

/* Three-column audience card grid */
.audience-card-grid {
	max-width:             var(--max-content-width);
	margin:                0 auto;
	padding:               0 32px;
	display:               grid;
	grid-template-columns: repeat(3, 1fr);
	gap:                   18px;
}

/* Two-column CTA section */
.cta-split-layout {
	max-width:             880px;
	margin:                0 auto;
	display:               grid;
	grid-template-columns: 1fr 1fr;
	gap:                   72px;
	align-items:           start;
}

/* Pain points list */
.pain-point-list {
	max-width: var(--max-content-width);
	margin:    0 auto;
	padding:   0 32px;
}


/* ── FOOTER ── */

.site-footer {
	background:      var(--color-ink);
	color:           var(--color-paper);
	padding:         36px 40px;
	display:         flex;
	align-items:     center;
	justify-content: space-between;
}

.footer-logo {
	display:         flex;
	align-items:     baseline;
	gap:             5px;
	text-decoration: none;
}

.footer-logo-name {
	font-family:    var(--font-mono);
	font-size:      13px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color:          var(--color-paper);
}

.footer-logo-product {
	font-family:    var(--font-mono);
	font-size:      10px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color:        rgba(245, 242, 235, 0.38);
}

.footer-tagline {
	font-family: var(--font-serif);
	font-style:  italic;
	font-size:   14px;
	color:     rgba(245, 242, 235, 0.28);
}

.footer-status-dot {
	width:         8px;
	height:        8px;
	border-radius: 50%;
	background:  rgba(74, 158, 74, 0.7);
}


/* ── RESPONSIVE ── */

@media (max-width: 820px) {

	.nav-primary {
		padding: 14px 20px;
	}

	.nav-primary.is-scrolled {
		padding: 10px 20px;
	}

	.nav-logo-name {
		font-size: 20px;
	}

	.nav-primary.is-scrolled .nav-logo-name {
		font-size: 13px;
	}

	/* Hide CTA button on mobile, keep badge */
	.nav-actions .btn-primary {
		display: none;
	}

	.page-hero {
		padding: 150px 20px 80px;
	}

	.section-header {
		padding: 80px 20px 48px;
	}

	.feature-card-grid,
	.audience-card-grid {
		grid-template-columns: 1fr;
		padding:               0 20px;
	}

	.cta-split-layout {
		grid-template-columns: 1fr;
		gap:                   40px;
	}

	.pain-point-list {
		padding: 0 20px;
	}

	.site-footer {
		flex-direction: column;
		gap:            14px;
		text-align:     center;
	}

}