/* FormMy.LLC — theme-agnostic visual layer.
 * Owns its own typography, palette, and layout. Defensive resets so theme
 * styles don't leak in.
 *
 * Brand palette derived from the FormMy.LLC logo:
 *   Navy   #1B1B4D  primary text + dark hero block
 *   Purple #6E5BFF  secondary accent (CTA hover, links)
 *   Mint   #28D5B0  primary accent (CTA button, stat values)
 *
 * Hero block uses the navy as background with the dark-bg logo variant.
 * Rest of the page uses light backgrounds with navy text.
 */

:root {
	--formmy-navy:        #1B1B4D;
	--formmy-navy-deep:   #14143A;
	--formmy-navy-soft:   rgba(27, 27, 77, 0.08);

	--formmy-purple:      #6E5BFF;
	--formmy-purple-dark: #5847D9;
	--formmy-purple-soft: rgba(110, 91, 255, 0.10);

	--formmy-mint:        #28D5B0;
	--formmy-mint-dark:   #1FB695;
	--formmy-mint-soft:   #DEF8F1;

	--formmy-text:    #1B1B4D;
	--formmy-muted:   #6B7280;
	--formmy-border:  #E5E7EB;
	--formmy-bg:      #FAFAF9;
	--formmy-card:    #FFFFFF;

	--formmy-radius:  8px;
}

body.formmy-body {
	margin: 0;
	padding: 0;
	background: var(--formmy-bg);
	color: var(--formmy-text);
	font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, sans-serif;
	font-size: 16px;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
}

.formmy-body * { box-sizing: border-box; }

.formmy-main {
	max-width: 1080px;
	margin: 0 auto;
	padding: 0 24px;
}

/* --- Header --------------------------------------------------------------- */
/* Full-width white band at the top. Uses the light-bg logo variant.
 * Sits above (not inside) the dark navy hero block. A mint accent stripe
 * at the bottom edge ties the header into the brand palette and creates
 * visual separation from the hero below. */
.formmy-header {
	background: #fff;
	margin: 0 calc(50% - 50vw);
	padding: 22px max(24px, calc(50vw - 540px));
	border-bottom: 1px solid var(--formmy-border);
	position: relative;
}
.formmy-header::after {
	content: "";
	position: absolute;
	bottom: -1px;
	left: 0;
	right: 0;
	height: 3px;
	background: linear-gradient(
		90deg,
		transparent 0%,
		var(--formmy-mint) 25%,
		var(--formmy-purple) 50%,
		var(--formmy-mint) 75%,
		transparent 100%
	);
	opacity: 0.85;
}
.formmy-header-inner {
	max-width: 1080px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
}
.formmy-logo {
	display: inline-block;
	line-height: 0;
}
.formmy-logo img {
	height: 44px;
	width: auto;
	display: block;
}
.formmy-tagline {
	color: var(--formmy-muted);
	font-size: 15px;
	max-width: none;
	text-align: right;
	display: flex;
	align-items: center;
	gap: 10px;
	line-height: 1.4;
	white-space: nowrap;
}
.formmy-tagline::before {
	content: "";
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--formmy-mint);
	box-shadow: 0 0 0 3px rgba(40, 213, 176, 0.18);
	flex-shrink: 0;
}

/* --- Hero + Search widget ------------------------------------------------- */
/* Dark navy hero block that spans the full page width. Header (logo + tagline)
 * sits inside this block so the dark-bg logo variant reads correctly. White
 * search box pops dramatically against the navy. */
.formmy-main {
	padding: 0;
}
.formmy-hero {
	background: linear-gradient(180deg, var(--formmy-navy) 0%, var(--formmy-navy-deep) 100%);
	margin: 0 calc(50% - 50vw) 56px;
	padding: 32px max(24px, calc(50vw - 540px)) 56px;
	color: #fff;
	position: relative;
	overflow: hidden;
}
.formmy-hero::before {
	/* subtle accent glow behind the search box */
	content: "";
	position: absolute;
	inset: auto -10% -20% -10%;
	height: 60%;
	background:
	  radial-gradient(ellipse at center, rgba(110, 91, 255, 0.18) 0%, transparent 60%),
	  radial-gradient(ellipse at 30% 80%, rgba(40, 213, 176, 0.10) 0%, transparent 55%);
	pointer-events: none;
}
.formmy-hero > * {
	max-width: 1080px;
	margin-left: auto;
	margin-right: auto;
	position: relative;
}
.formmy-h1 {
	font-size: 40px;
	font-weight: 700;
	letter-spacing: -0.8px;
	margin: 0 0 12px;
	color: #fff;
	line-height: 1.15;
}
/* Mint underscore character below the H1 — small detail that anchors the
 * heading typographically and ties to the brand mark below the header. */
.formmy-h1::after {
	content: "";
	display: block;
	width: 56px;
	height: 3px;
	background: var(--formmy-mint);
	border-radius: 2px;
	margin-top: 18px;
	margin-bottom: 4px;
}
.formmy-h2 {
	font-size: 22px;
	font-weight: 700;
	letter-spacing: -0.3px;
	margin: 0 0 6px;
	color: var(--formmy-text);
	display: flex;
	align-items: center;
	gap: 12px;
}
.formmy-h2::before {
	content: "";
	display: inline-block;
	width: 4px;
	height: 22px;
	background: var(--formmy-mint);
	border-radius: 2px;
	flex-shrink: 0;
}
.formmy-subhead {
	font-size: 16px;
	margin: 0 0 32px;
}
.formmy-hero .formmy-subhead {
	color: rgba(255, 255, 255, 0.78);
}
.formmy-search {
	display: flex;
	gap: 10px;
	background: var(--formmy-card);
	padding: 12px;
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 12px;
	box-shadow:
	  0 10px 30px rgba(20, 20, 58, 0.32),
	  0 4px 10px rgba(20, 20, 58, 0.18);
}
.formmy-search:focus-within {
	box-shadow:
	  0 14px 40px rgba(110, 91, 255, 0.28),
	  0 4px 10px rgba(20, 20, 58, 0.20);
}
.formmy-search-input {
	flex: 1;
	border: none;
	outline: none;
	padding: 14px 16px;
	font-size: 17px;
	background: transparent;
	color: var(--formmy-text);
}
.formmy-search-state {
	border: 1px solid var(--formmy-border);
	border-radius: 8px;
	padding: 12px 14px;
	font-size: 15px;
	background: #FAFAFA;
	color: var(--formmy-text);
	min-width: 200px;
}
.formmy-search-button {
	background: var(--formmy-mint);
	color: var(--formmy-navy);
	border: none;
	border-radius: 8px;
	padding: 14px 26px;
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
	transition: background 0.15s, transform 0.05s;
	letter-spacing: 0.2px;
}
.formmy-search-button:hover { background: var(--formmy-mint-dark); color: #fff; }
.formmy-search-button:active { transform: translateY(1px); }

/* --- Result --------------------------------------------------------------- */
.formmy-result { margin-top: 16px; min-height: 0; }
.formmy-result-message {
	padding: 12px 16px;
	border-radius: var(--formmy-radius);
	font-size: 14px;
}
.formmy-result-info  { background: var(--formmy-mint-soft);  color: var(--formmy-mint-dark); }
.formmy-result-warn  { background: #FFF6E1;                  color: #7A5A00; }
.formmy-result-error { background: #FDEDED;                  color: #B91C1C; }

/* Progress loading state — spinner + staged messages */
.formmy-result-loading {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px 20px;
	background: var(--formmy-card);
	border: 1px solid var(--formmy-border);
	border-radius: var(--formmy-radius);
	color: var(--formmy-muted);
	font-size: 15px;
}
.formmy-spinner {
	width: 18px;
	height: 18px;
	border: 2px solid var(--formmy-mint-soft);
	border-top-color: var(--formmy-mint);
	border-radius: 50%;
	flex-shrink: 0;
	animation: formmy-spin 0.7s linear infinite;
}
@keyframes formmy-spin { to { transform: rotate(360deg); } }

/* Caveat block inside the available-result card */
.formmy-result-caveat {
	background: #FFF8EA;
	border-left: 3px solid #D9A23A;
	border-radius: 4px;
	padding: 12px 14px;
	margin: 8px 0;
	font-size: 13px;
	line-height: 1.55;
	color: #6B4F00;
	width: 100%;
	box-sizing: border-box;
}
.formmy-result-caveat-body {
	font-weight: 500;
	margin-bottom: 4px;
}
.formmy-result-caveat-tail {
	color: #8C6A1A;
}

.formmy-result-available,
.formmy-result-taken {
	background: var(--formmy-card);
	border: 1px solid var(--formmy-border);
	border-radius: var(--formmy-radius);
	padding: 24px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
}
.formmy-result-available { border-left: 4px solid var(--formmy-mint); }
.formmy-result-taken     { border-left: 4px solid var(--formmy-purple); }
.formmy-result-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	font-size: 18px;
	font-weight: 700;
	line-height: 1;
}
.formmy-result-available .formmy-result-icon {
	background: var(--formmy-mint);
	color: #fff;
}
.formmy-result-taken .formmy-result-icon     {
	background: var(--formmy-purple);
	color: #fff;
}
.formmy-result-name {
	font-size: 20px;
	font-weight: 600;
	letter-spacing: -0.3px;
}
.formmy-result-message-text {
	color: var(--formmy-muted);
	font-size: 14px;
	margin-bottom: 8px;
}
.formmy-cta-nw,
.formmy-cta-dnb {
	display: inline-block;
	background: var(--formmy-mint);
	color: var(--formmy-navy);
	text-decoration: none;
	padding: 14px 26px;
	border-radius: 8px;
	font-weight: 700;
	font-size: 15px;
	transition: background 0.15s, color 0.15s;
	letter-spacing: 0.2px;
}
.formmy-cta-nw:hover  { background: var(--formmy-mint-dark); color: #fff; }
.formmy-cta-dnb {
	background: var(--formmy-purple);
	color: #fff;
}
.formmy-cta-dnb:hover { background: var(--formmy-purple-dark); color: #fff; }
.formmy-cta-badge {
	color: var(--formmy-muted);
	font-size: 12px;
	margin-top: 4px;
}

/* --- Stat bar ------------------------------------------------------------- */
.formmy-stat-bar {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 12px;
	margin: 0 24px 48px;
	max-width: 1080px;
	padding: 0;
}
.formmy-main > .formmy-stat-bar { margin-left: auto; margin-right: auto; }
.formmy-stat-card {
	background: var(--formmy-card);
	border: 1px solid var(--formmy-border);
	border-radius: var(--formmy-radius);
	padding: 22px 20px 20px;
	position: relative;
	overflow: hidden;
}
.formmy-stat-card::before {
	/* Mint accent stripe at the top edge — visually groups the stat cards
	 * as a single family and threads the brand color through the section. */
	content: "";
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 3px;
	background: var(--formmy-mint);
	opacity: 0.85;
}
.formmy-stat-value {
	font-size: 26px;
	font-weight: 700;
	color: var(--formmy-navy);
	letter-spacing: -0.5px;
	margin-bottom: 4px;
}
.formmy-stat-label {
	text-transform: uppercase;
	font-size: 11px;
	letter-spacing: 0.5px;
	color: var(--formmy-muted);
	font-weight: 600;
	margin-bottom: 8px;
}
.formmy-stat-source {
	font-family: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", monospace;
	font-size: 11px;
	color: #9DA8A3;
}

/* --- SOS info strip ------------------------------------------------------- */
.formmy-sos-strip {
	display: flex;
	gap: 28px;
	padding: 24px;
	background: var(--formmy-card);
	border: 1px solid var(--formmy-border);
	border-radius: var(--formmy-radius);
	margin: 0 24px 48px;
	max-width: 1080px;
	align-items: center;
}
.formmy-main > .formmy-sos-strip { margin-left: auto; margin-right: auto; }
.formmy-sos-seal {
	width: 72px;
	height: 72px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
	/* Mint ring around the seal — small detail tying it to the brand. */
	box-shadow: 0 0 0 3px var(--formmy-mint-soft),
	            0 0 0 4px var(--formmy-mint);
	padding: 4px;
	background: #fff;
}
.formmy-sos-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px 32px;
	flex: 1;
}
.formmy-sos-cell {
	display: flex;
	flex-direction: column;
	gap: 2px;
	font-size: 14px;
}
.formmy-sos-cell a {
	color: var(--formmy-purple);
	text-decoration: none;
}
.formmy-sos-cell a:hover { text-decoration: underline; }
.formmy-sos-label {
	text-transform: uppercase;
	font-size: 11px;
	letter-spacing: 0.5px;
	color: var(--formmy-muted);
	font-weight: 600;
	display: flex;
	align-items: center;
	gap: 6px;
}
.formmy-sos-label::before {
	content: "";
	display: inline-block;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--formmy-mint);
}

/* --- Key facts ------------------------------------------------------------ */
.formmy-key-facts {
	margin: 0 24px 48px;
	max-width: 1080px;
}
.formmy-main > .formmy-key-facts { margin-left: auto; margin-right: auto; }
.formmy-key-facts-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	margin-top: 16px;
}
.formmy-key-fact-card {
	background: var(--formmy-card);
	border: 1px solid var(--formmy-border);
	border-radius: var(--formmy-radius);
	padding: 22px 20px 20px 24px;
	position: relative;
}
.formmy-key-fact-card::before {
	/* Left-edge mint accent — pairs with the stat card top accent so all
	 * data cards on the page read as a unified set. */
	content: "";
	position: absolute;
	left: 0; top: 14px; bottom: 14px;
	width: 3px;
	background: var(--formmy-mint);
	border-radius: 0 2px 2px 0;
}
.formmy-key-fact-value {
	font-size: 28px;
	font-weight: 700;
	color: var(--formmy-purple);
	letter-spacing: -0.5px;
	margin-bottom: 6px;
}
.formmy-key-fact-title {
	font-size: 14px;
	font-weight: 600;
	margin-bottom: 6px;
}
.formmy-key-fact-desc {
	font-size: 13px;
	color: var(--formmy-muted);
	line-height: 1.5;
	margin-bottom: 8px;
}
.formmy-key-fact-source {
	font-family: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", monospace;
	font-size: 11px;
	color: #9DA8A3;
}

/* --- Homepage state grid -------------------------------------------------- */
.formmy-state-grid {
	margin: 0 24px 48px;
	max-width: 1080px;
}
.formmy-main > .formmy-state-grid { margin-left: auto; margin-right: auto; }
.formmy-state-grid-list {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 8px;
	margin-top: 16px;
}
.formmy-state-tile {
	background: var(--formmy-card);
	border: 1px solid var(--formmy-border);
	border-radius: 8px;
	padding: 12px 14px;
	font-size: 14px;
	color: var(--formmy-text);
	text-decoration: none;
	transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.formmy-state-tile:hover {
	background: var(--formmy-mint-soft);
	border-color: var(--formmy-mint);
	color: var(--formmy-navy);
}

/* --- Footer --------------------------------------------------------------- */
/* Footer is dark navy too — bookends the page with the hero band. Uses the
 * dark-bg logo variant. Mint accent stripe at the top mirrors the header
 * for visual closure. Negative left/right margins escape any parent
 * (theme) max-width constraint so the background reaches the viewport edge. */
.formmy-footer {
	margin: 64px calc(50% - 50vw) 0;
	padding: 40px max(24px, calc(50vw - 540px)) 28px;
	background: var(--formmy-navy);
	color: rgba(255, 255, 255, 0.78);
	position: relative;
}
.formmy-footer::before {
	content: "";
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 3px;
	background: linear-gradient(
		90deg,
		transparent 0%,
		var(--formmy-mint) 25%,
		var(--formmy-purple) 50%,
		var(--formmy-mint) 75%,
		transparent 100%
	);
	opacity: 0.85;
}
.formmy-footer-inner {
	max-width: 1080px;
	margin: 0 auto 16px;
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	justify-content: space-between;
	align-items: center;
}
.formmy-footer-brand-img {
	height: 32px;
	width: auto;
	display: block;
}
.formmy-footer-links {
	display: flex;
	gap: 22px;
	flex-wrap: wrap;
}
.formmy-footer-links a {
	color: rgba(255, 255, 255, 0.78);
	text-decoration: none;
	font-size: 14px;
	transition: color 0.12s;
}
.formmy-footer-links a:hover { color: var(--formmy-mint); }
.formmy-footer-brand {
	color: rgba(255, 255, 255, 0.6);
	font-size: 13px;
}
.formmy-footer-brand a {
	color: var(--formmy-mint);
	text-decoration: none;
}
.formmy-footer-brand a:hover { color: #fff; }
.formmy-footer-disclosure {
	max-width: 1080px;
	margin: 0 auto;
	color: rgba(255, 255, 255, 0.55);
	font-size: 12px;
	line-height: 1.5;
	padding-top: 16px;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* --- Responsive ----------------------------------------------------------- */
@media (max-width: 800px) {
	.formmy-h1 { font-size: 26px; }
	.formmy-search { flex-direction: column; }
	.formmy-search-state, .formmy-search-button { width: 100%; }
	.formmy-stat-bar { grid-template-columns: 1fr 1fr; }
	.formmy-state-grid-list { grid-template-columns: 1fr 1fr; }
	.formmy-sos-strip { flex-direction: column; align-items: flex-start; }
	.formmy-sos-grid { grid-template-columns: 1fr; }
	.formmy-tagline {
		text-align: left;
		white-space: normal;       /* allow wrapping on narrow viewports */
	}
	.formmy-logo img { height: 44px; }
	.formmy-header-inner { gap: 14px; }
	.formmy-header { padding-top: 18px; padding-bottom: 16px; }
}
@media (max-width: 500px) {
	.formmy-key-facts-grid { grid-template-columns: 1fr; }
	.formmy-stat-bar { grid-template-columns: 1fr; }
	.formmy-state-grid-list { grid-template-columns: 1fr; }
	.formmy-logo img { height: 40px; }
}