[data-theme="dark"] {
			--bg: #0F172A;
			--card: #1E293B;
			--card-border: rgba(255,255,255,0.06);
			--accent: #14B8A6;
			--accent-hover: #0D9488;
			--accent-bg: rgba(20,184,166,0.12);
			--success: #4ADE80;
			--success-bg: rgba(74,222,128,0.12);
			--warn: #F87171;
			--warn-bg: rgba(248,113,113,0.10);
			--gold: #F59E0B;
			--green: #10B981;
			--text: #F1F5F9;
			--text2: #94A3B8;
			--text3: #64748B;
			--input-bg: #1E293B;
			--input-border: rgba(255,255,255,0.08);
			--nav-bg: rgba(15,23,42,0.85);
			--nav-border: rgba(255,255,255,0.05);
			--divider: rgba(255,255,255,0.06);
			--select-bg: #1E293B;
		}
		[data-theme="light"] {
			--bg: #F8FAFC;
			--card: #FFFFFF;
			--card-border: #E2E8F0;
			--accent: #0D9488;
			--accent-hover: #0F766E;
			--accent-bg: rgba(13,148,136,0.06);
			--success: #16A34A;
			--success-bg: rgba(22,163,74,0.08);
			--warn: #DC2626;
			--warn-bg: rgba(220,38,38,0.06);
			--gold: #D97706;
			--green: #16A34A;
			--text: #0F172A;
			--text2: #4B5563;
			--text3: #6B7280;
			--input-bg: #FFFFFF;
			--input-border: #CBD5E1;
			--nav-bg: rgba(248,250,252,0.92);
			--nav-border: #E2E8F0;
			--divider: #E2E8F0;
			--select-bg: #FFFFFF;
		}
		* {
			margin: 0;
			padding: 0;
			box-sizing: border-box;
		}

		body {
			font-family: 'Plus Jakarta Sans', sans-serif;
			background: var(--bg);
			color: var(--text);
			line-height: 1.6;
			min-height: 100vh;
		}

		::selection {
			background: linear-gradient(135deg, #14B8A6, #0D9488);
			color: #0F172A;
		}

		nav {
			position: sticky;
			top: 0;
			z-index: 100;
			background: var(--nav-bg);
			backdrop-filter: blur(10px);
			border-bottom: 1px solid var(--nav-border);
			padding: 1.5rem 2rem;
		}

		.nav-container {
			max-width: 1100px;
			margin: 0 auto;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}

		.logo {
			font-size: 1.5rem;
			font-family: 'Plus Jakarta Sans', sans-serif;
			font-weight: 400;
			letter-spacing: -0.02em;
		}

		.logo-iq {
			color: var(--accent);
		}

		.nav-tagline {
			font-size: 0.75rem;
			color: var(--text2);
			text-transform: uppercase;
			letter-spacing: 0.15em;
			margin-top: 0.25rem;
		}

		.nav-cta {
			padding: 0.75rem 1.5rem;
			border: 1px solid var(--input-border);
			background: transparent;
			color: var(--text);
			font-size: 0.9rem;
			border-radius: 10px;
			cursor: pointer;
			transition: all 0.3s ease;
		}

		.nav-cta:hover {
			background: var(--input-bg);
			border-color: rgba(255, 255, 255, 0.25);
		}

		main {
			max-width: 1100px;
			margin: 0 auto;
			padding: 0 2rem;
		}

		.progress-bar {
			display: none;
			margin: 2rem 0 3rem;
			height: 4px;
			background: var(--input-bg);
			border-radius: 2px;
			overflow: hidden;
		}

		.progress-bar.active {
			display: block;
		}

		.progress-fill {
			height: 100%;
			background: linear-gradient(135deg, #14B8A6, #0D9488);
			transition: width 0.3s ease;
		}

		.screen {
			display: none;
			animation: fadeInUp 0.5s ease;
		}

		.screen.active {
			display: block;
		}

		@keyframes fadeInUp {
			from {
				opacity: 0;
				transform: translateY(20px);
			}
			to {
				opacity: 1;
				transform: translateY(0);
			}
		}

		h1 {
			font-family: 'Plus Jakarta Sans', sans-serif;
			font-size: 3rem;
			margin-bottom: 1rem;
			line-height: 1.2;
			font-weight: 800;
		letter-spacing: -0.02em;
		}

		h2 {
			font-family: 'Plus Jakarta Sans', sans-serif;
			font-size: 2rem;
			margin-bottom: 0.5rem;
			font-weight: 800;
		}

		h3 {
			font-family: 'Plus Jakarta Sans', sans-serif;
			font-size: 1.3rem;
			margin-bottom: 0.5rem;
			font-weight: 800;
		}

		p, label {
			color: var(--text);
			margin-bottom: 1rem;
		}

		.text-secondary {
			color: var(--text2);
			font-size: 0.95rem;
		}

		.text-muted {
			color: var(--text2);
			font-size: 0.9rem;
		}

		.btn {
			padding: 1rem 2rem;
			border: none;
			border-radius: 10px;
			font-size: 1rem;
			font-family: 'Plus Jakarta Sans', sans-serif;
			cursor: pointer;
			transition: all 0.3s ease;
			font-weight: 500;
			display: inline-block;
		}

		.btn-primary {
			background: linear-gradient(135deg, #14B8A6, #0D9488);
			color: #0F172A;
		}

		.btn-primary:hover {
			background: var(--accent-hover);
			transform: translateY(-2px);
			box-shadow: 0 8px 24px rgba(20, 184, 166, 0.25);
		}

		.btn-secondary {
			background: transparent;
			color: var(--text);
			border: 1px solid rgba(255, 255, 255, 0.2);
		}

		.btn-secondary:hover {
			background: var(--input-bg);
			border-color: rgba(255, 255, 255, 0.4);
		}

		.btn-text {
			background: none;
			color: var(--text2);
			padding: 0.5rem 1rem;
			border: none;
			font-size: 0.9rem;
		}

		.btn-text:hover {
			color: var(--text);
		}

		.card {
			background: var(--card);
			border: 1px solid var(--card-border);
			border-radius: 14px;
			padding: 2rem;
			margin-bottom: 2rem;
		}

		.card-grid {
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
			gap: 1.5rem;
			margin: 2rem 0;
		}

		.card-small {
			padding: 1.5rem;
		}

		.form-group {
			margin-bottom: 2rem;
		}

		label {
			display: block;
			margin-bottom: 0.75rem;
			font-weight: 500;
		}

		input[type="text"],
		input[type="email"],
		input[type="tel"],
		input[type="number"],
		select {
			width: 100%;
			padding: 0.875rem;
			background: var(--input-bg);
			border: 1px solid var(--input-border);
			border-radius: 10px;
			color: var(--text);
			font-family: 'Plus Jakarta Sans', sans-serif;
			font-size: 1rem;
			transition: all 0.3s ease;
		}

		input[type="text"]:focus,
		input[type="email"]:focus,
		input[type="tel"]:focus,
		input[type="number"]:focus,
		select:focus {
			outline: none;
			background: var(--accent-bg);
			border-color: var(--accent);
			box-shadow: 0 0 0 3px var(--accent-bg);
		}

		select option {
			background: var(--card);
			color: var(--text);
			padding: 0.5rem;
		}

		input::placeholder {
			color: var(--text2);
		}

		.chip:focus-visible {
			outline: 2px solid var(--accent);
			outline-offset: 2px;
		}

		input[type="range"]:focus-visible {
			outline: 2px solid var(--accent);
			outline-offset: 2px;
		}

		button:focus-visible,
		select:focus-visible,
		input:focus-visible {
			outline: 2px solid var(--accent);
			outline-offset: 2px;
		}

		.chip-group {
			display: flex;
			gap: 1rem;
			flex-wrap: wrap;
			margin-bottom: 2rem;
		}

		.chip {
			padding: 0.75rem 1.25rem;
			background: var(--input-bg);
			border: 1px solid var(--input-border);
			border-radius: 24px;
			color: var(--text);
			cursor: pointer;
			transition: all 0.3s ease;
			font-size: 0.95rem;
		}

		.chip:hover {
			background: var(--accent-bg);
			border-color: rgba(255, 255, 255, 0.25);
		}

		.chip.active {
			background: linear-gradient(135deg, #14B8A6, #0D9488);
			color: #0F172A;
			border-color: var(--accent);
		}

		input[type="range"] {
			width: 100%;
			height: 6px;
			border-radius: 3px;
			background: linear-gradient(to right, var(--accent) 0%, var(--accent) 50%, rgba(255,255,255,0.12) 50%, rgba(255,255,255,0.12) 100%);
			outline: none;
			-webkit-appearance: none;
		}

		input[type="range"]::-webkit-slider-thumb {
			-webkit-appearance: none;
			width: 22px;
			height: 22px;
			border-radius: 50%;
			background: linear-gradient(135deg, var(--accent), var(--accent-hover));
			cursor: pointer;
			box-shadow: 0 2px 10px rgba(20,184,166,0.4);
			border: 2px solid var(--card);
		}

		input[type="range"]::-moz-range-track {
			height: 6px;
			border-radius: 3px;
			background: rgba(255,255,255,0.12);
			border: none;
		}

		input[type="range"]::-moz-range-progress {
			height: 6px;
			border-radius: 3px;
			background: var(--accent);
		}

		input[type="range"]::-moz-range-thumb {
			width: 22px;
			height: 22px;
			border-radius: 50%;
			background: linear-gradient(135deg, var(--accent), var(--accent-hover));
			cursor: pointer;
			border: 2px solid var(--card);
			box-shadow: 0 2px 10px rgba(20,184,166,0.4);
		}

		[data-theme="light"] input[type="range"] {
			background: linear-gradient(to right, var(--accent) 0%, var(--accent) 50%, #E2E8F0 50%, #E2E8F0 100%);
		}

		.hero {
			text-align: center;
			padding: 5rem 0;
			margin: 2rem 0;
		}

		.hero .seo-h1 {
			font-size: 0.875rem;
			font-weight: 600;
			letter-spacing: 0.08em;
			text-transform: uppercase;
			color: var(--accent);
			margin-bottom: 0.5rem;
		}

		.hero .hero-subhead {
			font-size: 3.5rem;
			font-weight: 800;
			line-height: 1.15;
			color: var(--text);
			margin-bottom: 1.5rem;
		}

		.hero-sub {
			font-size: 1.25rem;
			color: var(--text2);
			max-width: 700px;
			margin: 0 auto 2rem;
			line-height: 1.6;
		}

		.hero-cta {
			margin: 3rem 0 1.5rem;
		}

		.trust-line {
			display: flex;
			justify-content: center;
			align-items: center;
			gap: 0.5rem;
			font-size: 0.9rem;
			color: var(--text2);
		}

		.check-icon::before {
			content: "✓";
			color: var(--success);
			font-weight: bold;
			margin-right: 0.25rem;
		}

		.differentiator {
			text-align: center;
		}

		.differentiator-title {
			font-family: 'Plus Jakarta Sans', sans-serif;
			font-size: 1.15rem;
			margin-bottom: 0.75rem;
			color: var(--accent);
		}

		.steps {
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
			gap: 2rem;
			margin: 3rem 0;
			position: relative;
		}

		.step {
			text-align: center;
		}

		.step-number {
			width: 50px;
			height: 50px;
			background: linear-gradient(135deg, #14B8A6, #0D9488);
			color: #0F172A;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			font-family: 'Plus Jakarta Sans', sans-serif;
			font-size: 1.5rem;
			font-weight: bold;
			margin: 0 auto 1rem;
		}

		.table-responsive {
			overflow-x: auto;
			margin: 2rem 0;
		}

		.comparison-table {
			width: 100%;
			border-collapse: collapse;
			background: var(--card);
			border: 1px solid var(--card-border);
		}

		.comparison-table th,
		.comparison-table td {
			padding: 1rem;
			text-align: left;
			border-bottom: 1px solid var(--divider);
		}

		.comparison-table th {
			background: var(--input-bg);
			font-weight: 600;
		}

		.comparison-table td:first-child {
			width: 40%;
		}

		.check {
			color: var(--success);
			font-weight: bold;
		}

		.x {
			color: var(--warn);
			font-weight: bold;
		}

		.faq-item {
			margin-bottom: 1rem;
		}

		.faq-question {
			cursor: pointer;
			padding: 1.5rem;
			background: var(--card);
			border: 1px solid var(--card-border);
			border-radius: 14px;
			display: flex;
			justify-content: space-between;
			align-items: center;
			transition: all 0.3s ease;
		}

		.faq-question:hover {
			background: var(--input-bg);
		}

		.faq-question.open {
			background: var(--input-bg);
		}

		.faq-answer {
			display: none;
			padding: 1.5rem;
			background: var(--card);
			border-left: 2px solid var(--accent);
			margin-top: 0.5rem;
			color: var(--text2);
		}

		.faq-answer.open {
			display: block;
		}

		.faq-toggle {
			color: var(--accent);
			font-size: 1.5rem;
			transition: transform 0.3s ease;
		}

		.faq-question.open .faq-toggle {
			transform: rotate(45deg);
		}

		footer {
			margin-top: 5rem;
			padding: 3rem 2rem;
			border-top: 1px solid var(--divider);
			text-align: center;
			color: var(--text2);
		}

		.footer-links {
			display: flex;
			justify-content: center;
			gap: 2rem;
			margin-bottom: 1.5rem;
			flex-wrap: wrap;
		}

		.footer-links a {
			color: var(--text2);
			text-decoration: none;
			transition: color 0.3s ease;
		}

		.footer-links a:hover {
			color: var(--text);
		}

		.proposal-header {
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
			gap: 1rem;
			margin: 2rem 0;
		}

		.stat-box {
			background: var(--card);
			border: 1px solid var(--card-border);
			padding: 1.5rem;
			border-radius: 14px;
			text-align: center;
		}

		.stat-value {
			font-size: 2rem;
			font-family: 'Plus Jakarta Sans', sans-serif;
			color: var(--success);
			margin-bottom: 0.5rem;
		}

		.stat-label {
			font-size: 0.85rem;
			color: var(--text2);
			text-transform: uppercase;
			letter-spacing: 0.05em;
		}

		.proposal-columns {
			display: grid;
			grid-template-columns: 1fr 1fr;
			gap: 2rem;
			margin: 2rem 0;
		}

		.finance-cards {
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
			gap: 1rem;
		}

		.finance-card {
			background: var(--card);
			border: 2px solid var(--card-border);
			border-radius: 14px;
			padding: 1.5rem;
			cursor: pointer;
			transition: all 0.3s ease;
		}

		.finance-card:hover {
			background: var(--input-bg);
			border-color: rgba(255, 255, 255, 0.15);
		}

		.finance-card.selected {
			background: var(--accent-bg);
			border-color: var(--accent);
		}

		.finance-option-label {
			font-weight: 600;
			margin-bottom: 0.75rem;
			font-size: 1rem;
		}

		.finance-price {
			font-size: 1.5rem;
			font-family: 'Plus Jakarta Sans', sans-serif;
			color: var(--accent);
			margin-bottom: 1rem;
		}

		.finance-detail {
			font-size: 0.85rem;
			color: var(--text2);
			line-height: 1.5;
		}

		.finance-partners {
			margin-top: 0.75rem;
			padding-top: 0.75rem;
			border-top: 1px solid var(--divider);
		}

		.finance-partners-label {
			font-size: 0.7rem;
			text-transform: uppercase;
			letter-spacing: 0.5px;
			color: var(--text3);
			margin-bottom: 0.4rem;
		}

		.partner-row {
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 0.78rem;
			padding: 0.2rem 0;
		}

		.partner-name {
			color: var(--text2);
		}

		.partner-stars {
			color: var(--accent);
			font-size: 0.7rem;
			letter-spacing: 1px;
		}

		.badge-2026 {
			display: inline-block;
			background: var(--success);
			color: #0F172A;
			padding: 0.25rem 0.75rem;
			border-radius: 10px;
			font-size: 0.75rem;
			font-weight: 600;
			margin-top: 0.75rem;
		}

		.warning-box {
			background: var(--warn-bg);
			border-left: 3px solid var(--warn);
			padding: 1.5rem;
			border-radius: 10px;
			margin: 1.5rem 0;
			color: var(--text);
		}

		.modal {
			display: none;
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background: rgba(0, 0, 0, 0.7);
			backdrop-filter: blur(4px);
			z-index: 1000;
			align-items: center;
			justify-content: center;
		}

		.modal.active {
			display: flex;
		}

		.modal-content {
			background: var(--bg);
			border: 1px solid var(--card-border);
			border-radius: 14px;
			padding: 3rem;
			max-width: 500px;
			width: 90%;
			max-height: 90vh;
			overflow-y: auto;
		}

		.modal-close {
			float: right;
			font-size: 1.5rem;
			cursor: pointer;
			color: var(--text2);
			background: none;
			border: none;
			padding: 0.5rem;
		}

		.modal-close:hover {
			color: var(--text);
		}

		.detail-text {
			display: none;
		}

		.detail-text.open {
			display: block;
		}

		.expand-toggle {
			color: var(--accent);
			cursor: pointer;
			font-weight: 500;
			margin-top: 1rem;
		}

		.results-hero {
			text-align: center;
			padding: 3rem 0;
		}

		.results-stat {
			font-size: 3rem;
			font-family: 'Plus Jakarta Sans', sans-serif;
			color: var(--success);
			margin-bottom: 0.5rem;
		}

		.timeline {
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
			gap: 2rem;
			margin: 3rem 0;
		}

		.timeline-item {
			padding-left: 3rem;
			position: relative;
		}

		.timeline-item::before {
			content: '';
			position: absolute;
			left: 0;
			top: 0;
			width: 24px;
			height: 24px;
			background: linear-gradient(135deg, #14B8A6, #0D9488);
			border-radius: 50%;
		}

		/* UTILITY BILL SCREEN STYLES */
		.method-tabs {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: 10px;
			margin-bottom: 26px;
		}

		.mtab {
			background: var(--card);
			border: 1.5px solid var(--card-border);
			border-radius: 14px;
			padding: 14px 10px;
			cursor: pointer;
			text-align: center;
			transition: all 0.2s;
		}

		.mtab:hover {
			background: var(--input-bg);
			border-color: var(--accent);
		}

		.mtab.active {
			background: var(--accent-bg);
			border-color: var(--accent);
		}

		.mtab .ico {
			font-size: 0;
			margin-bottom: 5px;
		}

		.mtab .lbl {
			font-size: 0.8rem;
			font-weight: 600;
			color: var(--text2);
			line-height: 1.3;
		}

		.mtab.active .lbl {
			color: var(--accent);
		}

		.panel {
			display: none;
		}

		.panel.active {
			display: block;
		}

		.drop-zone {
			border: 2px dashed var(--accent);
			border-radius: 14px;
			padding: 38px 20px;
			text-align: center;
			cursor: pointer;
			transition: all 0.2s;
			background: var(--accent-bg);
			margin-bottom: 18px;
			position: relative;
		}

		.drop-zone:hover,
		.drop-zone.over {
			border-color: var(--accent);
			background: var(--accent-bg);
		}

		.drop-zone input[type=file] {
			position: absolute;
			inset: 0;
			opacity: 0;
			cursor: pointer;
			width: 100%;
			height: 100%;
		}

		.drop-ico {
			font-size: 0;
			margin-bottom: 10px;
		}

		.drop-ttl {
			font-size: 0.98rem;
			font-weight: 600;
			margin-bottom: 4px;
		}

		.drop-sub {
			font-size: 0.8rem;
			color: var(--text2);
		}

		.file-list {
			display: flex;
			flex-direction: column;
			gap: 8px;
			margin-bottom: 16px;
		}

		.file-item {
			display: flex;
			align-items: center;
			gap: 10px;
			background: var(--card);
			border: 1px solid var(--card-border);
			border-radius: 14px;
			padding: 9px 13px;
		}

		.file-item .fn {
			flex: 1;
			font-size: 0.84rem;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}

		.file-item .fs {
			font-size: 0.76rem;
		}

		.fs.ok {
			color: var(--success);
		}

		.fs.err {
			color: var(--warn);
		}

		.fs.spin {
			color: var(--accent);
		}

		.parse-box {
			border-radius: 14px;
			padding: 15px 18px;
			margin-bottom: 16px;
			display: none;
		}

		.parse-box.ok {
			background: var(--success-bg);
			border: 1px solid var(--success);
		}

		.parse-box.err {
			background: var(--warn-bg);
			border: 1px solid rgba(255, 107, 107, 0.28);
		}

		.parse-ttl {
			font-size: 0.8rem;
			font-weight: 700;
			margin-bottom: 10px;
		}

		.parse-box.ok .parse-ttl {
			color: var(--success);
		}

		.parse-box.err .parse-ttl {
			color: var(--warn);
		}

		.parse-fields {
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
			gap: 10px;
		}

		.lookup-grid {
			display: grid;
			grid-template-columns: 1fr 1fr;
			gap: 13px;
			margin-bottom: 18px;
		}

		.rate-chip {
			background: var(--accent-bg);
			border: 1px solid rgba(245, 166, 35, 0.28);
			border-radius: 14px;
			padding: 14px 18px;
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 22px;
			display: none;
		}

		.rate-chip .rl {
			font-size: 0.83rem;
			color: var(--text2);
		}

		.rate-chip .rv {
			font-size: 1.4rem;
			font-weight: 700;
			color: var(--accent);
		}

		.rate-note {
			font-size: 0.72rem;
			color: var(--text2);
			margin-top: 2px;
		}

		.fld {
			display: flex;
			flex-direction: column;
			gap: 5px;
		}

		.fld label {
			font-size: 0.75rem;
			font-weight: 700;
			text-transform: uppercase;
			letter-spacing: 0.05em;
			color: var(--text2);
		}

		.fld select,
		.fld input[type=number],
		.fld input[type=text] {
			width: 100%;
			background: var(--input-bg);
			border: 1.5px solid var(--input-border);
			border-radius: 14px;
			padding: 10px 13px;
			font-size: 0.92rem;
			font-family: 'Plus Jakarta Sans', sans-serif;
			color: var(--text);
			outline: none;
			transition: border-color 0.2s;
			appearance: none;
		}

		.fld select:focus,
		.fld input:focus {
			border-color: var(--accent);
		}

		.fld select option {
			background: var(--card);
		}

		.fld select {
			background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' stroke='%237A8BA0' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
			background-repeat: no-repeat;
			background-position: right 12px center;
			padding-right: 30px;
		}

		.fld input.filled {
			border-color: var(--success);
			background: var(--success-bg);
		}

		.sec-lbl {
			font-size: 0.75rem;
			font-weight: 700;
			text-transform: uppercase;
			letter-spacing: 0.06em;
			color: var(--text2);
			margin-bottom: 11px;
			display: flex;
			align-items: center;
			gap: 8px;
		}

		.sec-lbl::after {
			content: '';
			flex: 1;
			height: 1px;
			background: rgba(255, 255, 255, 0.09);
		}

		.month-grid {
			background: var(--card);
			border: 1px solid var(--card-border);
			border-radius: 14px;
			overflow: hidden;
			margin-bottom: 20px;
		}

		.mg-head {
			display: grid;
			grid-template-columns: 105px 1fr 1fr 64px;
			gap: 0;
			background: var(--card);
			border-bottom: 1px solid var(--divider);
			padding: 9px 14px;
		}

		.mg-head span {
			font-size: 0.7rem;
			font-weight: 700;
			text-transform: uppercase;
			letter-spacing: 0.05em;
			color: var(--text2);
		}

		.mg-row {
			display: grid;
			grid-template-columns: 105px 1fr 1fr 64px;
			gap: 0;
			padding: 7px 14px;
			border-bottom: 1px solid var(--divider);
			align-items: center;
		}

		.mg-row:last-child {
			border-bottom: none;
		}

		.mg-row:hover {
			background: var(--accent-bg);
		}

		.mg-month {
			font-size: 0.83rem;
			color: var(--text2);
			font-weight: 500;
		}

		.mg-month.cur {
			color: var(--accent);
			font-weight: 600;
		}

		.mg-cell {
			padding: 2px 5px;
		}

		.mg-inp {
			width: 100%;
			background: var(--card);
			border: 1px solid transparent;
			border-radius: 6px;
			padding: 6px 8px;
			font-size: 0.86rem;
			font-family: 'Plus Jakarta Sans', sans-serif;
			color: var(--text);
			outline: none;
			transition: all 0.15s;
		}

		.mg-inp:focus {
			border-color: var(--accent);
			background: rgba(255, 255, 255, 0.09);
		}

		.mg-inp::placeholder {
			color: var(--text2);
			opacity: 0.7;
		}

		.mg-inp.has {
			border-color: var(--success);
			background: var(--success-bg);
		}

		.mg-rate {
			font-size: 0.79rem;
			color: var(--text2);
			text-align: center;
		}

		.mg-rate.calc {
			color: var(--success);
		}

		.info-p {
			font-size: 0.82rem;
			color: var(--text2);
			line-height: 1.55;
			margin-bottom: 15px;
		}

		.est-card {
			background: var(--card);
			border: 1px solid var(--card-border);
			border-radius: 14px;
			padding: 20px;
			margin-bottom: 14px;
		}

		.est-card h3 {
			font-size: 0.95rem;
			font-weight: 600;
			margin-bottom: 14px;
		}

		.two-col {
			display: grid;
			grid-template-columns: 1fr 1fr;
			gap: 13px;
		}

		.inp-wrap {
			position: relative;
		}

		.big-inp {
			width: 100%;
			background: var(--input-bg);
			border: 1.5px solid var(--input-border);
			border-radius: 14px;
			padding: 13px 42px 13px 13px;
			font-size: 1.05rem;
			font-family: 'Plus Jakarta Sans', sans-serif;
			color: var(--text);
			outline: none;
			transition: border-color 0.2s;
			appearance: none;
		}

		.big-inp:focus {
			border-color: var(--accent);
		}

		.inp-unit {
			position: absolute;
			right: 13px;
			top: 50%;
			transform: translateY(-50%);
			font-size: 0.8rem;
			color: var(--text2);
			pointer-events: none;
		}

		.inp-pre {
			position: absolute;
			left: 13px;
			top: 50%;
			transform: translateY(-50%);
			font-size: 1rem;
			color: var(--text2);
			pointer-events: none;
		}

		.hint-box {
			background: var(--accent-bg);
			border: 1px solid var(--accent);
			border-radius: 14px;
			padding: 11px 14px;
			font-size: 0.8rem;
			color: var(--text2);
			line-height: 1.5;
			margin-top: 11px;
		}

		.hint-box strong {
			color: var(--accent);
		}

		.toggle-btn {
			background: none;
			border: none;
			color: var(--accent);
			font-family: 'Plus Jakarta Sans', sans-serif;
			font-size: 0.84rem;
			cursor: pointer;
			padding: 8px 0;
			display: flex;
			align-items: center;
			gap: 6px;
		}

		.summary-bar {
			background: var(--success-bg);
			border: 1px solid var(--success);
			border-radius: 14px;
			padding: 16px 20px;
			margin-bottom: 18px;
			display: none;
		}

		.summary-bar.show {
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
			gap: 14px;
		}

		.sstat .slbl {
			font-size: 0.68rem;
			text-transform: uppercase;
			letter-spacing: 0.05em;
			color: var(--text2);
			margin-bottom: 3px;
		}

		.sstat .sval {
			font-size: 1.25rem;
			font-weight: 700;
			color: var(--success);
		}

		.sstat .sunit {
			font-size: 0.72rem;
			color: var(--text2);
		}

		.trust-copy {
			font-size: 0.8rem;
			color: var(--text2);
			text-align: center;
			margin: 20px 0;
			line-height: 1.5;
		}

		@media (max-width: 768px) {
			h1 {
				font-size: 2rem;
			}

			.hero .seo-h1 {
				font-size: 0.75rem;
			}

			.hero .hero-subhead {
				font-size: 2rem;
			}

			.hero-sub {
				font-size: 1rem;
			}

			.proposal-columns {
				grid-template-columns: 1fr;
			}

			.steps {
				grid-template-columns: 1fr;
			}

			.finance-cards {
				grid-template-columns: 1fr;
			}

			.comparison-table td:first-child {
				width: auto;
			}

			.footer-links {
				gap: 1rem;
			}

			.proposal-header {
				grid-template-columns: 1fr 1fr;
			}

			main {
				padding: 0 1rem;
			}

			.method-tabs {
				grid-template-columns: 1fr;
			}

			.lookup-grid {
				grid-template-columns: 1fr;
			}

			.two-col {
				grid-template-columns: 1fr;
			}
		}

		/* Solar API Loading Overlay */
		.solar-loading-overlay {
			display: none;
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background: rgba(15, 23, 42, 0.94);
			z-index: 1000;
			justify-content: center;
			align-items: center;
			backdrop-filter: blur(4px);
		}

		.solar-loading-overlay.active {
			display: flex;
		}

		.solar-loading-card {
			background: rgba(30, 41, 59, 0.95);
			border: 1px solid rgba(20, 184, 166, 0.2);
			border-radius: 14px;
			padding: 3rem;
			max-width: 420px;
			text-align: center;
			box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
		}

		.solar-loading-pulse {
			width: 12px;
			height: 12px;
			background: linear-gradient(135deg, #14B8A6, #0D9488);
			border-radius: 50%;
			margin: 0 auto 2rem;
			animation: solarPulse 1.2s ease-in-out infinite;
		}

		@keyframes solarPulse {
			0%, 100% {
				box-shadow: 0 0 0 0 rgba(20, 184, 166, 0.7);
				transform: scale(1);
			}
			50% {
				box-shadow: 0 0 0 8px rgba(20, 184, 166, 0);
				transform: scale(1.1);
			}
		}

		.solar-loading-text {
			font-size: 1.1rem;
			color: var(--text);
			margin-bottom: 2rem;
			min-height: 1.6rem;
			font-weight: 500;
		}

		.solar-loading-skip {
			font-size: 0.85rem;
			color: var(--text2);
			margin-top: 1.5rem;
		}

		.solar-loading-skip a {
			color: var(--accent);
			text-decoration: none;
			cursor: pointer;
		}

		.solar-loading-skip a:hover {
			text-decoration: underline;
		}

		/* Data source badge */
		.solar-data-badge {
			display: inline-block;
			font-size: 0.75rem;
			font-weight: 600;
			text-transform: uppercase;
			letter-spacing: 0.05em;
			padding: 0.4rem 0.8rem;
			border-radius: 10px;
			margin-bottom: 1rem;
		}

		.solar-data-badge.available {
			background: var(--success-bg);
			color: var(--success);
			border: 1px solid var(--success);
		}

		.solar-data-badge.fallback {
			background: var(--accent-bg);
			color: var(--accent);
			border: 1px solid var(--accent);
		}

		.solar-capacity-warning {
			background: var(--warn-bg);
			border-left: 3px solid var(--warn);
			padding: 1rem;
			border-radius: 10px;
			margin: 1.5rem 0;
			font-size: 0.9rem;
			color: var(--warn);
		}

		/* 25-Year Savings Comparison Bars */
		.savings-comparison { padding: 0; }
		.savings-baseline {
			padding: 1rem 1.25rem;
			border-radius: 10px;
			background: var(--warn-bg);
			margin-bottom: 1.25rem;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
		.savings-baseline .sb-label { font-size: 0.88rem; color: var(--text2); }
		.savings-baseline .sb-amount { font-size: 1.15rem; font-weight: 700; color: var(--warn); }
		.savings-row {
			display: flex;
			align-items: center;
			gap: 1rem;
			margin-bottom: 1rem;
			padding: 0.75rem 0;
		}
		.savings-row:last-child { margin-bottom: 0; }
		.sr-label {
			min-width: 70px;
			font-size: 0.85rem;
			font-weight: 600;
			color: var(--text);
			flex-shrink: 0;
		}
		.sr-bar-wrap {
			flex: 1;
			position: relative;
			height: 32px;
			border-radius: 8px;
			background: rgba(255,255,255,0.04);
			overflow: hidden;
		}
		[data-theme="light"] .sr-bar-wrap { background: #F1F5F9; }
		.sr-bar {
			height: 100%;
			border-radius: 8px;
			transition: width 0.6s ease;
			display: flex;
			align-items: center;
			padding: 0 0.75rem;
			min-width: 2rem;
		}
		.sr-bar-text {
			font-size: 0.78rem;
			font-weight: 600;
			white-space: nowrap;
			color: #fff;
		}
		.sr-amount {
			min-width: 90px;
			text-align: right;
			font-size: 0.95rem;
			font-weight: 700;
			flex-shrink: 0;
		}
		.sr-best { display: flex; align-items: center; gap: 0.35rem; }
		.sr-best::before {
			content: 'Best';
			background: var(--success);
			color: #fff;
			font-size: 0.55rem;
			font-weight: 700;
			padding: 0.15rem 0.4rem;
			border-radius: 4px;
			text-transform: uppercase;
			letter-spacing: 0.03em;
			flex-shrink: 0;
		}
		.sr-sub {
			font-size: 0.75rem;
			color: var(--text2);
			margin-top: -0.5rem;
			margin-bottom: 1rem;
			padding-left: calc(70px + 1rem);
		}

		.sr-math-toggle {
			font-size: 0.75rem;
			color: var(--accent);
			cursor: pointer;
			display: inline-block;
			margin-left: calc(70px + 1rem);
			margin-top: -0.25rem;
			margin-bottom: 0.75rem;
		}
		.sr-math-toggle:hover { text-decoration: underline; }
		.sr-math {
			display: none;
			margin: -0.25rem 0 1rem;
			padding: 0.75rem 1rem;
			margin-left: calc(70px + 1rem);
			background: rgba(255,255,255,0.03);
			border-radius: 8px;
			border: 1px solid var(--divider);
			font-size: 0.78rem;
			line-height: 1.6;
			color: var(--text2);
		}
		[data-theme="light"] .sr-math { background: #F8FAFC; }
		.sr-math.open { display: block; }
		.sr-math .eq-row { display: flex; justify-content: space-between; padding: 0.15rem 0; }
		.sr-math .eq-row.eq-total { border-top: 1px solid var(--divider); margin-top: 0.35rem; padding-top: 0.4rem; font-weight: 600; color: var(--text); }
		.sr-math .eq-row .eq-val:not(.eq-plus):not(.eq-minus) { color: var(--text2); font-weight: 400; font-size: 0.72rem; }
		.sr-math .eq-row:has(.eq-val:not(.eq-plus):not(.eq-minus)) { opacity: 0.7; padding-left: 0.75rem; }
		.sr-math .eq-label { color: var(--text2); }
		.sr-math .eq-val { font-weight: 600; font-variant-numeric: tabular-nums; }
		.sr-math .eq-plus { color: var(--success); }
		.sr-math .eq-minus { color: var(--warn); }
		.sr-formula {
			margin: 0 0 0.5rem;
			font-size: 0.82rem;
			color: var(--text2);
			line-height: 1.4;
		}
		.sr-formula strong {
			color: var(--text);
			font-weight: 600;
		}

		/* Custom address autocomplete dropdown */
		.address-autocomplete-wrap {
			position: relative;
		}
		.address-dropdown {
			position: absolute;
			top: 100%;
			left: 0;
			right: 0;
			z-index: 9999;
			background: var(--card);
			border: 1px solid rgba(255,255,255,0.12);
			border-radius: 6px;
			margin-top: 4px;
			box-shadow: 0 8px 24px rgba(0,0,0,0.5);
			max-height: 260px;
			overflow-y: auto;
			display: none;
		}
		.address-dropdown.active {
			display: block;
		}
		.address-dropdown-item {
			padding: 11px 14px;
			color: var(--text);
			cursor: pointer;
			font-size: 0.9rem;
			line-height: 1.4;
			border-bottom: 1px solid rgba(255,255,255,0.05);
			transition: background 0.15s;
		}
		.address-dropdown-item:last-child {
			border-bottom: none;
		}
		.address-dropdown-item:hover,
		.address-dropdown-item.focused {
			background: var(--accent-bg);
		}
		.address-dropdown-item .addr-main {
			font-weight: 500;
		}
		.address-dropdown-item .addr-secondary {
			color: var(--text2);
			font-size: 0.82rem;
			margin-top: 2px;
		}
	
/* Light mode card shadow for proposal/results */
[data-theme="light"] .card { box-shadow: 0 1px 3px rgba(0,0,0,0.04); }
[data-theme="light"] .stat-box { box-shadow: 0 1px 3px rgba(0,0,0,0.04); }
[data-theme="light"] .finance-card { box-shadow: 0 1px 3px rgba(0,0,0,0.04); }
[data-theme="light"] .finance-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.08); transform: translateY(-2px); }
[data-theme="light"] .chip.active { color: #fff; }
[data-theme="light"] .btn-primary { color: #fff; }
[data-theme="light"] select option { background: #fff; color: #0F172A; }
[data-theme="light"] .address-dropdown { background: #fff; border-color: #E2E8F0; box-shadow: 0 8px 24px rgba(0,0,0,0.12); }
[data-theme="light"] .address-dropdown-item { color: #0F172A; border-bottom-color: #F1F5F9; }
[data-theme="light"] .address-dropdown-item:hover { background: rgba(13,148,136,0.06); }
[data-theme="light"] .address-dropdown-item .addr-secondary { color: #64748B; }
/* Gate modal: intentionally dark on light screens for conversion consistency */
[data-theme="light"] #gateModal .modal-content { background: linear-gradient(135deg, #0F172A, #1E293B); color: #F1F5F9; }
[data-theme="light"] #gateModal .modal-content .btn-primary { color: #0F172A; }
[data-theme="light"] #gateModal .modal-content input { background: #1E293B; border-color: rgba(255,255,255,0.08); color: #F1F5F9; }
[data-theme="light"] #gateModal .modal-content label { color: #F1F5F9; }
[data-theme="light"] #gateModal .modal-content .text-muted { color: #94A3B8; }
[data-theme="light"] #gateModal .modal-content .warning-box { color: #F1F5F9; }
/* Legal modals: theme-aware — readable on both dark and light screens */
[data-theme="light"] #legalModal > div { background: #FFFFFF !important; color: #0F172A !important; border: 1px solid #E2E8F0; }
[data-theme="light"] #legalModal h2, [data-theme="light"] #legalModal h3 { color: #0F172A !important; }
[data-theme="light"] #legalModal p, [data-theme="light"] #legalModal li, [data-theme="light"] #legalModal span { color: #4B5563 !important; }
[data-theme="light"] #legalModal a { color: #0D9488 !important; }
[data-theme="light"] #legalModal button { color: #6B7280 !important; }
[data-theme="dark"] #legalModal > div { background: var(--card); color: var(--text); border: 1px solid var(--card-border); }
[data-theme="light"] .nav-cta { color: #0F172A; }

@media (max-width: 480px) {
	.chip { padding: 0.875rem 1.5rem; min-height: 44px; }
	.btn, .btn-primary, .btn-secondary { min-height: 44px; padding: 0.75rem 1.5rem; }
}

/* ══════════════════════════════════════════════════════════════════
   DESIGN STUDIO — Interactive Panel Placement
   Embedded in Screen 3 (proposal), works in light theme
══════════════════════════════════════════════════════════════════ */

.designer-card { padding: 0 !important; overflow: hidden; }
.designer-header {
	display: flex; justify-content: space-between; align-items: center;
	padding: 1rem 1.25rem; border-bottom: 1px solid var(--divider);
}
.designer-body {
	display: flex; min-height: 380px;
}

/* Map area */
.designer-map-area {
	flex: 1; position: relative; min-height: 380px;
	background: #1a2235;
}
.designer-map-area #designerMap {
	position: absolute; inset: 0;
}
.designer-map-hint {
	position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%);
	background: rgba(0,0,0,0.7); color: #e2e8f0;
	padding: 0.35rem 0.9rem; border-radius: 20px;
	font-size: 0.72rem; white-space: nowrap; z-index: 10;
	pointer-events: none; opacity: 0.85;
}

/* Sidebar */
.designer-sidebar {
	width: 260px; flex-shrink: 0;
	border-left: 1px solid var(--divider);
	padding: 1rem; display: flex; flex-direction: column; gap: 1rem;
	overflow-y: auto; max-height: 420px;
}

/* Metrics */
.designer-metrics { display: flex; flex-direction: column; gap: 0.35rem; }
.designer-metric-row {
	display: flex; justify-content: space-between; align-items: center;
	padding: 0.4rem 0.65rem; border-radius: 8px; font-size: 0.85rem;
}
.designer-metric-row.highlight {
	background: rgba(13,148,136,0.08); border: 1px solid rgba(13,148,136,0.15);
}
.dm-label { color: var(--text2); font-size: 0.8rem; }
.dm-value { font-weight: 700; color: var(--text); font-size: 0.95rem; }
.designer-metric-row.highlight .dm-value { color: var(--accent); }

/* Presets */
.designer-presets-label {
	display: block; font-size: 0.75rem; font-weight: 600;
	color: var(--text2); text-transform: uppercase; letter-spacing: 0.04em;
	margin-bottom: 0.4rem;
}
.designer-preset-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem; }
.designer-preset-btn {
	padding: 0.45rem 0.5rem; border-radius: 8px; border: 1px solid var(--input-border);
	background: var(--card); color: var(--text); font-size: 0.78rem; font-weight: 600;
	cursor: pointer; transition: all 0.15s; font-family: inherit; text-align: center;
}
.designer-preset-btn:hover {
	border-color: var(--accent); color: var(--accent); background: rgba(13,148,136,0.05);
}
.designer-preset-btn.danger { color: var(--warn); border-color: rgba(239,68,68,0.25); }
.designer-preset-btn.danger:hover { border-color: var(--warn); background: rgba(239,68,68,0.05); }
.designer-preset-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }

/* Irradiance heatmap controls */
.designer-irradiance {
	margin-top: 0.8rem; padding-top: 0.8rem;
	border-top: 1px solid var(--divider);
}
.irr-toggle-row {
	display: flex; align-items: center; justify-content: space-between;
	margin-bottom: 0.35rem;
}
.irr-label { font-size: 0.78rem; font-weight: 600; color: var(--text); }
.irr-sub { font-size: 0.65rem; color: var(--text2); margin-bottom: 0.4rem; line-height: 1.4; }
.toggle-switch {
	position: relative; width: 38px; height: 20px;
	background: var(--card-border); border: 1px solid var(--card-border);
	border-radius: 20px; cursor: pointer; flex-shrink: 0;
	transition: background 0.2s, border-color 0.2s;
}
.toggle-switch.on { background: var(--accent); border-color: var(--accent); }
.toggle-knob {
	position: absolute; top: 2px; left: 2px;
	width: 14px; height: 14px; background: #fff;
	border-radius: 50%; transition: transform 0.2s;
}
.toggle-switch.on .toggle-knob { transform: translateX(18px); }
.irr-slider-row { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.35rem; }
.irr-slider-row label { font-size: 0.65rem; color: var(--text2); flex-shrink: 0; }
#irr-opacity {
	flex: 1; -webkit-appearance: none; appearance: none;
	height: 4px; background: var(--card-border); border-radius: 4px; outline: none;
}
#irr-opacity::-webkit-slider-thumb {
	-webkit-appearance: none; appearance: none;
	width: 14px; height: 14px; border-radius: 50%;
	background: var(--accent); cursor: pointer;
	box-shadow: 0 0 6px rgba(20,184,166,0.4);
}
.irr-legend {
	display: flex; align-items: center; gap: 0.4rem; margin-top: 0.45rem;
}
.irr-legend-bar {
	flex: 1; height: 8px; border-radius: 4px;
	background: linear-gradient(90deg, #1e3a5f, #2563eb, #14b8a6, #4ade80, #facc15, #f97316, #ef4444);
}
.irr-legend-lo, .irr-legend-hi {
	font-size: 0.58rem; color: var(--text2); flex-shrink: 0;
}
.irr-loading { font-size: 0.7rem; color: var(--text2); text-align: center; padding: 0.4rem 0; }

/* Custom panel picker grid */
.custom-panel-grid {
	display: grid; grid-template-columns: repeat(auto-fill, minmax(28px, 1fr));
	gap: 3px; max-height: 160px; overflow-y: auto; padding: 0.3rem;
}
.custom-panel-cell {
	width: 28px; height: 28px; border-radius: 4px;
	border: 1px solid var(--card-border); cursor: pointer;
	display: flex; align-items: center; justify-content: center;
	font-size: 0.55rem; font-weight: 600; color: var(--text2);
	transition: all 0.15s;
}
.custom-panel-cell:hover { border-color: var(--accent); background: rgba(20,184,166,0.08); }
.custom-panel-cell.active {
	background: var(--accent); color: #fff; border-color: var(--accent);
	box-shadow: 0 0 6px rgba(20,184,166,0.3);
}

/* Battery visualization */
.battery-viz-wrap {
	margin-top: 0.75rem; padding-top: 0.6rem;
	border-top: 1px solid var(--divider);
}
.battery-viz-label {
	font-size: 0.72rem; font-weight: 600; color: var(--text2);
	margin-bottom: 0.5rem; text-transform: uppercase; letter-spacing: 0.05em;
}
.battery-viz {
	display: flex; gap: 0.5rem; flex-wrap: wrap; justify-content: center;
	padding: 0.6rem; background: var(--card); border-radius: 8px;
	border: 1px solid var(--card-border); min-height: 60px;
}
.battery-unit {
	display: flex; flex-direction: column; align-items: center; gap: 0.2rem;
}
.battery-icon {
	width: 36px; height: 56px; border-radius: 6px;
	background: linear-gradient(180deg, var(--accent) 0%, rgba(20,184,166,0.6) 100%);
	border: 2px solid var(--accent);
	position: relative; display: flex; align-items: center; justify-content: center;
}
.battery-icon::before {
	content: ''; position: absolute; top: -4px; left: 50%; transform: translateX(-50%);
	width: 14px; height: 4px; background: var(--accent); border-radius: 2px 2px 0 0;
}
.battery-icon svg { width: 16px; height: 16px; color: #fff; }
.battery-unit-label { font-size: 0.55rem; color: var(--text2); font-weight: 600; }

/* Dark theme overrides for designer embedded in light screen */
[data-theme="light"] .designer-sidebar {
	background: #FAFBFC;
}
[data-theme="light"] .designer-metric-row.highlight {
	background: rgba(13,148,136,0.06);
}

/* Mobile responsive */
@media (max-width: 768px) {
	.designer-body { flex-direction: column; }
	.designer-sidebar {
		width: 100%; border-left: none; border-top: 1px solid var(--divider);
		max-height: none; flex-shrink: 0;
	}
	.designer-map-area { min-height: 280px; }
}

/* Panel overlay SVG on static mode */
.designer-map-area .panel-overlay-svg {
	position: absolute; inset: 0; width: 100%; height: 100%; z-index: 5;
}