/*
 * LiveSpecial — General content pages (LSRD26-39, docs/design/general.html).
 */

/* General content (general.html): "grid lg:grid-cols-3 gap-10 lg:gap-14",
 * py-10 sm:py-14, article lg:col-span-2, sticky rail. */
.ls-page { padding-block: 2.5rem 4rem; }
@media ( min-width: 640px ) { .ls-page { padding-top: 3.5rem; } }
.ls-page--sidebar { display: grid; gap: 2.5rem; }
@media ( min-width: 1024px ) {
	.ls-page--sidebar { grid-template-columns: minmax( 0, 2fr ) minmax( 0, 1fr ); gap: 3.5rem; align-items: start; }
	.ls-page__aside { position: sticky; top: calc( var( --ls-sticky-top ) + 0.625rem ); }
}
.ls-page__body { min-width: 0; }
.ls-page__aside > * + * { margin-top: 1.25rem; }
.ls-page__aside > .ls-promo { margin-bottom: 0; }

/* The design's page typography: near-black body (LSRD26-80), 24px extrabold
 * navy H2s spaced like "space-y-10", magenta-dot lists, rounded images, the
 * navy quote card. */
.ls-prose--page { color: var( --ls-text ); }
.ls-prose--page h2 { margin: 2.5rem 0 1rem; color: var( --ls-heading ); font-size: 1.5rem; font-weight: var( --ls-fw-black ); line-height: 2rem; scroll-margin-top: calc( var( --ls-sticky-top ) + 1.5rem ); }
.ls-prose--page h3 { margin: 1.75rem 0 0.25rem; color: var( --ls-heading ); font-size: var( --ls-fs-md ); font-weight: var( --ls-fw-bold ); }
.ls-prose--page ul { padding: 0; list-style: none; }
/* The opening paragraph is the lead (general.html: "text-lg sm:text-xl
 * font-semibold border-l-4 border-secondary pl-5"). */
.ls-prose--page > p:first-child { margin-bottom: 2.5rem; padding-left: 1.25rem; border-left: 4px solid var( --ls-secondary ); color: var( --ls-foreground ); font-size: var( --ls-fs-lg ); font-weight: var( --ls-fw-semibold ); line-height: 1.625; }
@media ( min-width: 640px ) { .ls-prose--page > p:first-child { font-size: 1.25rem; } }
.ls-prose--page ul > li { position: relative; padding-left: 1.25rem; font-size: var( --ls-fs-sm ); line-height: 1.625; }
.ls-prose--page ul > li::before { content: ""; position: absolute; top: 0.5rem; left: 0; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var( --ls-secondary ); }
.ls-prose--page ul > li + li { margin-top: 0.75rem; }
.ls-prose--page img { border-radius: var( --ls-radius-card ); }
.ls-prose--page blockquote { position: relative; overflow: hidden; margin: 2.5rem 0; padding: 2rem; border: 0; border-radius: var( --ls-radius-card ); background: var( --ls-primary ); color: var( --ls-white ); font-size: 1.25rem; line-height: 1.625; }
@media ( min-width: 640px ) { .ls-prose--page blockquote { font-size: 1.5rem; } }
.ls-prose--page blockquote cite { color: var( --ls-white ); font-size: 0.75rem; }
.ls-prose--page a { color: var( --ls-primary ); }
.ls-fallback-list { margin: 0; }

/* "On This Page": "text-xs font-extrabold uppercase tracking-wider", links
 * "text-sm text-muted-foreground py-1.5 border-l-2 pl-3". */
.ls-toc__title { margin: 0 0 1rem; color: var( --ls-heading ); font-size: 0.75rem; font-weight: var( --ls-fw-black ); letter-spacing: 0.05em; line-height: 1rem; text-transform: uppercase; }
.ls-toc ul { display: grid; gap: 0.25rem; margin: 0; padding: 0; list-style: none; }
.ls-toc a { display: block; padding: 0.375rem 0 0.375rem 0.75rem; border-left: 2px solid transparent; color: var( --ls-muted-foreground ); font-size: var( --ls-fs-sm ); line-height: 1.25rem; text-decoration: none; transition: color var( --ls-transition ), border-color var( --ls-transition ); }
.ls-toc a:hover { border-left-color: var( --ls-primary ); color: var( --ls-primary ); }

/* "Have a question?" */
.ls-help-card { color: var( --ls-white ); }
.ls-help-card p { margin-bottom: 1rem; }
.ls-help-card__list { display: grid; gap: 0.5rem; margin: 0 0 1rem; padding: 0; list-style: none; }
.ls-help-card__list a { display: inline-flex; align-items: center; gap: 0.5rem; color: var( --ls-white ); font-size: 0.75rem; text-decoration: none; }
.ls-help-card__list a:hover { color: var( --ls-white ); text-decoration: underline; }
.ls-help-card .ls-btn { font-size: 0.75rem; font-weight: var( --ls-fw-bold ); }

/* "In this section" (general.png): rail card with a muted header. */
.ls-section-nav {
	overflow: hidden;
	border: 1px solid rgba( 25, 54, 103, 0.04 );
	border-radius: var( --ls-radius-card );
	background: var( --ls-white );
	box-shadow: 0 1px 3px 0 rgba( 0, 0, 0, 0.1 ), 0 1px 2px -1px rgba( 0, 0, 0, 0.1 );
}
.ls-section-nav__title {
	margin: 0;
	padding: 1rem 1.25rem;
	border-bottom: 1px solid rgba( 25, 54, 103, 0.04 );
	background: var( --ls-muted-soft );
	color: var( --ls-heading );
	font-size: 0.75rem;
	font-weight: var( --ls-fw-black );
	letter-spacing: 0.05em;
	text-transform: uppercase;
}
.ls-section-nav ul { margin: 0; padding: 0; list-style: none; }
.ls-section-nav li { border-bottom: 1px solid rgba( 25, 54, 103, 0.04 ); }
.ls-section-nav li:last-child { border-bottom: 0; }
.ls-section-nav ul ul { border-top: 1px solid rgba( 25, 54, 103, 0.04 ); }
.ls-section-nav ul ul a { padding-left: 2rem; font-size: var( --ls-fs-sm ); }
.ls-section-nav a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.75rem 1.25rem;
	color: var( --ls-primary );
	font-size: var( --ls-fs-sm );
	text-decoration: none;
}
.ls-section-nav a::after { content: "›"; color: var( --ls-muted-foreground ); }
.ls-section-nav a:hover { background: var( --ls-muted ); color: var( --ls-primary ); }
.ls-section-nav a[aria-current] { border-left: 3px solid var( --ls-secondary ); background: var( --ls-muted ); color: var( --ls-primary ); font-weight: var( --ls-fw-bold ); }

/*
 * Contact page (LSRD26-50, docs/design/contact.html): details and panels on
 * the left, the form card spanning two columns on the right.
 */
.ls-contact { display: grid; gap: 2.5rem; padding-block: 3rem 4rem; }
@media ( min-width: 1024px ) {
	.ls-contact { grid-template-columns: minmax( 0, 1fr ) minmax( 0, 2fr ); align-items: start; }
}
.ls-contact__aside { display: flex; flex-direction: column; gap: 1.25rem; }
.ls-contact-card {
	padding: 1.5rem;
	border: 1px solid var( --ls-border );
	border-radius: var( --ls-radius-card );
	background: var( --ls-white );
	box-shadow: var( --ls-shadow-sm );
}
.ls-contact-card--highlight { border-color: rgba( 25, 54, 103, 0.15 ); background: var( --ls-muted-soft ); box-shadow: none; }
.ls-contact-card__title { margin: 0 0 1.25rem; color: var( --ls-primary ); font-size: var( --ls-fs-base ); font-weight: var( --ls-fw-black ); }
.ls-contact-card__title--sm { margin-bottom: 0.5rem; font-size: var( --ls-fs-sm ); }
.ls-contact-card__title--lg { margin-bottom: 1.5rem; font-size: var( --ls-fs-lg ); }
.ls-contact-card__text { margin: 0; color: var( --ls-text ); font-size: var( --ls-fs-sm ); line-height: 1.6; }
.ls-contact-card__cta { display: flex; justify-content: center; gap: 0.375rem; margin-top: 1rem; }
.ls-contact__form { padding: 1.75rem; }
.ls-contact__note { margin-top: 1.5rem; }

.ls-contact-details { display: flex; flex-direction: column; gap: 1rem; margin: 0; padding: 0; list-style: none; }
.ls-contact-details__item { display: flex; align-items: flex-start; gap: 0.75rem; }
.ls-contact-details__icon {
	display: grid;
	flex: 0 0 2.25rem;
	height: 2.25rem;
	place-items: center;
	border-radius: 0.5rem;
	background: var( --ls-primary-tint );
	color: var( --ls-primary );
}
.ls-contact-details__label { display: block; color: var( --ls-muted-foreground ); font-size: var( --ls-fs-xs ); font-weight: var( --ls-fw-medium ); }
.ls-contact-details__value { display: block; margin: 0; color: var( --ls-primary ); font-size: var( --ls-fs-sm ); font-weight: var( --ls-fw-bold ); overflow-wrap: anywhere; }
.ls-contact-details a { color: inherit; text-decoration: none; }
.ls-contact-details a:hover, .ls-contact-details a:focus-visible { text-decoration: underline; }

/* The Contact Gravity Form: shared styling in forms.css; full-width button. */
.ls-contact__form .gform_wrapper .gform_footer .gform_button { flex-grow: 1; justify-content: center; }

/*
 * Page Sections (LSRD26-49, docs/design/about.html) — the About page and any
 * page built from sections. The steps band follows home.html's "Getting
 * started is simple".
 */
.ls-sec { position: relative; padding-block: 4rem; background: var( --ls-white ); }
@media ( min-width: 640px ) { .ls-sec { padding-block: 5rem; } }
.ls-sec--tint { background: var( --ls-muted ); }
.ls-sec__head { margin-bottom: 1.5rem; }
.ls-sec__head--center { max-width: 36rem; margin: 0 auto 3rem; text-align: center; }
.ls-sec__eyebrow {
	margin: 0 0 0.75rem;
	color: var( --ls-secondary );
	font-size: var( --ls-fs-xs );
	font-weight: var( --ls-fw-bold );
	letter-spacing: 0.1em;
	text-transform: uppercase;
}
.ls-sec__title { margin: 0; color: var( --ls-heading ); font-size: clamp( 1.875rem, 4vw, 2.25rem ); font-weight: var( --ls-fw-bold ); line-height: 1.2; text-wrap: balance; }
.ls-sec__content { color: var( --ls-text ); font-size: var( --ls-fs-base ); line-height: 1.7; }
.ls-sec__content p { margin: 0 0 1rem; }
.ls-sec__content p:last-child { margin-bottom: 0; }
.ls-sec__narrow { max-width: 48rem; }

.ls-sec__split { display: grid; gap: 3rem; align-items: center; }
@media ( min-width: 1024px ) { .ls-sec__split:not( .ls-sec__split--single ) { grid-template-columns: 1fr 1fr; gap: 4rem; } }

.ls-stat-grid { display: grid; grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); gap: 1.25rem; margin: 0; }
.ls-stat-grid__item {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: 1.5rem;
	border: 1px solid var( --ls-border );
	border-radius: var( --ls-radius-card );
	background: var( --ls-background );
	box-shadow: var( --ls-shadow-sm );
	text-align: center;
}
.ls-stat-grid__value { margin: 0; color: var( --ls-primary ); font-size: clamp( 1.75rem, 3.5vw, 2.25rem ); font-weight: var( --ls-fw-bold ); line-height: 1; }
.ls-stat-grid__label { color: var( --ls-muted-foreground ); font-size: var( --ls-fs-sm ); font-weight: var( --ls-fw-bold ); }

/* Steps */

/* Card grid */
.ls-value-grid { display: grid; gap: 1.5rem; margin: 0; padding: 0; list-style: none; }
@media ( min-width: 640px ) { .ls-value-grid { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); } }
@media ( min-width: 1024px ) {
	.ls-value-grid--3 { grid-template-columns: repeat( 3, minmax( 0, 1fr ) ); }
	.ls-value-grid--4 { grid-template-columns: repeat( 4, minmax( 0, 1fr ) ); }
}
.ls-value-card {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	padding: 1.5rem;
	border: 1px solid var( --ls-border );
	border-radius: var( --ls-radius-card );
	background: var( --ls-background );
	box-shadow: var( --ls-shadow-sm );
}
.ls-value-card__icon { display: grid; width: 2.5rem; height: 2.5rem; place-items: center; border-radius: 0.75rem; background: var( --ls-primary-tint ); color: var( --ls-primary ); }
.ls-value-card__icon--image { overflow: hidden; background: none; }
.ls-value-card__icon--image img { width: 100%; height: 100%; object-fit: cover; }
.ls-value-card__title { margin: 0; color: var( --ls-heading ); font-size: var( --ls-fs-base ); font-weight: var( --ls-fw-bold ); }
.ls-value-card__text { margin: 0; color: var( --ls-text ); font-size: var( --ls-fs-sm ); line-height: 1.6; }

/* Feature band: solid magenta, or the navy→magenta hero gradient (white
 * text passes AA on both, LSRD26-72). */
.ls-sec--band { overflow: hidden; color: var( --ls-foreground ); }
.ls-sec--band-magenta { background: var( --ls-secondary ); }
.ls-sec--band-navy { background: var( --ls-gradient-hero ); }
.ls-sec--band .ls-container { position: relative; }
.ls-sec--band.ls-on-dark .ls-sec__eyebrow { color: var( --ls-white ); }
.ls-sec--band .ls-sec__head { margin-bottom: 1.25rem; }
.ls-sec--band .ls-sec__content { margin-bottom: 2rem; }
.ls-sec--band-magenta .ls-btn--white { --ls-btn-on: var( --ls-secondary ); }

/* Closing call to action */
.ls-sec--cta { color: var( --ls-foreground ); }
.ls-sec__cta { max-width: 40rem; text-align: center; }
.ls-sec--cta .ls-sec__title { margin-bottom: 1rem; }
.ls-sec__lede { margin: 0 auto 2rem; color: var( --ls-text ); line-height: 1.6; }
.ls-sec__buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; }



/* ── Sprint 5 section types (LSRD26-57, design /join) ── */
.ls-sec__intro { max-width: 32rem; margin: 0.75rem auto 0; color: var( --ls-text ); line-height: 1.625; }
.ls-sec--process .ls-sec__title,
.ls-sec--quotes .ls-sec__title,
.ls-sec--preview .ls-sec__title,
.ls-sec--form .ls-sec__title { font-size: 1.5rem; }
@media ( min-width: 640px ) {
	.ls-sec--process .ls-sec__title,
	.ls-sec--quotes .ls-sec__title,
	.ls-sec--preview .ls-sec__title,
	.ls-sec--form .ls-sec__title { font-size: 1.875rem; }
}

/* Stats strip: "bg-white border-b border-border/40 shadow-sm py-5", divided. */
.ls-stats-strip { border-bottom: 1px solid rgba( 25, 54, 103, 0.04 ); background: var( --ls-white ); box-shadow: 0 1px 2px 0 rgba( 0, 0, 0, 0.05 ); }
.ls-stats-strip__list { display: grid; grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); gap: 1.5rem 0; margin-block: 0; padding-block: 1.25rem; }
@media ( min-width: 640px ) {
	.ls-stats-strip__list--3 { grid-template-columns: repeat( 3, minmax( 0, 1fr ) ); }
	.ls-stats-strip__list--4 { grid-template-columns: repeat( 4, minmax( 0, 1fr ) ); }
	.ls-stats-strip__item + .ls-stats-strip__item { border-left: 1px solid rgba( 25, 54, 103, 0.04 ); }
}
.ls-stats-strip__item { display: flex; flex-direction: column; align-items: center; padding-inline: 1rem; text-align: center; }
.ls-stats-strip__value { margin: 0; color: var( --ls-primary ); font-size: 1.5rem; font-weight: var( --ls-fw-bold ); line-height: 2rem; }
.ls-stats-strip__label { margin-top: 0.125rem; color: var( --ls-muted-foreground ); font-size: 0.75rem; font-weight: var( --ls-fw-medium ); line-height: 1rem; }

/* Numbered steps: "bg-white rounded-2xl p-7 border shadow-sm text-center",
 * 48px navy number, a line behind the row. */
.ls-process { position: relative; display: grid; gap: 1.5rem; margin: 0; padding: 0; list-style: none; }
@media ( min-width: 640px ) {
	.ls-process--2 { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); }
	.ls-process--3 { grid-template-columns: repeat( 3, minmax( 0, 1fr ) ); }
	.ls-process--4 { grid-template-columns: repeat( 4, minmax( 0, 1fr ) ); }
	.ls-process::before { content: ""; position: absolute; top: 2.5rem; left: 33.333%; right: 33.333%; height: 2px; background: var( --ls-border ); }
}
.ls-process__item { position: relative; padding: 1.75rem; border: 1px solid rgba( 25, 54, 103, 0.04 ); border-radius: var( --ls-radius-card ); background: var( --ls-white ); box-shadow: 0 1px 3px 0 rgba( 0, 0, 0, 0.1 ), 0 1px 2px -1px rgba( 0, 0, 0, 0.1 ); text-align: center; }
.ls-process__number { display: grid; width: 3rem; height: 3rem; margin: 0 auto 1rem; place-items: center; border-radius: 50%; background: var( --ls-primary ); color: var( --ls-white ); font-size: 1.25rem; font-weight: var( --ls-fw-bold ); }
.ls-process__title { margin: 0 0 0.5rem; color: var( --ls-heading ); font-size: var( --ls-fs-md ); font-weight: var( --ls-fw-bold ); }
.ls-process__text { margin: 0; color: var( --ls-text ); font-size: var( --ls-fs-sm ); line-height: 1.625; }

/* Provider testimonials: no stars, muted 14px quote. */
.ls-sec--quotes .ls-grid { gap: 1.5rem; }
.ls-sec--quotes .ls-testimonial__quote { color: var( --ls-text ); font-size: var( --ls-fs-sm ); font-style: normal; }

/* Directory preview: "rounded-2xl … h-36 image, p-4, tag, 14px name". */
.ls-preview-grid { gap: 1rem; }
.ls-card--preview { border-radius: var( --ls-radius-card ); }
.ls-card--preview .ls-card__media { height: 9rem; }
.ls-card--preview .ls-card__body { padding: 1rem; }
.ls-card--preview .ls-card__title { margin: 0.5rem 0 0.25rem; }
.ls-card__where { margin: 0 0 0.5rem; color: var( --ls-muted-foreground ); font-size: 0.75rem; }
.ls-card--preview .ls-card__excerpt { margin: 0; }
.ls-tag--strong { align-self: flex-start; font-weight: var( --ls-fw-bold ); }

/* Signup form card. */
.ls-sec__form { max-width: 48rem; }
.ls-sec__form-card { padding: 1.5rem; border: 1px solid rgba( 25, 54, 103, 0.04 ); border-radius: var( --ls-radius-card ); background: var( --ls-white ); box-shadow: 0 1px 3px 0 rgba( 0, 0, 0, 0.1 ), 0 1px 2px -1px rgba( 0, 0, 0, 0.1 ); }
@media ( min-width: 640px ) { .ls-sec__form-card { padding: 2rem; } }
.ls-sec__form-card .gform_wrapper .gform_footer .gform_button { width: 100%; justify-content: center; }
.ls-sec--form { scroll-margin-top: var( --ls-sticky-top ); }

/* Gradient call to action ("py-16", navy to magenta, icon above). */
.ls-sec--cta-gradient { overflow: hidden; padding-block: 4rem; }
.ls-sec--cta-gradient .ls-sec__cta { position: relative; max-width: 43.75rem; }
.ls-sec--cta-gradient .ls-sec__title { font-size: 1.5rem; }
@media ( min-width: 640px ) { .ls-sec--cta-gradient .ls-sec__title { font-size: 1.875rem; } }
.ls-sec--cta-gradient .ls-sec__lede { max-width: 28rem; }
.ls-sec__cta-icon { display: flex; justify-content: center; margin-bottom: 1.25rem; color: var( --ls-heading ); }

/* Hero button (join: "bg-white text-primary font-bold px-7 py-3.5 shadow-lg"). */
.ls-page-hero__cta { margin: 0; }
.ls-btn--hero { --ls-btn-py: 0.875rem; --ls-btn-px: 1.75rem; font-size: var( --ls-fs-md ); font-weight: var( --ls-fw-bold ); line-height: 1.5rem; box-shadow: 0 10px 15px -3px rgba( 0, 0, 0, 0.1 ), 0 4px 6px -4px rgba( 0, 0, 0, 0.1 ); }
.ls-page-hero__eyebrow--pill { display: inline-flex; align-items: center; gap: 0.5rem; }