/* Consumer-only bridge for the existing Rails/Turbo views. Admin layouts never load
   these styles. Keep state classes, visibility utilities, and validation colors intact. */
.consumer-app {
  --background: 0 0% 100%;
  --foreground: 224.21052632 76.00000000% 4.90196078%;
  --card: 0 0% 100%;
  --card-foreground: 224.21052632 76.00000000% 4.90196078%;
  --popover: 0 0% 100%;
  --popover-foreground: 224.21052632 76.00000000% 4.90196078%;
  --primary: 0 0% 9%;
  --primary-foreground: 0 0% 100%;
  --secondary: 0 0% 95%;
  --secondary-foreground: 217.05882353 14.16666667% 47.05882353%;
  --muted: 0 0% 95%;
  --muted-foreground: 217.05882353 14.16666667% 47.05882353%;
  --accent: 0 0% 94%;
  --accent-foreground: 224.21052632 76.00000000% 4.90196078%;
  --border: 0 0% 87%;
  --input: 0 0% 87%;
  --ring: 0 0% 9%;
  min-width: 320px;
}
.consumer-app #main-content { display: block; }
.consumer-app :is(h1, h2, h3, h4) { letter-spacing: -.02em; color: var(--ink); }
.consumer-app :is(a, button, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}
.consumer-app :is(button, input[type="submit"]):disabled { cursor: not-allowed; opacity: .5; }
.consumer-app :is(#customer-form, #how-it-works, #why-dwellquote, #contact, .blog-content [id]) { scroll-margin-top: 120px; }
.consumer-app .max-w-7xl { max-width: 1180px; }
.consumer-app .container { margin-inline: auto; padding-inline: 24px; }
.consumer-app .min-h-screen { min-height: calc(100svh - 102px); padding-block: 40px 64px; }
.consumer-app :is(.bg-gray-50, .bg-indigo-50, .bg-blue-50) { background-color: var(--bg); }
.consumer-app :is(.bg-blue-100, .bg-muted) { background-color: var(--highlight); }
.consumer-app :is(.text-gray-900, .text-blue-600, .text-blue-700, .text-blue-900) { color: var(--ink); }
.consumer-app :is(.text-gray-600, .text-gray-700) { color: var(--ink-soft); }
.consumer-app :is(.text-gray-400, .text-gray-500) { color: var(--ink-faint); }
.consumer-app :is(.border-gray-100, .border-gray-200, .border-gray-300, .border-blue-200) { border-color: var(--line); }
.consumer-app :is(.bg-blue-600, .bg-blue-700) { background-color: var(--dq-accent); color: white; }
.consumer-app :is(.hover\:bg-blue-700, .hover\:bg-blue-600):hover { background-color: #000; }
.consumer-app :is(.hover\:text-blue-700, .hover\:text-blue-600):hover { color: #000; }
.consumer-app .group:hover .group-hover\:text-blue-700 { color: #000; }
.consumer-app :is(.focus\:ring-blue-500, .focus\:border-blue-500):focus {
  --tw-ring-color: rgb(0 0 0 / .12);
  border-color: var(--ink);
}
.consumer-app .from-blue-50 { --tw-gradient-from: #ffffff; --tw-gradient-to: #ffffff; }
.consumer-app .to-indigo-100 { --tw-gradient-to: #ffffff; }
.consumer-app :is(.rounded-2xl, .rounded-xl) { border-radius: 10px; }
.consumer-app .shadow-xl { box-shadow: var(--shadow-md); }
.consumer-app .shadow-lg { box-shadow: var(--shadow-md); }
.consumer-app .bg-white.shadow-xl { padding: 32px; }
.consumer-app .form-card-head :is(h2, h3) { font-size: 20px; line-height: 1.3; font-weight: 700; margin: 0; }
.consumer-app .form-card-head p { font-size: 13px; line-height: 1.5; margin-top: 6px; }
.consumer-app .form-card form > :not([hidden]):not([type="hidden"]) ~ :not([hidden]):not([type="hidden"]) { margin-top: 18px; }
.consumer-app .form-card form > .pt-4 { padding-top: 0; }
.consumer-app form label { display: block; font-size: 14px; margin-bottom: 7px; color: var(--ink-soft); font-weight: 600; }
.consumer-app form :is(input:not([type="hidden"]):not([type="submit"]):not([type="checkbox"]):not([type="radio"]), select, textarea) {
  border-radius: 6px; font-family: inherit; font-size: 16px; padding: 11px 13px; min-width: 0;
}
.consumer-app form input[type="submit"].w-full { padding: 14px 20px; font-size: 18px; border-radius: 8px; }
.consumer-app form input[name="code"] { font-family: var(--mono); font-size: 26px; letter-spacing: .3em; }
.consumer-app .hero { padding-bottom: 0; }
.consumer-app .hero h1 { margin: 0; }
.consumer-app .section-head :is(h2,p), .consumer-app .card :is(h3,p) { margin-bottom: 0; }
.consumer-app .step-card h3, .consumer-app .feature-card h3 { margin-bottom: 8px; }
.consumer-app .feature-icon svg { width: 20px; height: 20px; }
.consumer-app .footer-brand img { width: auto; }
.consumer-app .site-footer h5 { margin-top: 0; }
.consumer-app .site-footer p { margin-bottom: 0; }
.consumer-app .hero-inner > *, .consumer-app .contact-grid > * { min-width: 0; }
/* Keep dense quote data readable, with fixed-width digits and subtle table rules. */
.consumer-app [data-controller="payment-toggle view-toggle"] { padding-block: 40px 64px; }
.consumer-app [role="tablist"] { border: 1px solid var(--line); height: auto; min-height: 44px; gap: 4px; }
.consumer-app [role="tab"][data-state="active"] { background: #fff; color: var(--ink); box-shadow: var(--shadow-sm); }
.consumer-app [data-payment-toggle-target$="Premium"] { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -.04em; }
.consumer-app table { font-size: 13px; font-variant-numeric: tabular-nums; }
.consumer-app th { font-family: var(--mono); font-size: 14px; letter-spacing: .02em; }
.consumer-app td { border-color: var(--line-soft); }

.consumer-app [data-view-toggle-target="listView"] .flex.pt-4 { flex-wrap: wrap; gap: 12px; }
.consumer-app [data-view-toggle-target="listView"] .flex.pt-4 > .ml-3 { margin-left: 0; }
.consumer-app [data-dialog-target="dialog"] { z-index: 200; }
.consumer-app [data-dialog-target="dialog"] > .fixed { border-radius: 10px; }
/* Editorial content retains its lists, tables, and heading hierarchy. */
.consumer-app .blog-content { color: var(--ink-soft); }
.consumer-app .blog-content :is(h1, h2, h3, h4, h5, h6, strong, a) { color: var(--ink); }
.consumer-app .blog-content blockquote { border-color: var(--line); background: var(--highlight); }
.consumer-app #toc-sidebar > .sticky { top: 126px; }
.consumer-app #reading-progress { z-index: 101; }
.consumer-app .blog-index .text-xs.text-gray-400 { font-family: var(--mono); font-size: 11px; }
.consumer-app .blog-index .group { box-shadow: var(--shadow-sm); }
.consumer-app .blog-index .group:hover { box-shadow: var(--shadow-md); }
.legal-body-wrap { max-width: 820px; margin: 0 auto; padding: 48px 24px 80px; overflow-wrap: anywhere; }
.consumer-app .legal-body-wrap [data-custom-class="link"],
.consumer-app .legal-body-wrap [data-custom-class="link"] * { color: #171717 !important; text-decoration: underline; }
.mobile-menu { display: none; }
.mobile-menu summary { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 6px; cursor: pointer; list-style: none; }
.mobile-menu summary::-webkit-details-marker { display: none; }
.mobile-menu summary span, .mobile-menu summary span::before, .mobile-menu summary span::after { display: block; width: 18px; height: 2px; background: var(--ink); position: relative; content: ""; }
.mobile-menu summary span::before { position: absolute; top: -6px; }
.mobile-menu summary span::after { position: absolute; top: 6px; }
.mobile-menu nav { position: absolute; top: 100%; left: 0; right: 0; padding: 16px 24px; border-bottom: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow-sm); }
.mobile-menu nav a { display: block; padding: 10px 0; font-size: 14px; }
@media (max-width: 1050px) {
  .consumer-app .nav-links { gap: 18px; }
  .consumer-app .nav-inner { gap: 16px; }
}
@media (max-width: 900px) {
  .consumer-app .nav-links { display: none; }
  .mobile-menu { display: block; }
}
@media (max-width: 720px) {
  .consumer-app .nav-inner { padding-inline: 20px; }
  .consumer-app .nav-right { gap: 10px; }
  .consumer-app .nav-right > .btn { padding: 10px 12px; font-size: 12px; }
  .consumer-app .nav-logo img { max-width: 145px; }
  .consumer-app :is(.form-card, .bg-white.shadow-xl, .story) { padding: 24px; }
  .consumer-app .form-card .grid-cols-2, .consumer-app form .grid-cols-2 { grid-template-columns: minmax(0, 1fr); }
  .consumer-app .hero-stats { gap: 12px; }
  .consumer-app .hero-stats strong { font-size: 23px; }
  .consumer-app .hero-stats span { font-size: 12px; }
  .consumer-app .section-head { margin-bottom: 32px; }
  .consumer-app .contact-grid { gap: 32px; }
  .consumer-app .min-h-screen { min-height: calc(100svh - 72px); padding-top: 24px; }
  .consumer-app :is(#customer-form, #how-it-works, #why-dwellquote, #contact, .blog-content [id]) { scroll-margin-top: 88px; }
  .consumer-app .container { padding-inline: 16px; }
  .consumer-app [data-view-toggle-target="listView"] button { white-space: normal; height: auto; min-height: 40px; }
  .consumer-app #toc-sidebar > .sticky { top: 88px; }
}
@media (prefers-reduced-motion: reduce) {
  .consumer-app { scroll-behavior: auto; }
  .consumer-app *, .consumer-app *::before, .consumer-app *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

.consumer-app .bg-green-100, .consumer-app .bg-green-200 { background-color: var(--highlight); }
.consumer-app .text-green-600 { color: var(--ink); }
.consumer-app .bg-green-600 { background-color: var(--dq-accent); }
.consumer-app .hover\:bg-green-700:hover { background-color: #000; }
.consumer-app .blog-index .blog-featured { grid-template-columns: 1.6fr 1fr; gap: 24px; }
.consumer-app .blog-index .blog-featured > .featured { grid-column: auto; }
.consumer-app .blog-index .blog-card h2 { font-size: 22px; }
.consumer-app .blog-index .blog-card h3 { font-size: 16px; }
.consumer-app .blog-index .blog-card .p-4 { padding: 22px; }
.consumer-app .blog-index .blog-side { gap: 24px; }
.consumer-app .blog-index .blog-grid { gap: 20px; }
@media (max-width: 980px) {
  .consumer-app .blog-index .blog-featured { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .consumer-app [data-dialog-target="dialog"] > .fixed { max-width: calc(100vw - 32px); }
}

.consumer-app thead, .consumer-app th { background-color: var(--bg-alt); }

/* Preserve live-site reading sizes where the proposal made a substantial reduction.
   Keep the proposal's spacing, typefaces, and near-equivalent headline sizes. */
.consumer-app .step-card h3, .consumer-app .feature-card h3 { font-size: 20px; }
.consumer-app .step-card p, .consumer-app .feature-card p,
.consumer-app .story-list li, .consumer-app .founder-card p,
.consumer-app .footer-col a { font-size: 16px; }
.consumer-app .section-head p { font-size: 18px; }
.consumer-app .about-head p { font-size: 18px; }
.consumer-app .footer-col h5 { font-size: 14px; }
@media (min-width: 768px) {
  .consumer-app .about-head p { font-size: 20px; }
}
.consumer-app .founder-card h4 { font-size: 20px; }
.consumer-app .story h3.story-title { font-size: 24px; }
.consumer-app .story h4 { font-size: 18px; }
.consumer-app .founders-head h3 { font-size: 30px; }
@media (min-width: 640px) {
  .consumer-app .story h3.story-title { font-size: 30px; }
}
@media (min-width: 1024px) {
  .consumer-app .step-card h3, .consumer-app .feature-card h3 { font-size: 24px; }
  .consumer-app .section-head p { font-size: 20px; }
  .consumer-app .founders-head h3 { font-size: 36px; }
}