:root {
	--bf-deep: #324b3b;
	--bf-mid: #4f7052;
	--bf-sage: #788b60;
	--bc-ink: #23312a;
	--bc-muted: #617068;
	--bc-soft: #f3f7f4;
	--bc-border: #dce6df;
	--bc-accent: #2f7f75;
	--bc-accent-2: #4c9b8f;
	--bc-navy: #233f4d;
}

body {
	background-color: var(--bf-deep);
	background-image: url("images/overlay.png"), linear-gradient(135deg, #243d35 0%, #315b54 48%, #58735b 100%);
}

body, input, select, textarea { font-family: "Source Sans Pro", Helvetica, Arial, sans-serif; }

#wrapper { max-width: 72em; }

#header.bridgingcases-hero { padding-top: 5.25em; padding-bottom: 4.25em; }

.brand-lockup {
	width: min(560px, 86vw);
	margin: 0 auto 1.6em auto;
	padding: 1.1em 1.5em 1em;
	background: rgba(255,255,255,0.97);
	border-radius: 1.1em;
	box-shadow: 0 24px 60px rgba(0,0,0,0.18);
}

.brand-logo { display: block; width: 100%; max-width: 520px; height: auto; margin: 0 auto; }
.product-name { margin-top: .25em; color: var(--bc-ink); font-size: 1.55em; font-weight: 600; letter-spacing: .12em; line-height: 1.15; }
.product-name strong { color: var(--bc-accent); font-weight: 700; }

#header .eyebrow { margin: 0 0 .5em; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; font-size: .82em; color: rgba(255,255,255,.8); }
#header h1 { font-size: 3.25em; font-weight: 600; letter-spacing: -.035em; margin-bottom: .35em; color: #fff; }
#header .hero-copy { max-width: 760px; margin: 0 auto 1.8em; font-size: 1.1em; color: rgba(255,255,255,.84); }
.hero-actions { margin-bottom: 1.2em !important; }
#header .button.primary { background: #fff; color: var(--bc-ink) !important; box-shadow: none; }
#header .button.primary:hover { background: #f3f7f4; }
#header .button:not(.primary) { box-shadow: inset 0 0 0 1px rgba(255,255,255,.48); }
.launch-note { font-size: .78em; margin: .5em 0 0 !important; color: rgba(255,255,255,.67) !important; }
.status-dot { width: .65em; height: .65em; border-radius: 50%; background: #a7e3c4; display: inline-block; margin-right: .4em; box-shadow: 0 0 0 .25em rgba(167,227,196,.12); }

#nav { color: var(--bc-ink); }
#nav ul li a.active { background-color: #eef5f1; }
#nav ul li a:after { background-color: var(--bc-accent); }

#main { color: var(--bc-muted); }
#main h1, #main h2, #main h3, #main h4, #main strong { color: var(--bc-ink); }
#main .major h2:after { background-color: var(--bc-accent); background-image: none; }
.section-kicker { margin: 0 0 .4em; color: var(--bc-accent); font-size: .8em; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }

.product-spotlight { align-items: center; }
.product-spotlight .content { width: 48%; }
.product-spotlight .dashboard-shell { width: 48%; }

.dashboard-shell {
	background: #f6f8f7;
	border: 1px solid var(--bc-border);
	border-radius: 1em;
	box-shadow: 0 24px 55px rgba(41,67,54,.14);
	overflow: hidden;
	text-align: left;
	transform: rotate(1deg);
}
.dashboard-topbar { display: flex; justify-content: space-between; padding: 1em 1.15em; background: var(--bc-navy); color: #fff; font-size: .74em; }
.dashboard-brand { font-weight: 600; letter-spacing: .03em; }
.dashboard-user { opacity: .75; }
.dashboard-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .7em; padding: .8em; }
.metric-card { background: #fff; border: 1px solid var(--bc-border); border-radius: .65em; padding: .8em; }
.metric-card span, .metric-card small { display: block; color: var(--bc-muted); font-size: .64em; }
.metric-card strong { display: block; font-size: 1.65em; line-height: 1.05; margin: .15em 0; color: var(--bc-ink); }
.dashboard-panel { background: #fff; margin: 0 .8em .8em; border: 1px solid var(--bc-border); border-radius: .65em; overflow: hidden; }
.panel-heading { display: flex; justify-content: space-between; padding: .8em .9em; border-bottom: 1px solid var(--bc-border); font-size: .72em; }
.panel-heading span { color: var(--bc-muted); }
.schedule-row { display: grid; grid-template-columns: 48px 1fr auto; gap: .6em; align-items: center; padding: .72em .85em; border-bottom: 1px solid #edf1ef; font-size: .66em; }
.schedule-row:last-child { border-bottom: 0; }
.schedule-row span:not(.time) { min-width: 0; }
.schedule-row strong, .schedule-row small { display: block; }
.schedule-row small { color: #798780; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.time { color: var(--bc-accent); font-weight: 700; }
.pill { color: #2b725f !important; background: #e7f5ef; border-radius: 999px; padding: .25em .55em; font-size: .85em; }
.pill.review { color: #7a6430 !important; background: #fbf3d9; }

.check-list { margin: 0; list-style: none; }
.check-list li { position: relative; padding-left: 1.8em; margin: .55em 0; }
.check-list li:before { content: "\f00c"; font-family: "Font Awesome 5 Free"; font-weight: 900; position: absolute; left: 0; color: var(--bc-accent); }

.bridgingcases-features { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 2.2em 1.6em; }
.bridgingcases-features li { width: auto !important; padding: 0 .5em; }
.bridgingcases-features .icon.major { margin-bottom: .7em; }
.bridgingcases-features .style1 { color: #3b786a; border-color: #3b786a; }
.bridgingcases-features .style2 { color: #5f7e5c; border-color: #5f7e5c; }
.bridgingcases-features .style3 { color: #3d6978; border-color: #3d6978; }
.bridgingcases-features .style4 { color: #7c7550; border-color: #7c7550; }
.bridgingcases-features .style5 { color: #4e6579; border-color: #4e6579; }

.workflow-section { background: #f6f9f7 !important; }
.workflow-line { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.1em; }
.workflow-step { position: relative; background: #fff; border: 1px solid var(--bc-border); border-radius: .8em; padding: 1.5em 1em 1.1em; }
.workflow-step span { display: grid; place-items: center; width: 2.2em; height: 2.2em; border-radius: 50%; background: var(--bc-accent); color: #fff; margin: 0 auto .7em; font-weight: 700; }
.workflow-step h3 { margin-bottom: .35em; }
.workflow-step p { margin: 0; font-size: .9em; }

.white-label-section { background: #fff !important; }
.tenant-preview { width: 46%; }
.tenant-browser { overflow: hidden; border-radius: .85em; border: 1px solid var(--bc-border); box-shadow: 0 24px 55px rgba(41,67,54,.14); background: #f8faf9; }
.browser-bar { display: flex; align-items: center; gap: .32em; padding: .7em .8em; background: #e8eeeb; color: #748078; font-size: .55em; }
.browser-bar i { width: .65em; height: .65em; border-radius: 50%; background: #a9b6af; }
.browser-bar span { margin-left: .5em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tenant-brand { display: flex; align-items: center; gap: .85em; padding: 1.2em; background: #fff; }
.tenant-mark { width: 3.1em; height: 3.1em; display: grid; place-items: center; border-radius: .6em; background: var(--bc-navy); color: #fff; font-weight: 700; }
.tenant-brand strong, .tenant-brand small { display: block; }
.tenant-brand small { color: var(--bc-muted); font-size: .65em; }
.tenant-menu { display: grid; grid-template-columns: repeat(5,1fr); background: var(--bc-navy); color: rgba(255,255,255,.85); font-size: .58em; text-align: center; }
.tenant-menu span { padding: .9em .3em; border-right: 1px solid rgba(255,255,255,.08); }
.tenant-message { margin: 1em; background: #fff; border: 1px solid var(--bc-border); border-radius: .65em; padding: 1.25em; }
.tenant-message p { margin: .25em 0 0; color: var(--bc-muted); }

.security-section { background: #f6f9f7 !important; }
.security-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1em; }
.security-grid > div { background: #fff; border: 1px solid var(--bc-border); border-radius: .75em; padding: 1.5em 1.1em; }
.security-grid .icon { font-size: 1.75em; color: var(--bc-accent); margin-bottom: .55em; }
.security-grid p { margin-bottom: 0; font-size: .9em; }

.early-access { background: #fff !important; }
.launch-card { max-width: 760px; margin: 0 auto; padding: 1.7em; border-radius: .9em; border: 1px solid var(--bc-border); background: linear-gradient(135deg, #f3f8f5, #f7fbfa); }
.launch-card h3 { font-size: 1.35em; margin-bottom: .35em; }
.launch-card p { margin-bottom: 1.3em; }
.button.primary { background-color: var(--bc-accent) !important; box-shadow: none !important; color: #fff !important; }
.button.primary:hover { background-color: var(--bc-accent-2) !important; }

#footer.bridgingcases-footer { color: rgba(255,255,255,.72); }
#footer.bridgingcases-footer h2 { color: #fff; }
.footer-lockup { display: flex; align-items: center; gap: 1em; margin-bottom: 1em; }
.footer-lockup img { width: 220px; max-width: 100%; background: #fff; padding: .4em .55em; border-radius: .6em; }
.footer-lockup strong, .footer-lockup span { display: block; }
.footer-lockup strong { color: #fff; letter-spacing: .08em; }
.footer-lockup span { font-size: .72em; }
.footer-links { list-style: none; margin: 0; }
.footer-links li { margin-bottom: .45em; }
.footer-links a { border-bottom-color: rgba(255,255,255,.25); }
#footer .copyright { width: 100%; text-align: center; }

@media screen and (max-width: 980px) {
	#header h1 { font-size: 2.7em; }
	.product-spotlight .content, .product-spotlight .dashboard-shell, .tenant-preview { width: 100%; }
	.dashboard-shell, .tenant-preview { margin-top: 2em; }
	.bridgingcases-features { grid-template-columns: repeat(2, 1fr); }
	.workflow-line { grid-template-columns: repeat(2, 1fr); }
	.security-grid { grid-template-columns: repeat(2, 1fr); }
}

@media screen and (max-width: 736px) {
	#header.bridgingcases-hero { padding-top: 3em; }
	.brand-lockup { width: 92%; padding: .9em 1em; }
	.product-name { font-size: 1.25em; }
	#header h1 { font-size: 2.15em; }
	#header .hero-copy { font-size: 1em; }
	.bridgingcases-features, .workflow-line, .security-grid { grid-template-columns: 1fr; }
	.dashboard-grid { grid-template-columns: 1fr 1fr; }
	.tenant-menu { grid-template-columns: repeat(3, 1fr); }
	.tenant-menu span:nth-child(n+4) { display: none; }
	.footer-lockup { align-items: flex-start; flex-direction: column; }
}

@media screen and (max-width: 480px) {
	.dashboard-grid { grid-template-columns: 1fr; }
	.schedule-row { grid-template-columns: 42px 1fr; }
	.schedule-row .pill { display: none; }
	.product-name { letter-spacing: .08em; }
}
