:root {
      /* Sidebar - stays dark for visual contrast */
      --sidebar-bg: #171717;
      --sidebar-bg-hover: #212121;
      --sidebar-bg-active: #2a2a2a;
      --sidebar-border: #2e2e2e;
      --sidebar-text: #ececec;
      --sidebar-text-secondary: #9b9b9b;
      --sidebar-text-muted: #6b6b6b;
      
      /* Zoned brand colors */
      --accent: #c8102e;
      --accent-hover: #e01235;
      --accent-dim: rgba(200, 16, 46, 0.10);
      
      /* Chat panel - light / white theme */
      --chat-bg: #ffffff;
      --chat-bg-secondary: #f8f9fa;
      --chat-bg-tertiary: #f0f1f3;
      --chat-text: #1a1a2e;
      --chat-text-primary: #1a1a2e;
      --text-primary: #1a1a2e;
      --chat-text-secondary: #64748b;
      --chat-text-muted: #94a3b8;
      --chat-border: #e2e8f0;
      --accent-red: #c8102e;
      --landing-max-width: 1080px;
      --landing-vpad: clamp(8px, 3.4vh, 56px);
      --landing-hpad: clamp(8px, 2vw, 24px);
      --landing-gap: clamp(10px, 1.8vh, 24px);
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    html, body {
      height: 100%;
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
      background: var(--chat-bg);
      color: var(--chat-text);
      padding-bottom: env(safe-area-inset-bottom, 0px);
      overflow-x: hidden;
    }

    body::before {
      content: '';
      position: fixed;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      background: url('/parliament-bg.png') center 60% / 82% auto no-repeat;
      opacity: 0.35;
    }

    body > * {
      position: relative;
      z-index: 1;
    }

    h1, h2, h3, h4, h5, .logo {
      font-family: 'Sora', sans-serif;
      letter-spacing: -0.02em;
    }

    .site-header {
      position: sticky;
      top: 0;
      z-index: 1000;
      background: rgba(255, 255, 255, 0.96);
      backdrop-filter: blur(8px);
      border-bottom: 1px solid var(--chat-border);
      box-sizing: border-box;
      height: var(--site-header-height, 72px);
      min-height: var(--site-header-height, 72px);
      max-height: var(--site-header-height, 72px);
      overflow: hidden;
    }

    .site-header-inner {
      width: min(1180px, 100%);
      margin: 0 auto;
      padding: 11px 20px;
      height: 100%;
      min-height: 0;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }

    .site-brand {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      text-decoration: none;
      color: #0f172a;
      font-weight: 700;
      font-family: "Sora", sans-serif;
    }

    .site-brand svg {
      height: 48px;
      width: auto;
      max-height: calc(var(--site-header-height, 72px) - 24px);
      display: block;
    }

    .site-nav {
      display: flex;
      align-items: center;
      gap: 4px;
      justify-content: flex-end;
    }

    .site-nav-link {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      text-decoration: none;
      color: #374151;
      padding: 9px 12px;
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      transition: all 0.2s ease;
      border-radius: 8px;
    }

    .site-nav-link.report-link {
      color: #c8102e;
      font-size: 13px;
      font-weight: 800;
    }

    .site-nav-link:hover {
      background: #f3f4f6;
      color: #111827;
    }

    .site-nav-link.report-link:hover {
      color: #a70f27;
    }

    .site-nav-link.primary {
      color: #ffffff;
      background: linear-gradient(135deg, #c8102e 0%, #a70f27 100%);
      text-transform: none;
      letter-spacing: 0;
      font-size: 16px;
      font-weight: 700;
      padding: 10px 18px;
      border-radius: 8px;
      box-shadow: 0 4px 12px rgba(200, 16, 46, 0.22);
    }

    .site-nav-link.primary:hover {
      filter: brightness(1.02);
      color: #ffffff;
    }

    .mobile-nav-toggle {
      display: none;
      width: 40px;
      height: 40px;
      border: 1px solid #e5e7eb;
      border-radius: 10px;
      background: #ffffff;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      gap: 4px;
      cursor: pointer;
      transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }

    .mobile-nav-toggle:hover {
      border-color: #cbd5e1;
    }

    .mobile-nav-toggle span {
      display: block;
      width: 16px;
      height: 2px;
      border-radius: 999px;
      background: #334155;
      transition: transform 0.2s ease, opacity 0.2s ease;
    }

    .site-header.mobile-nav-open .mobile-nav-toggle {
      border-color: #cbd5e1;
      box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.06);
    }

    .site-header.mobile-nav-open .mobile-nav-toggle span:nth-child(1) {
      transform: translateY(6px) rotate(45deg);
    }

    .site-header.mobile-nav-open .mobile-nav-toggle span:nth-child(2) {
      opacity: 0;
    }

    .site-header.mobile-nav-open .mobile-nav-toggle span:nth-child(3) {
      transform: translateY(-6px) rotate(-45deg);
    }

    /* Main layout */
    .main-layout {
      display: flex;
      height: calc(100vh - var(--site-header-height, 72px));
      height: calc(100dvh - var(--site-header-height, 72px));
    }

    /* Ottawa shell: sidebar is fully removed from UI */
    .sidebar,
    .sidebar-backdrop,
    .sidebar-open-btn {
      display: none !important;
    }

    .main-layout {
      display: block;
      width: 100%;
      height: auto;
      min-height: calc(100vh - var(--site-header-height, 72px));
      min-height: calc(100dvh - var(--site-header-height, 72px));
    }

    .chat-panel {
      width: 100%;
      max-width: none;
    }

    @media (max-width: 768px) {
      .site-header:not(.mobile-nav-open) {
        height: var(--site-header-height, 58px);
        min-height: var(--site-header-height, 58px);
        max-height: var(--site-header-height, 58px);
      }

      .site-header.mobile-nav-open {
        height: auto;
        max-height: none;
        min-height: var(--site-header-height, 58px);
        overflow: visible;
      }

      .site-header-inner {
        padding: 8px 12px;
        align-items: center;
        gap: 8px;
        position: relative;
        flex-wrap: wrap;
      }

      .site-brand svg {
        height: 36px;
        max-height: calc(var(--site-header-height, 58px) - 20px);
      }

      .mobile-nav-toggle {
        display: inline-flex;
      }

      .site-nav {
        width: 100%;
        order: 3;
        justify-content: flex-start;
        align-items: stretch;
        flex-direction: column;
        gap: 6px;
        margin-top: 0;
        padding: 0 8px;
        border: 1px solid transparent;
        border-radius: 12px;
        background: #ffffff;
        max-height: 0;
        opacity: 0;
        overflow: hidden;
        transform: translateY(-8px);
        pointer-events: none;
        transition: max-height 0.25s ease, opacity 0.2s ease, transform 0.2s ease, padding 0.2s ease, border-color 0.2s ease;
      }

      .site-header.mobile-nav-open .site-nav {
        max-height: 420px;
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
        padding: 10px 8px;
        border-color: #e5e7eb;
      }

      .site-nav-link {
        width: 100%;
        justify-content: flex-start;
        font-size: 13px;
        padding: 10px 12px;
        border-radius: 8px;
      }

      .site-nav-link.primary {
        justify-content: center;
        font-size: 15px;
        padding: 11px 14px;
      }
    }

    /* ===== SIDEBAR - ChatGPT Style (Pushes content) ===== */
    .sidebar {
      width: 390px;
      background: var(--sidebar-bg);
      border-right: 1px solid var(--sidebar-border);
      display: flex;
      flex-direction: column;
      flex-shrink: 0;
      color: var(--sidebar-text);
      transition: width 0.2s ease, min-width 0.2s ease, height 0.3s ease;
      position: relative;
      z-index: 50; /* Below the footer map so map shows on top */
    }
    
    /* Shrink sidebar when footer map is visible */
    .sidebar.has-footer-map {
      height: calc(100vh - 350px);
      height: calc(100dvh - 350px);
    }
    
    .sidebar.collapsed {
      width: 0;
      min-width: 0;
      overflow: hidden;
      border-right: none;
    }
    
    /* Sidebar Header */
    .sidebar-header {
      padding: 12px;
      border-bottom: 1px solid var(--sidebar-border);
      display: flex;
      align-items: center;
      gap: 8px;
    }
    
    /* Close sidebar button - inside header */
    .sidebar-close-btn {
      width: 36px;
      height: 36px;
      flex-shrink: 0;
      background: transparent;
      border: none;
      border-radius: 8px;
      color: var(--sidebar-text-secondary);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.15s ease;
    }
    
    .sidebar-close-btn:hover {
      background: var(--sidebar-bg-hover);
      color: var(--sidebar-text);
    }
    
    .sidebar-close-btn svg {
      width: 20px;
      height: 20px;
    }
    
    /* Open sidebar button - in chat header, visible when collapsed */
    .sidebar-open-btn {
      position: fixed;
      top: 16px;
      left: 16px;
      width: 40px;
      height: 40px;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 10px;
      color: #64748b;
      cursor: pointer;
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 1000;
      transition: all 0.2s ease;
      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
    }
    
    .sidebar-open-btn:hover {
      background: #f1f5f9;
      color: #1a1a2e;
      transform: scale(1.05);
    }
    
    .sidebar-open-btn svg {
      width: 20px;
      height: 20px;
    }
    
    /* Show open button when sidebar is collapsed */
    .sidebar.collapsed ~ .chat-panel .sidebar-open-btn,
    body.sidebar-collapsed .sidebar-open-btn {
      display: flex;
    }

    .new-chat-btn {
      width: 100%;
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 12px;
      background: transparent;
      border: 1px solid var(--sidebar-border);
      border-radius: 8px;
      color: var(--sidebar-text);
      font-size: 14px;
      font-weight: 500;
      cursor: pointer;
      transition: background 0.15s;
    }

    .new-chat-btn:hover {
      background: var(--sidebar-bg-hover);
    }

    .new-chat-btn svg {
      width: 18px;
      height: 18px;
      opacity: 0.9;
    }

    /* Sidebar Nav/Tabs */
    .sidebar-nav {
      padding: 8px;
      border-bottom: 1px solid var(--sidebar-border);
    }

    .sidebar-tabs {
      display: flex;
      gap: 4px;
      background: var(--sidebar-bg-hover);
      padding: 4px;
      border-radius: 8px;
    }

    .sidebar-tab {
      flex: 1;
      padding: 8px 12px;
      background: transparent;
      border: none;
      border-radius: 6px;
      color: var(--sidebar-text-secondary);
      font-size: 13px;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.15s;
    }

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

    .sidebar-tab.active {
      background: var(--accent);
      color: white;
    }

    /* ===== CONTRACTOR PANEL ===== */
    .contractor-panel {
      text-align: center;
      padding: 24px 20px 20px;
    }
    .contractor-connected-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: rgba(34, 197, 94, 0.12);
      border: 1px solid rgba(34, 197, 94, 0.3);
      color: #22c55e;
      font-size: 12px;
      font-weight: 600;
      padding: 4px 12px;
      border-radius: 20px;
      margin-bottom: 16px;
    }
    .contractor-logo-wrap {
      margin-bottom: 14px;
    }
    .contractor-logo-img {
      max-width: 180px;
      max-height: 64px;
      object-fit: contain;
      border-radius: 8px;
      background: rgba(255,255,255,0.95);
      padding: 8px 12px;
    }
    .contractor-company {
      font-size: 18px;
      font-weight: 700;
      color: var(--sidebar-text, #fff);
      margin: 0 0 4px;
    }
    .contractor-contact-name {
      font-size: 13px;
      color: var(--sidebar-text-secondary, rgba(255,255,255,0.5));
      margin: 0 0 20px;
    }
    .contractor-report-sent {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      background: rgba(34, 197, 94, 0.08);
      border: 1px solid rgba(34, 197, 94, 0.2);
      border-radius: 10px;
      padding: 10px 14px;
      margin-bottom: 16px;
      color: rgba(34, 197, 94, 0.85);
      font-size: 12px;
      font-weight: 500;
      line-height: 1.4;
    }
    .contractor-book-row {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      padding: 10px 14px;
      border: 1px solid #e2e8f0;
      border-radius: 14px;
      background: rgba(255, 255, 255, 0.96);
      box-sizing: border-box;
      margin: 0 auto 10px;
    }
    .contractor-panel-logo-link {
      display: inline-flex;
      align-items: center;
      flex: 0 0 auto;
      min-width: 0;
      text-decoration: none;
    }
    .contractor-panel-logo {
      height: 33px;
      max-width: 150px;
      width: auto;
      flex-shrink: 1;
      object-fit: contain;
    }
    .contractor-book-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      flex: 0 0 auto;
      padding: 12px 16px;
      background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
      color: #fff;
      border: none;
      border-radius: 10px;
      font-size: 14px;
      font-weight: 600;
      text-decoration: none;
      cursor: pointer;
      transition: all 0.2s ease;
      box-shadow: 0 2px 8px rgba(34, 197, 94, 0.25);
    }
    .contractor-book-btn:hover {
      transform: translateY(-1px);
      box-shadow: 0 4px 16px rgba(34, 197, 94, 0.35);
    }
    .contractor-website-link {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      padding: 10px 16px;
      background: var(--sidebar-bg-hover, rgba(255,255,255,0.06));
      border: 1px solid rgba(255,255,255,0.1);
      border-radius: 10px;
      color: var(--sidebar-text-secondary, rgba(255,255,255,0.6));
      font-size: 13px;
      font-weight: 500;
      text-decoration: none;
      transition: all 0.2s ease;
    }
    .contractor-website-link:hover {
      background: rgba(255,255,255,0.1);
      color: var(--sidebar-text, #fff);
    }

    /* Sidebar Content Area */
    .sidebar-body {
      flex: 1;
      overflow-y: auto;
      padding: 8px;
      -webkit-overflow-scrolling: touch;
      overscroll-behavior: contain;
    }

    .sidebar-body::-webkit-scrollbar {
      width: 6px;
    }

    .sidebar-body::-webkit-scrollbar-track {
      background: transparent;
    }

    .sidebar-body::-webkit-scrollbar-thumb {
      background: var(--sidebar-border);
      border-radius: 3px;
    }

    /* Placeholder State, condensed "What is Zoned?" */
    .sidebar-placeholder {
      display: flex;
      flex-direction: column;
      height: 100%;
      padding: 20px 16px;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
    }

    .sidebar-placeholder-icon {
      width: 48px;
      height: 48px;
      margin-bottom: 16px;
      opacity: 0.4;
      display: none;
    }

    .sidebar-placeholder-text {
      font-size: 13px;
      line-height: 1.5;
      color: var(--sidebar-text-muted);
      display: none;
    }

    /* Condensed about section in placeholder */
    .sidebar-about-condensed {
      flex: 1;
    }
    .sidebar-about-condensed .sac-logo {
      display: block;
      width: 120px;
      margin: 0 auto 18px;
      opacity: 0.95;
    }
    .sidebar-about-condensed .sac-heading {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 10px;
    }
    .sidebar-about-condensed .sac-heading-icon-link {
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }
    .sidebar-about-condensed .sac-heading-icon-img {
      flex-shrink: 0;
      width: 36px;
      height: 36px;
      border-radius: 8px;
    }
    .sidebar-about-condensed .sac-heading h3 {
      font-family: 'Sora', sans-serif;
      font-size: 15px;
      font-weight: 700;
      color: #fff;
      margin: 0;
      line-height: 1.3;
    }
    .sidebar-about-condensed .sac-tagline {
      font-size: 12px;
      color: rgba(255, 255, 255, 0.55);
      line-height: 1.5;
      margin: 0 0 16px;
    }
    .sidebar-about-condensed .sac-features {
      display: flex;
      flex-direction: column;
      gap: 2px;
      margin-bottom: 16px;
    }
    .sidebar-about-condensed .sac-feature {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      padding: 10px;
      border-radius: 8px;
      transition: background 0.15s ease;
    }
    .sidebar-about-condensed .sac-feature:hover {
      background: rgba(255, 255, 255, 0.04);
    }
    .sidebar-about-condensed .sac-feature-icon {
      flex-shrink: 0;
      width: 28px;
      height: 28px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(200, 16, 46, 0.1);
      border-radius: 7px;
      color: var(--accent-red, #c8102e);
      font-size: 13px;
    }
    .sidebar-about-condensed .sac-feature-text {
      min-width: 0;
    }
    .sidebar-about-condensed .sac-feature-text strong {
      display: block;
      font-size: 12px;
      font-weight: 600;
      color: rgba(255, 255, 255, 0.9);
      margin-bottom: 1px;
    }
    .sidebar-about-condensed .sac-feature-text span {
      font-size: 11px;
      line-height: 1.4;
      color: rgba(255, 255, 255, 0.4);
    }
    .sidebar-about-condensed .sac-cta-hint {
      background: rgba(200, 16, 46, 0.08);
      border: 1px solid rgba(200, 16, 46, 0.15);
      border-radius: 8px;
      padding: 10px 12px;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .sidebar-about-condensed .sac-cta-hint svg {
      flex-shrink: 0;
      width: 16px;
      height: 16px;
      color: var(--accent-red, #c8102e);
      opacity: 0.7;
    }
    .sidebar-about-condensed .sac-cta-hint span {
      font-size: 12px;
      color: rgba(255, 255, 255, 0.55);
      line-height: 1.4;
    }
    .sidebar-about-condensed .sac-cta-hint strong {
      color: rgba(255, 255, 255, 0.85);
    }

    /* Tab Content */
    .tab-content {
      display: none;
    }

    .tab-content.active {
      display: block;
    }

    /* Zone Info Section */
    .zone-card {
      background: var(--sidebar-bg-hover);
      border-radius: 10px;
      padding: 16px;
      margin-bottom: 8px;
    }

    .zone-header {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 12px;
    }

    .zone-badge {
      background: var(--accent);
      color: white;
      padding: 8px 14px;
      border-radius: 6px;
      font-family: 'JetBrains Mono', monospace;
      font-size: 15px;
      font-weight: 700;
      letter-spacing: 0.5px;
    }

    .zone-info {
      flex: 1;
      min-width: 0;
    }

    .zone-name {
      font-size: 14px;
      font-weight: 600;
      color: var(--sidebar-text);
      margin-bottom: 2px;
    }

    .zone-desc {
      font-size: 12px;
      color: var(--sidebar-text-secondary);
      line-height: 1.4;
    }

    /* Info Sections */
    .info-section {
      margin-bottom: 8px;
    }

    .info-section-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px 12px;
      background: var(--sidebar-bg-hover);
      border-radius: 8px;
      cursor: pointer;
      transition: background 0.15s;
    }

    .info-section-header:hover {
      background: var(--sidebar-bg-active);
    }

    .info-section-title {
      font-size: 13px;
      font-weight: 500;
      color: var(--sidebar-text-secondary);
    }

    .info-section-toggle {
      color: var(--sidebar-text-muted);
      font-size: 10px;
      transition: transform 0.2s;
    }

    .info-section.collapsed .info-section-toggle {
      transform: rotate(-90deg);
    }

    .info-section-body {
      padding: 12px;
      background: var(--sidebar-bg-hover);
      border-radius: 0 0 8px 8px;
      margin-top: -4px;
    }

    .info-section.collapsed .info-section-body {
      display: none;
    }

    /* Metrics Grid */
    .metrics-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
    }

    .metric-item {
      background: var(--sidebar-bg);
      padding: 10px 12px;
      border-radius: 6px;
    }

    .metric-label {
      font-size: 11px;
      color: var(--sidebar-text-muted);
      margin-bottom: 4px;
      text-transform: uppercase;
      letter-spacing: 0.3px;
    }

    .metric-value {
      font-size: 15px;
      font-weight: 600;
      color: var(--sidebar-text);
      font-family: 'JetBrains Mono', monospace;
    }

    /* Setbacks Grid */
    .setbacks-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 6px;
    }

    .setback-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 8px 10px;
      background: var(--sidebar-bg);
      border-radius: 6px;
    }

    .setback-label {
      font-size: 12px;
      color: var(--sidebar-text-secondary);
    }

    .setback-value {
      font-size: 13px;
      font-weight: 600;
      color: var(--sidebar-text);
      font-family: 'JetBrains Mono', monospace;
    }

    /* Project Buttons */
    .projects-section {
      margin-bottom: 16px;
    }

    .projects-title {
      font-size: 11px;
      font-weight: 600;
      color: var(--sidebar-text-muted);
      text-transform: uppercase;
      letter-spacing: 0.5px;
      padding: 8px 4px;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .projects-title svg {
      width: 14px;
      height: 14px;
      opacity: 0.6;
    }

    .projects-grid {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }

    .project-btn {
      padding: 8px 12px;
      background: var(--sidebar-bg-hover);
      border: 1px solid transparent;
      border-radius: 6px;
      color: var(--sidebar-text-secondary);
      font-size: 12px;
      cursor: pointer;
      transition: all 0.15s;
    }

    .project-btn:hover {
      background: var(--sidebar-bg-active);
      color: var(--sidebar-text);
      border-color: var(--sidebar-border);
    }

    /* Sidebar Footer */
    .sidebar-footer {
      padding: 12px;
      border-top: 1px solid var(--sidebar-border);
    }

    .sidebar-footer-links {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      justify-content: center;
    }

    .sidebar-footer a {
      font-size: 11px;
      color: var(--sidebar-text-muted);
      text-decoration: none;
      transition: color 0.15s;
    }

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

    .sidebar-footer .divider {
      color: var(--sidebar-border);
    }

    /* What is Zoned button, hidden while placeholder is visible (pre-search) */
    .sidebar-about-btn-wrapper {
      padding: 8px 12px 0;
    }
    .sidebar-body:has(#sidebarPlaceholder:not([style*="display: none"])) ~ .sidebar-about-btn-wrapper {
      display: none;
    }
    .sidebar-about-btn {
      display: flex;
      align-items: center;
      gap: 8px;
      width: 100%;
      padding: 10px 14px;
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 10px;
      color: var(--sidebar-text-muted);
      font-size: 12px;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.15s;
    }
    .sidebar-about-btn:hover {
      background: rgba(255, 255, 255, 0.08);
      border-color: rgba(255, 255, 255, 0.15);
      color: var(--sidebar-text);
    }
    .sidebar-about-btn svg {
      opacity: 0.5;
      flex-shrink: 0;
    }
    
    /* Sidebar inline page panel */
    .sidebar-page-panel {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: var(--sidebar-bg, #1a1a2e);
      z-index: 100;
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }
    .sidebar-page-header {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 14px 14px 12px;
      border-bottom: 1px solid var(--sidebar-border);
      flex-shrink: 0;
    }
    .sidebar-page-back {
      background: none;
      border: none;
      color: var(--sidebar-text);
      cursor: pointer;
      padding: 4px;
      border-radius: 6px;
      display: flex;
      align-items: center;
      transition: background 0.15s;
    }
    .sidebar-page-back:hover {
      background: rgba(255, 255, 255, 0.08);
    }
    .sidebar-page-title {
      font-size: 14px;
      font-weight: 600;
      color: var(--sidebar-text);
    }
    .sidebar-page-body {
      flex: 1;
      overflow-y: auto;
      padding: 16px;
      color: rgba(255, 255, 255, 0.75);
      font-size: 13px;
      line-height: 1.65;
    }
    .sidebar-page-body h2 {
      font-size: 14px;
      font-weight: 600;
      color: var(--sidebar-text, #fff);
      margin: 20px 0 8px;
    }
    .sidebar-page-body h2:first-child {
      margin-top: 0;
    }
    .sidebar-page-body p {
      margin-bottom: 10px;
      color: rgba(255, 255, 255, 0.65);
    }
    .sidebar-page-body ul {
      padding-left: 18px;
      margin-bottom: 10px;
    }
    .sidebar-page-body li {
      margin-bottom: 4px;
      color: rgba(255, 255, 255, 0.65);
    }
    .sidebar-page-body strong {
      color: rgba(255, 255, 255, 0.85);
    }
    .sidebar-page-body a {
      color: var(--accent-red, #c8102e);
    }
    .sidebar-page-body .credit-item {
      padding: 10px 12px;
      margin-bottom: 8px;
      background: rgba(255, 255, 255, 0.03);
      border-radius: 8px;
      border-left: 3px solid var(--accent-red, #c8102e);
    }
    .sidebar-page-body .credit-item h3 {
      font-size: 13px;
      font-weight: 600;
      color: rgba(255, 255, 255, 0.9);
      margin-bottom: 2px;
    }
    .sidebar-page-body .credit-item .license {
      font-size: 10px;
      color: rgba(255, 255, 255, 0.4);
      background: rgba(255, 255, 255, 0.05);
      padding: 1px 6px;
      border-radius: 3px;
      display: inline-block;
      margin-bottom: 4px;
    }
    .sidebar-page-body .credit-item p {
      font-size: 12px;
      margin-bottom: 4px;
    }
    .sidebar-page-body .credit-item a {
      font-size: 11px;
    }
    .sidebar-page-body .contact-card {
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 10px;
      padding: 14px;
      margin-top: 10px;
    }
    .sidebar-page-body .contact-item {
      display: flex;
      align-items: center;
      gap: 6px;
      margin-bottom: 6px;
      color: rgba(255, 255, 255, 0.65);
    }
    .sidebar-page-body .contact-item a {
      color: var(--accent-red, #c8102e);
    }
    .sidebar-page-body .last-updated {
      margin-top: 16px;
      padding-top: 10px;
      border-top: 1px solid rgba(255, 255, 255, 0.06);
      font-size: 11px;
      color: rgba(255, 255, 255, 0.3);
    }
    /* About page feature items */
    .sidebar-page-body .about-feature {
      display: flex;
      gap: 10px;
      padding: 10px 0;
      border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    }
    .sidebar-page-body .about-feature:last-child {
      border-bottom: none;
    }
    .sidebar-page-body .about-feature-icon {
      flex-shrink: 0;
      width: 32px;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(200, 16, 46, 0.1);
      border-radius: 8px;
      color: var(--accent-red, #c8102e);
    }
    .sidebar-page-body .about-feature-text strong {
      display: block;
      font-size: 13px;
      margin-bottom: 2px;
    }
    .sidebar-page-body .about-feature-text span {
      font-size: 12px;
      color: rgba(255, 255, 255, 0.5);
    }

    /* CTA Buttons - Exact match from map.html */
    .global-cta-wrapper {
      padding: 10px 12px;
      border-top: 1px solid var(--sidebar-border);
      display: flex;
      gap: 8px;
    }

    .global-cta-btn {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 12px 10px;
      border: none;
      border-radius: 8px;
      font-size: 12px;
      font-weight: 700;
      cursor: pointer;
      transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
      line-height: 1.2;
      text-align: center;
      letter-spacing: 0.01em;
    }

    .global-cta-btn:hover:not(:disabled) {
      transform: translateY(-2px);
    }

    .global-cta-btn:disabled {
      opacity: 0.5;
      cursor: not-allowed;
      box-shadow: none !important;
      background: #4b5563 !important;
      color: #9ca3af !important;
    }
    .global-cta-btn.loading {
      opacity: 0.5;
      cursor: wait;
      box-shadow: none !important;
      background: #4b5563 !important;
      color: #9ca3af !important;
      pointer-events: none;
    }

    /* Site Plan Button - Deep Teal with glow */
    .global-cta-btn.siteplan-btn {
      background: linear-gradient(135deg, #0d9488 0%, #0f766e 100%);
      color: white;
      box-shadow: 0 2px 8px rgba(13, 148, 136, 0.4), 0 0 0 1px rgba(13, 148, 136, 0.1);
    }

    .global-cta-btn.siteplan-btn:hover:not(:disabled) {
      background: linear-gradient(135deg, #14b8a6 0%, #0d9488 100%);
      box-shadow: 0 4px 16px rgba(13, 148, 136, 0.5), 0 0 20px rgba(13, 148, 136, 0.2);
    }

    /* Contractor Button - Vibrant Green with glow */
    .global-cta-btn.contractor-btn {
      background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
      color: white;
      box-shadow: 0 2px 8px rgba(34, 197, 94, 0.4), 0 0 0 1px rgba(34, 197, 94, 0.1);
    }

    .global-cta-btn.contractor-btn:hover {
      background: linear-gradient(135deg, #4ade80 0%, #22c55e 100%);
      box-shadow: 0 4px 16px rgba(34, 197, 94, 0.5), 0 0 20px rgba(34, 197, 94, 0.2);
    }

    /* ===== CHAT PANEL ===== */
    .chat-panel {
      flex: 1;
      display: flex;
      flex-direction: column;
      min-width: 0;
      background: var(--chat-bg);
      position: relative;
      overflow: hidden;
    }

    .chat-container {
      display: flex;
      flex-direction: column;
      height: 100%;
      max-width: 900px;
      margin: 0 auto;
      width: 100%;
      padding: 0 24px;
      transition: all 0.4s ease;
      position: relative; /* anchor for chat-loading-overlay */
    }

    .chat-header {
      display: none;
      padding: 10px 16px 8px;
      width: min(1180px, 100%);
      margin: 0 auto;
      flex-shrink: 0;
      background: transparent;
      position: relative;
      z-index: 1;
      flex-direction: column;
      align-items: stretch;
      gap: 8px;
    }

    .chat-header.has-controls {
      display: flex;
    }

    .chat-header::after {
      display: none;
    }

    .chat-header-controls {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      width: 100%;
      padding-top: 6px;
    }

    .chat-header .zoning-options-back-btn {
      width: auto;
      margin: 0;
      padding: 8px 14px;
      border-radius: 999px;
      font-size: 12px;
      letter-spacing: 0.01em;
      text-transform: none;
      border-color: #c9d3e4;
      background: #f8fafc;
    }

    .chat-messages {
      flex: 1;
      overflow-y: auto;
      padding: 16px;
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    /* Remove top whitespace when post-submit controls are visible */
    .chat-header.has-controls + .chat-messages {
      padding-top: 0;
      padding-bottom: 30px;
    }

    /* Centered welcome state - like ChatGPT */
    .chat-container.welcome-centered {
      justify-content: center;
    }

    .chat-container.welcome-centered .chat-messages {
      flex: 1;
      overflow-y: auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: clamp(8px, 1.8vh, 16px) clamp(10px, 2vw, 16px) 0;
    }

    .chat-container.welcome-centered .chat-input-area {
      flex: 0 0 auto;
      padding-top: 0;
      padding-bottom: 20px;
      max-width: 100%;
      margin: 0;
      width: 100%;
      max-height: 0;
      overflow: hidden;
      padding: 0 16px;
      opacity: 0;
      transition: max-height 0.4s ease, opacity 0.3s ease, padding 0.4s ease;
    }

    .chat-container.welcome-centered .chat-input-area.revealed {
      max-height: 200px;
      opacity: 1;
      padding: 0 16px 20px;
    }
    
    @media (max-width: 768px) {
      .chat-container.welcome-centered .chat-input-area.revealed {
        padding-bottom: 8px;
      }
    }

    /* ===== MODERN LIGHT LANDING PAGE ===== */

    .welcome-state {
      text-align: center;
      width: min(100%, var(--landing-max-width));
      margin: 0 auto;
      padding: var(--landing-vpad) var(--landing-hpad) clamp(10px, 2.4vh, 44px);
      position: relative;
      background: #ffffff;
      display: grid;
      grid-template-columns: 1fr;
      justify-items: center;
      row-gap: var(--landing-gap);
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
    }

    .welcome-state > * {
      position: relative;
      z-index: 1;
      min-width: 0;
    }

    .chat-container.welcome-centered .welcome-state {
      padding-top: clamp(6px, 3vh, 52px);
    }

    @media (max-width: 768px) {
      .chat-container.welcome-centered .welcome-state {
        padding-top: clamp(4px, 1.5vh, 16px);
      }
    }

    /* Compact mode: fully hidden, replaced by persistent .compact-chat-header bar */
    .welcome-state.compact {
      display: none !important;
    }

    /* Saved-report restore view: collapse the welcome-heading whitespace so the
       restore banner hangs directly from the site header. The normal
       welcome-state padding reserves room for the "Get Your Property Report"
       title, but in restore mode that title is hidden, the padding is
       wasted. The fresh-submit flow handles this by hiding welcome-state
       entirely (.compact), but the restore flow keeps welcome-state visible
       with the panel inside it, so we trim the padding via :has() instead. */
    .chat-container.welcome-centered .welcome-state:has(#restoreBanner) {
      padding-top: 0;
    }
    .chat-messages:has(#restoreBanner) {
      padding-top: 0;
    }

    /* ===== PERSISTENT COMPACT HEADER BAR ===== */
    /* Sits OUTSIDE .chat-messages so it can never scroll away */
    .compact-chat-header {
      display: none; /* hidden until chat starts */
      padding: 10px 24px 8px;
      background: var(--chat-bg);
      border-bottom: 1px solid var(--chat-border);
      flex-shrink: 0;
      z-index: 100;
    }
    .compact-chat-header.visible {
      display: block;
    }
    .compact-chat-header .compact-title {
      font-size: 15px;
      font-weight: 600;
      color: var(--chat-text-secondary);
      margin: 0 0 6px 0;
      line-height: 1.3;
    }
    /* (compact address row removed, address + zone shows inside the zoning panel) */
    /* Zoning panel when inside the chat messages area (scrolls with chat) */
    .chat-messages > .zoning-info-panel {
      margin: 0;
      border-radius: 0;
      flex-shrink: 0;
      width: 100%;
    }

    .chat-container.welcome-centered .welcome-title {
      font-size: clamp(30px, 5.1vw, 52px);
      margin-bottom: 0;
      max-width: 14ch;
      margin-left: auto;
      margin-right: auto;
      text-wrap: balance;
    }

    .chat-container.welcome-centered .welcome-subtitle {
      margin-bottom: 0;
      max-width: 34ch;
      margin-left: auto;
      margin-right: auto;
      text-wrap: balance;
    }

    /* ---- Title (hidden when initial "Get Your Property Report" - styling applied to nurture rotator instead) ---- */
    .welcome-state .welcome-title:not(.report-address-title) {
      display: none;
    }

    .welcome-title {
      font-size: clamp(28px, 4vw, 40px);
      font-weight: 800;
      margin-bottom: 0;
      color: #1a1a2e;
      line-height: 1.15;
      letter-spacing: -0.03em;
      animation: fadeSlideUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
      text-wrap: balance;
    }

    #welcomeTitle {
      white-space: normal;
      text-wrap: balance;
      overflow-wrap: anywhere;
      word-break: break-word;
      font-size: clamp(22px, 7.4vw, 52px);
      letter-spacing: -0.04em;
      max-width: min(100%, 22ch);
      margin-left: auto;
      margin-right: auto;
    }

    .welcome-title.report-address-title {
      font-size: clamp(12px, 2.3vw, 20px);
      letter-spacing: -0.02em;
      color: #0f172a;
      margin-bottom: 14px;
      white-space: normal;
      text-wrap: balance;
    }

    .welcome-title.report-address-title.report-address-title-awaiting-actions {
      opacity: 0;
      transform: translateY(6px);
    }

    .welcome-title.report-address-title.report-address-title-actions-ready {
      transition: opacity 0.36s ease, transform 0.36s ease;
    }

    .welcome-title.report-address-title.report-address-title-actions-ready.report-address-title-visible {
      opacity: 1;
      transform: translateY(0);
    }

    .nurture-rotator {
      position: relative;
      height: 32px;
      margin: 10px auto 16px;
      max-width: min(94%, 700px);
      overflow: hidden;
    }

    .nurture-track {
      display: flex;
      flex-direction: column;
      animation: nurtureTrackSlide 16s cubic-bezier(0.22, 1, 0.36, 1) infinite;
      will-change: transform;
    }

    .nurture-line {
      position: static;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 32px;
      min-height: 32px;
      color: #1a1a2e;
      font-size: clamp(18px, 2.8vw, 24px);
      font-weight: 800;
      letter-spacing: -0.03em;
      white-space: nowrap;
      opacity: 1;
      transform: none;
      line-height: 1.15;
    }

    .chat-container.welcome-centered .nurture-line {
      font-size: clamp(20px, 3.2vw, 28px);
    }

    /* Keyframe percentages are tuned for 5 .nurture-line children stacked in
       the track. Each -20% step scrolls the track up by exactly one line.
       Update both this keyframe AND nurtureTrackSlideMobile below when adding
       or removing lines in the HTML. */
    @keyframes nurtureTrackSlide {
      0%, 14%  { transform: translateY(0);    opacity: 1; }
      17%, 31% { transform: translateY(-20%); opacity: 1; }
      34%, 48% { transform: translateY(-40%); opacity: 1; }
      51%, 65% { transform: translateY(-60%); opacity: 1; }
      68%, 82% { transform: translateY(-80%); opacity: 1; }
      85%      { transform: translateY(-80%); opacity: 0; }
      88%      { transform: translateY(0);    opacity: 0; }
      91%      { transform: translateY(0);    opacity: 1; }
      95%, 100% { transform: translateY(0);   opacity: 1; }
    }

    @media (prefers-reduced-motion: reduce) {
      .nurture-track {
        animation: none;
      }
    }

    .welcome-subtitle {
      color: #64748b;
      font-size: clamp(14px, 1.4vw, 17px);
      margin-bottom: 0;
      max-width: min(62ch, 100%);
      margin-left: auto;
      margin-right: auto;
      line-height: clamp(1.45, 1.6vw, 1.65);
      font-weight: 400;
      animation: fadeSlideUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both;
      text-wrap: balance;
    }

    /* ---- Clean form card ---- */
    .lead-capture-form {
      width: min(100%, 760px);
      margin: 0 auto;
      text-align: left;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: clamp(12px, 1.6vw, 20px);
      padding: clamp(14px, 2.6vw, 44px) clamp(14px, 2.6vw, 44px) clamp(14px, 2.2vw, 40px);
      box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.06),
        0 8px 24px rgba(0, 0, 0, 0.04);
      animation: fadeSlideUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both;
    }

    .form-group {
      margin-bottom: clamp(10px, 1.8vh, 24px);
    }

    .form-row {
      display: grid;
      grid-template-columns: 1fr;
      gap: clamp(10px, 1.8vh, 24px);
      margin-bottom: 2px;
    }

    .form-row .form-group {
      margin-bottom: 0;
    }

    /* Single-column email field follows the name+phone form-row, which only
       has 2px margin-bottom. Without this top spacer the email label sits
       almost flush against the phone input. */
    .form-group.form-group--email {
      margin-top: clamp(14px, 2.2vh, 26px);
    }

    .form-label {
      display: block;
      font-size: clamp(11px, 1vw, 13px);
      font-weight: 600;
      color: #334155;
      margin-bottom: clamp(4px, 0.8vh, 8px);
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .form-label .required {
      color: #e8384f;
    }

    /* Ottawa funnel (/ottawa): hide project-interest + timeline labels (still exposed to SR via aria-labelledby) */
    body.ottawa-lead-form-minimal-labels .project-interest-label,
    body.ottawa-lead-form-minimal-labels .project-persona-label {
      position: absolute !important;
      width: 1px !important;
      height: 1px !important;
      padding: 0 !important;
      margin: -1px !important;
      overflow: hidden !important;
      clip: rect(0, 0, 0, 0) !important;
      clip-path: inset(50%) !important;
      white-space: nowrap !important;
      border: 0 !important;
    }

    .form-tip {
      font-weight: 400;
      font-size: 10px;
      color: #94a3b8;
      text-transform: none;
      letter-spacing: 0;
    }

    /* ---- Input fields ---- */
    .form-input, .form-select {
      width: 100%;
      padding: clamp(10px, 1.4vh, 14px) clamp(12px, 1.6vw, 18px);
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      background: #f8f9fa;
      color: #1a1a2e;
      font-size: clamp(14px, 1.2vw, 15px);
      font-family: 'Inter', sans-serif;
      transition: all 0.2s ease;
      box-sizing: border-box;
    }

    .form-input:hover, .form-select:hover {
      border-color: #cbd5e1;
      background: #f1f5f9;
    }

    .form-input:focus, .form-select:focus {
      outline: none;
      border-color: var(--accent);
      background: #ffffff;
      box-shadow: 0 0 0 3px rgba(200, 16, 46, 0.08);
    }

    .form-input::placeholder {
      color: #94a3b8;
      font-weight: 400;
    }

    .form-select {
      cursor: pointer;
      appearance: none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 16px center;
      padding-right: 40px;
    }

    .form-select option {
      background: #ffffff;
      color: #1a1a2e;
      padding: 12px;
    }

    /* ---- Project interest (Ottawa lead form): choice chips ---- */
    .project-interest-select-hidden {
      position: absolute !important;
      width: 1px !important;
      height: 1px !important;
      padding: 0 !important;
      margin: -1px !important;
      overflow: hidden !important;
      clip: rect(0, 0, 0, 0) !important;
      clip-path: inset(50%) !important;
      white-space: nowrap !important;
      border: 0 !important;
      opacity: 0;
      pointer-events: none;
    }

    .project-interest-grid {
      display: flex;
      flex-wrap: wrap;
      gap: 6px 8px;
      align-items: center;
      margin-top: 0;
    }

    .project-interest-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      box-sizing: border-box;
      padding: clamp(10px, 1.4vh, 14px) clamp(10px, 1.5vw, 14px);
      border-radius: 12px;
      border: 1px solid #e2e8f0;
      background: #f8f9fa;
      box-shadow: none;
      cursor: pointer;
      font-family: 'Inter', sans-serif;
      font-size: clamp(13px, 1.15vw, 15px);
      font-weight: 500;
      line-height: 1.25;
      color: #1a1a2e;
      text-align: center;
      max-width: 100%;
      transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
    }

    .project-interest-btn:hover {
      border-color: #cbd5e1;
      background: #f1f5f9;
    }

    .project-interest-btn:focus-visible {
      outline: none;
      border-color: var(--accent);
      box-shadow: 0 0 0 3px rgba(200, 16, 46, 0.08);
    }

    .project-interest-btn.is-selected {
      border-color: #c8102e;
      background: #fff5f5;
      color: #7f0d1f;
      font-weight: 600;
      box-shadow: 0 0 0 1px rgba(200, 16, 46, 0.2);
    }

    /* ── Prefetch: address loader overlay + chip qualification ─────── */
    .form-address-wrap {
      position: relative;
    }
    .form-address-wrap .form-input {
      padding-right: 44px;
    }
    .form-address-loader {
      position: absolute;
      right: 10px;
      top: 50%;
      transform: translateY(-50%);
      width: 26px;
      height: 26px;
      pointer-events: none;
    }
    .loader-maple--sm {
      width: 26px;
      height: 26px;
    }
    .form-address-ready {
      position: absolute;
      right: 12px;
      top: 50%;
      transform: translateY(-50%);
      font-size: 18px;
      color: #16a34a;
      font-weight: 700;
      line-height: 1;
      pointer-events: none;
    }
    .form-address-status {
      font-size: 12px;
      min-height: 0;
      margin-top: 4px;
      transition: opacity 0.2s;
    }
    .form-address-status:empty { display: none; }
    .form-address-status.loading { color: #64748b; }
    .form-address-status.ready { color: #16a34a; font-weight: 600; }

    /* Address selection visual states */
    .form-address-wrap .form-input.addr-needs-select,
    .form-address-wrap .form-input.addr-needs-select:focus {
      border-color: #fbbf24;
      box-shadow: 0 0 0 3px rgba(251,191,36,0.15);
    }
    .form-address-wrap .form-input.addr-confirmed,
    .form-address-wrap .form-input.addr-confirmed:focus {
      border-color: #34d399;
      box-shadow: 0 0 0 3px rgba(52,211,153,0.18);
    }
    .form-address-hint {
      display: none;
      align-items: center;
      gap: 4px;
      font-size: 12px;
      color: #d97706;
      margin-top: 4px;
      animation: addrHintIn 0.2s ease;
    }
    .form-address-hint.visible { display: flex; }
    @keyframes addrHintIn { from { opacity:0; transform:translateY(-2px); } to { opacity:1; transform:translateY(0); } }
    @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
    .form-input.is-prefetching {
      background-color: #f1f5f9;
      border-color: #cbd5e1;
      color: #94a3b8;
    }

    /* ── Buildable envelope inline preview ───────────────────────────── */
    .form-envelope-preview {
      position: relative;
      width: 100%;
      max-height: 0;
      margin: 0;
      overflow: hidden;
      border-radius: 14px;
      background: linear-gradient(135deg, #ecfdf5 0%, #ffffff 55%, #f4f4f5 100%);
      box-shadow: 0 1px 2px rgba(15,23,42,0.04), 0 0 0 1px rgba(15,23,42,0.04) inset;
      opacity: 0;
      transition: max-height 380ms cubic-bezier(0.22, 1, 0.36, 1),
                  opacity 300ms ease,
                  margin 300ms ease;
    }
    .form-envelope-preview[data-state="loading"],
    .form-envelope-preview[data-state="ready"] {
      max-height: 360px;
      opacity: 1;
      margin: 10px 0 6px;
    }
    .form-envelope-preview[data-state="loading"] .fep-canvas {
      background:
        radial-gradient(ellipse at center, rgba(16,185,129,0.09) 0%, rgba(16,185,129,0) 65%),
        linear-gradient(135deg, #f8fafc 0%, #ffffff 55%, #f0fdf4 100%);
    }
    @keyframes fepPulse { 0%,100% { opacity: 0.7; } 50% { opacity: 1; } }

    /* Futuristic "scanning" skeleton, shown while prefetch is in flight. */
    .fep-skel {
      width: 100%;
      height: 100%;
      display: block;
      animation: fep-skel-enter 300ms ease-out;
    }
    @keyframes fep-skel-enter {
      from { opacity: 0; transform: scale(0.98); }
      to   { opacity: 1; transform: scale(1); }
    }
    .fep-skel-corners path {
      stroke-dasharray: 40;
      stroke-dashoffset: 40;
      animation: fep-skel-draw-corner 500ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
    }
    .fep-skel-corners path:nth-child(2) { animation-delay: 80ms; }
    .fep-skel-corners path:nth-child(3) { animation-delay: 160ms; }
    .fep-skel-corners path:nth-child(4) { animation-delay: 240ms; }
    @keyframes fep-skel-draw-corner { to { stroke-dashoffset: 0; } }

    /* Parcel outline continuously "draws itself", the stroke sweeps along
       the polygon path, holds full, then sweeps off the trailing edge and
       restarts. Reads as "we're tracing your property", not "here is a
       static green square". Drives stroke-dashoffset directly via the
       keyframes so JS no longer needs to set the attribute. */
    .fep-skel-parcel {
      filter: drop-shadow(0 0 6px rgba(16, 185, 129, 0.25));
      animation: fep-skel-parcel-draw 2.4s ease-in-out infinite;
    }
    @keyframes fep-skel-parcel-draw {
      0%   { stroke-dashoffset: 800; }
      55%  { stroke-dashoffset: 0; }
      100% { stroke-dashoffset: -800; }
    }
    .fep-skel-scan {
      transition: y1 200ms linear, y2 200ms linear;
      filter: drop-shadow(0 0 4px rgba(16, 185, 129, 0.6));
      stroke-linecap: round;
      animation: fep-skel-scan-pulse 1.6s ease-in-out infinite;
    }
    @keyframes fep-skel-scan-pulse {
      0%, 100% { opacity: 0.55; }
      50%      { opacity: 1; }
    }
    .fep-skel-pct {
      font: 700 28px/1 -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', sans-serif;
      fill: #047857;
      letter-spacing: -0.02em;
      animation: fep-skel-pct-pulse 1.6s ease-in-out infinite;
    }
    .fep-skel-sub {
      font: 500 10px/1 -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', sans-serif;
      fill: rgba(71, 85, 105, 0.85);
      letter-spacing: 0.14em;
      text-transform: uppercase;
    }
    @keyframes fep-skel-pct-pulse {
      0%, 100% { opacity: 0.75; }
      50%      { opacity: 1; }
    }
    @media (prefers-reduced-motion: reduce) {
      .fep-skel { animation: none; }
      .fep-skel-corners path { animation: none; stroke-dashoffset: 0; }
      .fep-skel-parcel { animation: none; stroke-dashoffset: 0; }
      .fep-skel-scan { animation: none; opacity: 0.85; }
      .fep-skel-pct { animation: none; }
    }
    .fep-canvas {
      position: relative;
      width: 100%;
      min-height: 200px;
      max-height: 340px;
      aspect-ratio: 4 / 3;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .fep-canvas svg {
      width: 100%;
      height: 100%;
      display: block;
    }
    .fep-parcel {
      fill: rgba(244, 244, 245, 0.92);
      stroke: rgba(113, 113, 122, 0.55);
      stroke-width: 1.2;
      stroke-linejoin: round;
    }
    .fep-building {
      fill: rgba(161, 161, 170, 0.32);
      stroke: rgba(82, 82, 91, 0.55);
      stroke-width: 1;
      stroke-linejoin: round;
    }
    .fep-envelope {
      fill: rgba(16, 185, 129, 0.24);
      stroke: rgba(5, 150, 105, 0.95);
      stroke-width: 1.8;
      stroke-linejoin: round;
      stroke-linecap: round;
    }
    .fep-envelope.is-animated {
      animation: fepEnvelopeDraw 900ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
    }
    @keyframes fepEnvelopeDraw { to { stroke-dashoffset: 0; } }
    @media (prefers-reduced-motion: reduce) {
      .form-envelope-preview { transition: opacity 150ms ease; }
      .fep-envelope.is-animated { animation: none; stroke-dashoffset: 0 !important; }
    }
    .fep-badge {
      position: absolute;
      left: 10px;
      bottom: 10px;
      display: none;
      flex-direction: column;
      gap: 1px;
      padding: 6px 10px;
      border-radius: 10px;
      background: rgba(255, 255, 255, 0.9);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
      box-shadow: 0 1px 3px rgba(15,23,42,0.08);
      font-size: 12px;
      font-weight: 700;
      color: #065f46;
      letter-spacing: 0.01em;
    }
    .fep-badge.is-visible { display: inline-flex; }
    .fep-badge .fep-badge-dim {
      font-size: 11px;
      font-weight: 500;
      color: #047857;
    }
    /* Prefetch-qualified pulse intentionally disabled, JS still tags
       qualifying chips with .is-prefetch-qualified so re-enabling the
       animation is a one-line revert. Keyframes kept for that reason. */
    .project-interest-btn.is-prefetch-qualified {
      animation: none;
    }
    .project-interest-btn.is-prefetch-qualified.is-selected {
      animation: none;
    }
    @keyframes chipPulse {
      0%, 100% { transform: scale(1); box-shadow: 0 0 0 rgba(200, 16, 46, 0); }
      50% { transform: scale(1.04); box-shadow: 0 0 8px rgba(200, 16, 46, 0.15); }
    }

    /* Project interest only: two-word labels, second word under the first */
    #projectInterestGrid .project-interest-btn {
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 2px;
      line-height: 1.12;
      text-align: center;
    }

    #projectInterestGrid .project-interest-btn .pi-w1,
    #projectInterestGrid .project-interest-btn .pi-w2 {
      display: block;
      max-width: 11em;
    }

    /* Build timeline: one row, three equal-width chips (grid = identical columns) */
    #projectPersonaGrid.project-persona-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 6px;
      width: 100%;
      align-items: stretch;
    }

    #projectPersonaGrid .project-persona-btn {
      box-sizing: border-box;
      width: 100%;
      min-width: 0;
      min-height: 52px;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 1px;
      padding: 9px 4px;
      /* +25% vs prior clamp(12px, 2.8vw, 14px) */
      font-size: clamp(15px, 3.5vw, 17.5px);
      font-weight: 600;
      line-height: 1.1;
      text-align: center;
      text-wrap: balance;
    }

    #projectPersonaGrid .project-persona-btn .pp-line {
      display: block;
      max-width: 100%;
    }

    /* ---- Premium CTA button ---- */
    .form-submit-btn {
      width: 100%;
      padding: clamp(12px, 1.8vh, 20px) clamp(16px, 2vw, 28px);
      background: linear-gradient(135deg, #d4172f 0%, #b80d24 50%, #c8102e 100%);
      color: white;
      border: none;
      border-radius: 14px;
      font-size: clamp(14px, 1.2vw, 16px);
      font-weight: 600;
      font-family: 'Sora', sans-serif;
      letter-spacing: 0.02em;
      cursor: pointer;
      margin-top: clamp(4px, 1vh, 8px);
      position: relative;
      overflow: hidden;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      box-shadow: 0 4px 16px -2px rgba(200, 16, 46, 0.3);
      /* Entrance */
      animation: fadeSlideUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.7s both;
    }

    /* Shimmer effect on button */
    .form-submit-btn::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.12), transparent);
      transition: left 0.6s ease;
    }

    .form-submit-btn:hover::before {
      left: 100%;
    }

    .form-submit-btn:hover {
      transform: translateY(-2px);
      box-shadow:
        0 8px 24px -4px rgba(200, 16, 46, 0.4),
        0 0 40px -8px rgba(200, 16, 46, 0.15);
    }

    .form-submit-btn:active {
      transform: translateY(0);
      box-shadow: 0 2px 8px -2px rgba(200, 16, 46, 0.3);
    }

    .form-submit-btn:disabled {
      opacity: 0.5 !important;
      cursor: not-allowed;
      transform: none;
      box-shadow: none;
      animation: none;
    }

    /* ── Submit zone: map-becomes-CTA stack ───────────────────────────── */
    .form-submit-zone {
      position: relative;
      margin-top: clamp(6px, 1vh, 12px);
    }

    /* Idle: no map, plain submit button flows naturally.
       Explicit width/margin/visibility resets so a return-from-loading doesn't
       leave the button stuck with stage-specific sizing. `transition: none`
       snaps the reset so there's no weird half-width flash. */
    .form-submit-zone[data-stage="idle"] .form-envelope-preview {
      display: none;
    }
    .form-submit-zone[data-stage="idle"] .form-submit-btn {
      position: static;
      width: 100%;
      margin: clamp(4px, 1vh, 8px) 0 0;
      visibility: visible;
      transition: none;
    }

    /* Loading: skeleton envelope plays behind a fully-clickable submit button.
       Button position matches the "ready" stage so the transition to ready
       (when prefetch resolves) doesn't visually shift it, only the canvas
       behind un-blurs and the ready-only bounce/shadow turn on. */
    .form-submit-zone[data-stage="loading"] .form-submit-btn {
      position: absolute;
      inset: clamp(14px, 3%, 22px) 0 auto 0;
      margin: 0 auto;
      width: min(72%, 360px);
      height: fit-content;
      z-index: 3;
      transition: none;
      box-shadow: 0 6px 20px -4px rgba(200, 16, 46, 0.32);
    }

    /* Envelope canvas reads as "data still resolving" via a 2px blur during
       loading, then sharpens to crisp when the stage flips to ready. */
    .form-submit-zone[data-stage="loading"] .fep-canvas {
      filter: blur(2px);
      transition: filter 320ms ease;
    }
    .form-submit-zone[data-stage="ready"] .fep-canvas {
      filter: blur(0);
      transition: filter 320ms ease;
    }

    /* Ready: map holds the drawn lot; submit button overlays near the top with
       bounce-in + sustained nudge. `inset: clamp(…) 0 auto 0` pins the button
       to the top of the map; `margin: 0 auto` centers it horizontally while
       leaving `transform` free for the bounce keyframes. `transition: none`
       so the position/width flip lands instantly. */
    .form-submit-zone[data-stage="ready"] .form-submit-btn {
      position: absolute;
      inset: clamp(14px, 3%, 22px) 0 auto 0;
      margin: 0 auto;
      width: min(72%, 360px);
      height: fit-content;
      z-index: 3;
      transition: none;
      box-shadow:
        0 10px 28px -6px rgba(200, 16, 46, 0.5),
        0 0 0 6px rgba(255, 255, 255, 0.85),
        0 0 40px -8px rgba(200, 16, 46, 0.25);
      animation:
        submitBounceIn 720ms cubic-bezier(0.34, 1.56, 0.64, 1) both,
        submitGentleBounce 2.6s ease-in-out 900ms infinite;
    }

    /* Soft white cushion behind the button so it reads clearly on any lot color */
    .form-submit-zone[data-stage="ready"] .form-submit-btn::after {
      content: '';
      position: absolute;
      inset: -14px;
      border-radius: 24px;
      background: radial-gradient(ellipse at center, rgba(255,255,255,0.7), rgba(255,255,255,0) 72%);
      z-index: -1;
      pointer-events: none;
    }

    /* Ping ring, fires once on entry, radiates outward from the top-pinned button */
    .form-submit-zone[data-stage="ready"]::before {
      content: '';
      position: absolute;
      inset: clamp(14px, 3%, 22px) 0 auto 0;
      margin: 0 auto;
      width: min(72%, 360px);
      height: 52px;
      border-radius: 16px;
      border: 2px solid rgba(200, 16, 46, 0.55);
      opacity: 0;
      pointer-events: none;
      z-index: 2;
      animation: submitPing 1100ms ease-out 420ms 1 both;
    }

    /* "Armed": the 0.5s visual progress counter has hit 100%. The submit
       button bounces in to its clickable position with the ready-stage
       cushion + sustained nudge, but the data-stage stays "loading" so the
       envelope skeleton + scan keep playing behind. When real /check data
       arrives, the stage flips to "ready" and the canvas un-blurs. */
    .form-submit-zone.zoned-armed[data-stage="loading"] .form-submit-btn {
      box-shadow:
        0 10px 28px -6px rgba(200, 16, 46, 0.5),
        0 0 0 6px rgba(255, 255, 255, 0.85),
        0 0 40px -8px rgba(200, 16, 46, 0.25);
      animation:
        submitBounceIn 720ms cubic-bezier(0.34, 1.56, 0.64, 1) both,
        submitGentleBounce 2.6s ease-in-out 900ms infinite;
    }
    .form-submit-zone.zoned-armed[data-stage="loading"] .form-submit-btn::after {
      content: '';
      position: absolute;
      inset: -14px;
      border-radius: 24px;
      background: radial-gradient(ellipse at center, rgba(255,255,255,0.7), rgba(255,255,255,0) 72%);
      z-index: -1;
      pointer-events: none;
    }
    .form-submit-zone.zoned-armed[data-stage="loading"]::before {
      content: '';
      position: absolute;
      inset: clamp(14px, 3%, 22px) 0 auto 0;
      margin: 0 auto;
      width: min(72%, 360px);
      height: 52px;
      border-radius: 16px;
      border: 2px solid rgba(200, 16, 46, 0.55);
      opacity: 0;
      pointer-events: none;
      z-index: 2;
      animation: submitPing 1100ms ease-out 420ms 1 both;
    }

    @keyframes submitBounceIn {
      0%   { opacity: 0; transform: translateY(26px) scale(0.55); }
      55%  { opacity: 1; transform: translateY(-7px) scale(1.06); }
      75%  { transform: translateY(2px) scale(0.985); }
      100% { transform: translateY(0) scale(1); }
    }

    @keyframes submitGentleBounce {
      0%, 100% { transform: translateY(0); }
      50%      { transform: translateY(-5px); }
    }

    @keyframes submitPing {
      0%   { opacity: 0.85; transform: scale(0.9); }
      100% { opacity: 0;    transform: scale(1.22); }
    }

    @media (prefers-reduced-motion: reduce) {
      .form-submit-zone[data-stage="ready"] .form-submit-btn,
      .form-submit-zone.zoned-armed[data-stage="loading"] .form-submit-btn {
        animation: none;
      }
      .form-submit-zone[data-stage="ready"]::before,
      .form-submit-zone.zoned-armed[data-stage="loading"]::before {
        display: none;
      }
    }

    /* Mobile: widen the overlay button so it feels primary */
    @media (max-width: 520px) {
      .form-submit-zone[data-stage="ready"] .form-submit-btn,
      .form-submit-zone[data-stage="loading"] .form-submit-btn,
      .form-submit-zone[data-stage="ready"]::before,
      .form-submit-zone.zoned-armed[data-stage="loading"]::before {
        width: min(84%, 340px);
      }
    }

    .form-inline-error {
      display: none;
      margin-top: 8px;
      padding: 10px 12px;
      border-radius: 10px;
      border: 1px solid rgba(185, 28, 28, 0.22);
      background: rgba(254, 242, 242, 0.95);
      color: #991b1b;
      font-size: 13px;
      line-height: 1.4;
      font-weight: 500;
    }

    .form-consent {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      margin-top: 6px;
      padding: 14px 14px 12px;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      background: rgba(248, 250, 252, 0.96);
      animation: fadeSlideUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.68s both;
    }

    .form-consent input[type="checkbox"] {
      width: 22px;
      height: 22px;
      min-width: 22px;
      margin: 1px 0 0;
      flex: 0 0 auto;
      accent-color: var(--accent);
      cursor: pointer;
    }

    .form-consent-copy {
      font-size: clamp(11px, 0.95vw, 12px);
      color: #475569;
      line-height: 1.55;
      text-align: left;
    }

    .form-consent-copy strong {
      color: #1e293b;
      font-weight: 700;
    }

    .form-consent-copy a {
      color: #475569;
      text-decoration: underline;
    }

    /* ---- Disclaimer ---- */
    .form-disclaimer {
      font-size: clamp(10px, 0.9vw, 12px);
      color: #94a3b8;
      text-align: center;
      margin-top: clamp(8px, 1vh, 18px);
      line-height: 1.6;
      animation: fadeSlideUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.8s both;
    }
    .form-disclaimer a {
      color: #64748b;
      text-decoration: underline;
    }

    /* ---- Trust badges ---- */
    .form-trust-badges {
      display: flex;
      justify-content: center;
      gap: clamp(10px, 2vw, 24px);
      margin-top: clamp(8px, 1.2vh, 20px);
      animation: fadeSlideUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.9s both;
      flex-wrap: wrap;
    }

    .trust-badge {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: clamp(10px, 0.9vw, 11px);
      color: #94a3b8;
      font-weight: 500;
      letter-spacing: 0.02em;
    }

    @media (max-height: 860px) {
      .welcome-state {
        row-gap: clamp(8px, 1.4vh, 14px);
      }

      .form-group {
        margin-bottom: clamp(8px, 1.2vh, 14px);
      }

      .form-trust-badges {
        display: none;
      }
    }

    @media (max-height: 740px) {
      .welcome-subtitle {
        display: none;
      }
    }

    .trust-badge svg {
      width: 14px;
      height: 14px;
      opacity: 0.6;
      color: #64748b;
    }

    /* ---- Entrance animations ---- */
    @keyframes fadeSlideUp {
      from {
        opacity: 0;
        transform: translateY(20px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    /* Stack name/phone only on very narrow screens */
    @media (max-width: 340px) {
      .form-row {
        grid-template-columns: 1fr;
      }
    }

    /* Zoning Info Panel - shown after form submission */
    .zoning-info-panel {
      background: transparent;
      border: none;
      border-radius: 0;
      padding: 0;
      margin-bottom: 0;
      display: none;
      box-shadow: none;
    }
    
    .zoning-info-panel.visible {
      display: block;
      animation: none;
      width: min(100%, 1080px);
      margin-left: auto;
      margin-right: auto;
      text-align: left;
    }

    .zoning-info-panel.report-reveal {
      animation: none;
    }

    /* Pin the report to the top of the viewport once the zoning panel is
       revealed. The post-submit flow keeps welcomeState visible (so the
       full dashboard renders inside it) and the chat-container keeps its
       'welcome-centered' class, which vertical-centers the content via
       justify-content. With the form gone and only the report card stack
       inside, centering produces a tall empty band above the lot header.
       Override the centering and trim the welcome-state's top padding
       only once #zoningInfoPanel.visible is in the tree, so the pre-
       submit form keeps its ChatGPT-style centered layout. */
    .chat-container.welcome-centered:has(#zoningInfoPanel.visible) {
      justify-content: flex-start;
    }
    .chat-container.welcome-centered:has(#zoningInfoPanel.visible) .chat-messages {
      padding-top: 8px;
    }
    .chat-container.welcome-centered:has(#zoningInfoPanel.visible) .welcome-state {
      padding-top: 0;
    }

    .post-submit-view {
      display: none;
    }

    .post-submit-view.visible {
      display: block;
    }

    .draw-siteplan-embed {
      border: 2px solid rgba(200, 16, 46, 0.58);
      border-radius: 14px;
      overflow: hidden;
      background: #f4f6fb;
      min-height: 0;
      position: relative;
      margin-bottom: 10px;
      box-shadow: 0 10px 28px rgba(15, 23, 42, 0.2), 0 2px 8px rgba(200, 16, 46, 0.18);
      transform: translateZ(0);
      backface-visibility: hidden;
    }

    .mobile-embed-expand-gate {
      position: absolute;
      left: 0;
      top: 0;
      width: 0;
      height: 0;
      display: none;
      align-items: flex-end;
      justify-content: center;
      padding: 0 16px calc(28px + var(--mobile-embed-raise, 0px));
      z-index: 6;
      pointer-events: none;
      background: transparent;
      touch-action: auto;
    }

    .mobile-embed-expand-gate.is-ready {
      display: none;
    }

    .mobile-embed-expand-btn {
      display: inline-flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 12px 24px;
      border: 0;
      border-radius: 100px;
      background: rgba(15, 23, 42, 0.82);
      color: #fff;
      text-align: center;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      cursor: pointer;
      pointer-events: auto;
      transition: transform 0.15s ease, box-shadow 0.15s ease;
    }

    .mobile-embed-expand-btn:active {
      transform: scale(0.95);
    }

    .mobile-embed-expand-btn:focus-visible {
      outline: 2px solid rgba(255, 255, 255, 0.7);
      outline-offset: 3px;
    }

    .mobile-embed-expand-hint {
      display: inline-flex;
      align-items: center;
      gap: 0;
      font-size: 15px;
      font-weight: 600;
      color: #fff;
      line-height: 1.15;
      letter-spacing: 0.01em;
    }

    .mobile-embed-fullscreen-shell {
      position: fixed;
      inset: 0;
      z-index: 10020;
      display: none;
      align-items: stretch;
      justify-content: center;
      padding: max(12px, env(safe-area-inset-top, 12px)) 12px max(12px, env(safe-area-inset-bottom, 12px));
    }

    .mobile-embed-fullscreen-shell.visible {
      display: flex;
    }

    .mobile-embed-fullscreen-backdrop {
      position: absolute;
      inset: 0;
      background: rgba(2, 6, 23, 0.82);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
    }

    .mobile-embed-fullscreen-panel {
      position: relative;
      z-index: 1;
      display: flex;
      flex-direction: column;
      width: min(100%, 720px);
      height: 100%;
      max-height: 100%;
      min-height: 0;
      border-radius: 22px;
      overflow: hidden;
      background: #0f172a;
      box-shadow: 0 28px 60px rgba(2, 6, 23, 0.45);
    }

    .mobile-embed-fullscreen-header {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
      padding: 16px 16px 12px;
      color: #f8fafc;
      background: linear-gradient(180deg, rgba(15, 23, 42, 0.98) 0%, rgba(15, 23, 42, 0.9) 100%);
      border-bottom: 1px solid rgba(148, 163, 184, 0.2);
    }

    .mobile-embed-fullscreen-title {
      margin: 0;
      font-size: 16px;
      font-weight: 800;
      line-height: 1.25;
    }

    .mobile-embed-fullscreen-subtitle {
      margin: 4px 0 0;
      font-size: 12px;
      line-height: 1.45;
      color: rgba(226, 232, 240, 0.86);
    }

    .mobile-embed-fullscreen-close {
      flex: 0 0 auto;
      padding: 10px 14px;
      border: 1px solid rgba(148, 163, 184, 0.28);
      border-radius: 999px;
      background: rgba(30, 41, 59, 0.9);
      color: #f8fafc;
      font-size: 12px;
      font-weight: 700;
      cursor: pointer;
    }

    .mobile-embed-fullscreen-stage {
      position: relative;
      flex: 1 1 auto;
      display: flex;
      min-height: 0;
      overflow: hidden;
      background: #e2e8f0;
    }

    .mobile-embed-fullscreen-stage iframe,
    .mobile-embed-fullscreen-stage .draw-siteplan-iframe,
    .mobile-embed-fullscreen-stage .map-window-iframe {
      width: 100% !important;
      height: 100% !important;
      min-height: 0 !important;
      border: 0;
      display: block;
    }

    .mobile-embed-fullscreen-active {
      display: flex !important;
      flex-direction: column !important;
      width: 100% !important;
      height: 100% !important;
      min-height: 0 !important;
      background: #0f172a !important;
      box-sizing: border-box !important;
      overflow: hidden !important;
    }

    .mobile-embed-fullscreen-active .draw-siteplan-iframe,
    .mobile-embed-fullscreen-active .map-window-iframe {
      flex: 1 1 auto !important;
      min-height: 0 !important;
      width: 100% !important;
      height: 100% !important;
    }

    .mobile-embed-fullscreen-chrome {
      flex-shrink: 0;
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
      padding: 16px 16px 12px;
      color: #f8fafc;
      background: linear-gradient(180deg, rgba(15, 23, 42, 0.98) 0%, rgba(15, 23, 42, 0.9) 100%);
      border-bottom: 1px solid rgba(148, 163, 184, 0.2);
    }

    .mobile-embed-fullscreen-chrome-copy {
      min-width: 0;
    }

    body.mobile-embed-expanded {
      overflow: hidden;
    }

    .embed-map-disclaimer {
      width: min(100%, 760px);
      margin: 4px auto 10px;
      font-size: 11px;
      line-height: 1.45;
      color: #64748b;
      text-align: center;
    }

    .options-envelope-embed {
      display: none;
      width: min(100%, 760px);
      margin: 8px auto 10px;
    }

    .options-envelope-cta {
      display: none;
      width: auto;
      margin: 0;
      bottom: 24px;
    }

    .options-envelope-cta-hint {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      margin: 0;
      padding: 8px 14px;
      border-radius: 999px;
      border: 1px solid rgba(148, 163, 184, 0.42);
      background: rgba(255, 255, 255, 0.96);
      color: #0f172a;
      font-size: 13px;
      font-weight: 700;
      line-height: 1.2;
      box-shadow: 0 6px 18px rgba(15, 23, 42, 0.2);
      pointer-events: none;
    }

    .options-generate-permit-btn {
      display: none;
    }

    .options-envelope-cta.is-template-selected .options-envelope-cta-hint {
      display: none;
    }

    .options-envelope-cta.is-template-selected .options-generate-permit-btn {
      display: inline-flex;
    }

    .options-envelope-embed.visible {
      display: block;
    }

    #optionsEnvelopeIframe.draw-siteplan-iframe,
    #optionsEnvelopeIframeAddition.draw-siteplan-iframe {
      height: clamp(470px, 78vh, 720px);
      min-height: 0;
    }

    .options-envelope-embed--addition.is-mobile-map-disabled #optionsEnvelopeIframeAddition.draw-siteplan-iframe {
      pointer-events: none;
      filter: grayscale(1) brightness(0.72);
    }

    .options-envelope-mobile-disabled-overlay {
      position: absolute;
      inset: 0;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 20px;
      background: rgba(15, 23, 42, 0.56);
      color: #f8fafc;
      text-align: center;
      font-weight: 700;
      font-size: 14px;
      line-height: 1.45;
      z-index: 7;
      pointer-events: auto;
      user-select: none;
      backdrop-filter: blur(3px);
      -webkit-backdrop-filter: blur(3px);
    }

    .options-envelope-embed--addition.is-mobile-map-disabled .options-envelope-mobile-disabled-overlay {
      display: flex;
    }

    .options-envelope-mobile-disabled-copy {
      max-width: 300px;
      padding: 18px 16px;
      border-radius: 16px;
      background: rgba(15, 23, 42, 0.88);
      border: 1px solid rgba(248, 250, 252, 0.22);
      box-shadow: 0 16px 34px rgba(15, 23, 42, 0.32);
    }

    .options-envelope-mobile-disabled-title {
      display: block;
      margin-bottom: 8px;
      font-size: 16px;
      font-weight: 800;
      line-height: 1.25;
      color: #fff;
    }

    .options-envelope-mobile-disabled-body {
      display: block;
      font-size: 13px;
      font-weight: 600;
      line-height: 1.5;
      color: rgba(241, 245, 249, 0.92);
    }

    .multifamily-canvas-loading-overlay,
    .options-envelope-loading-overlay {
      position: absolute;
      inset: 0;
      background: rgba(255, 255, 255, 0.84);
      backdrop-filter: blur(4px);
      -webkit-backdrop-filter: blur(4px);
      display: none;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 12px;
      z-index: 4;
      pointer-events: none;
    }

    /* SVG-only envelope panel, renders parcel + building + envelope + a
       per-tab overlay directly from the in-memory /check response. Replaces
       the satellite-tile iframe visually for all four tabs (coach, multiplex,
       custom, addition) so the user sees real lot geometry instantly. */
    .options-envelope-svg-panel {
      position: absolute;
      inset: 0;
      z-index: 5;
      display: flex;
      flex-direction: column;
      align-items: stretch;
      justify-content: stretch;
      background: linear-gradient(135deg, #f8fafc 0%, #ffffff 45%, #ecfdf5 100%);
      overflow: hidden;
      border-radius: inherit;
    }
    .options-envelope-svg-panel__canvas {
      position: relative;
      flex: 1 1 auto;
      min-height: 0;
      padding: 18px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .options-envelope-svg-panel__canvas svg {
      width: 100%;
      height: 100%;
      max-width: 100%;
      max-height: 100%;
      display: block;
    }
    .options-envelope-svg-panel__caption {
      position: absolute;
      left: 14px;
      bottom: 14px;
      display: inline-flex;
      flex-direction: column;
      gap: 2px;
      padding: 8px 12px;
      border-radius: 10px;
      background: rgba(255, 255, 255, 0.92);
      box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08);
      backdrop-filter: blur(4px);
      -webkit-backdrop-filter: blur(4px);
      font-size: 12px;
      font-weight: 700;
      color: #065f46;
      letter-spacing: 0.01em;
      pointer-events: none;
    }
    .options-envelope-svg-panel__caption-sub {
      font-size: 11px;
      font-weight: 500;
      color: #334155;
    }
    .options-envelope-svg-panel__empty {
      flex: 1 1 auto;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #94a3b8;
      font-size: 13px;
      font-weight: 500;
    }

    /* Source SVG panels inside the per-tab embeds are now mirrored into
       #czpLotPreview at the top of the report, so we hide the bottom copies
       while leaving the DOM intact, the mirror's cloneNode() still reads
       from these nodes when tabs switch. */
    #optionsEnvelopeSvgPanel,
    #optionsEnvelopeSvgPanelAddition {
      display: none !important;
    }

    /* The preview-only satellite iframes (buildable envelope preview for
       Coach Homes / Home Addition) duplicated the lot context now shown at
       the top of the report in #czpLotPreview, so hide them. The separate
       #drawSitePlanEmbed used when the user clicks "Draw Site Plan" is
       untouched, that's an interactive drawing surface, not a preview. */
    #optionsEnvelopeEmbed,
    #optionsEnvelopeEmbedAddition {
      display: none !important;
    }

    /* ── Custom Home tab: kill every iframe-based embed ────────────────
       JS sets `body.zoned-build-view--custom-homes` whenever the user is
       on the Custom Home build tab. Per product direction this tab shows
       ONLY the clean SVG lot preview at the top of the report, every
       other "where does the building go" surface (the legacy
       optionsEnvelopeIframe, the multifamilyLotCanvasIframe, even the
       wrappers around them) must be invisible AND non-interactive.
       Belt-and-suspenders alongside the inline-style hides in
       setOptionsBuildView() so a stray .add('visible') or display:''
       can't re-surface the old map. */
    body.zoned-build-view--custom-homes #optionsEnvelopeEmbed,
    body.zoned-build-view--custom-homes #optionsEnvelopeEmbedAddition,
    body.zoned-build-view--custom-homes #optionsEnvelopeIframe,
    body.zoned-build-view--custom-homes #optionsEnvelopeIframeAddition,
    body.zoned-build-view--custom-homes #multifamilyView .draw-siteplan-embed,
    body.zoned-build-view--custom-homes #multifamilyLotCanvasIframe,
    body.zoned-build-view--custom-homes #optionsEnvelopeCta {
      display: none !important;
      visibility: hidden !important;
      pointer-events: none !important;
    }

    /* Persistent lot preview, flow-positioned card version of
       .options-envelope-svg-panel, mounted under the zone header so the
       user sees their lot at the top of the report regardless of which
       project tile or build-tab is active. Content mirrored from
       renderOptionsEnvelopeSvgPanel() once data is ready. */
    .czp-lot-preview {
      position: relative;
      width: 100%;
      height: clamp(280px, 40vh, 420px);
      overflow: hidden;
      background:
        radial-gradient(ellipse 120% 90% at 50% 10%, rgba(16, 185, 129, 0.06) 0%, transparent 60%),
        linear-gradient(180deg, #fdfefe 0%, #f6f8fb 100%);
      display: flex;
      flex-direction: column;
    }
    .czp-lot-preview:empty { display: none; }
    .czp-lot-preview .options-envelope-svg-panel {
      position: absolute;
      inset: 0;
      background: transparent;
    }
    /* The canvas and caption come cloned from the source panel, override
       their flex behaviour so the SVG fills the card without overflowing. */
    .czp-lot-preview > .options-envelope-svg-panel__canvas {
      flex: 1 1 auto;
      min-height: 0;
      padding: 14px;
    }
    .czp-lot-preview > .options-envelope-svg-panel__canvas svg {
      width: 100%;
      height: 100%;
      max-height: 100%;
      overflow: visible; /* allow chips that sit at the viewBox edge to show */
    }
    /* Hide the tab-specific caption inside the persistent preview, the
       corner chips already convey this context and the caption would
       otherwise overlap the bottom-left chip (Frontage). */
    .czp-lot-preview > .options-envelope-svg-panel__caption {
      display: none;
    }

    /* Wrapping card that groups the SVG map, the building-limits stats
       strip, and the utility bar into one visual unit. The card owns the
       border / shadow / radius, the inner .czp-lot-preview is flat. */
    .czp-lot-preview-card {
      position: relative;
      margin: 10px 0 16px;
      border-radius: 16px;
      background: #ffffff;
      border: 1px solid rgba(15, 23, 42, 0.06);
      box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05), 0 12px 24px -16px rgba(15, 23, 42, 0.12);
      overflow: hidden;
      /* Starting state used by the form→output transition, the card sits
         low and narrow until the panel gets `.visible`, at which point the
         rise animation below plays exactly once. */
      transform-origin: 50% 80%;
    }
    .czp-lot-preview-card[aria-hidden="true"] { display: none; }

    /* Floating intro popup, dead-center over the SVG, white with the brand
       red border, gently bouncing to draw the eye. Dismissable via the close
       button (state persists in localStorage so we don't nag). */
    @keyframes czpLotPopupBounce {
      0%, 100% { transform: translateY(0); }
      50%      { transform: translateY(-6px); }
    }
    /* Positioning context for the SVG region. Kept for any future absolute
       overlays inside the visualization. */
    .czp-svg-wrap { position: relative; }

    /* "?" trigger button, sits at the top-left of the SVG card and toggles
       the explainer popup. Subtle by default, lifts on hover. */
    .czp-lot-popup-trigger {
      position: absolute;
      top: 10px;
      left: 10px;
      z-index: 6;
      width: 28px;
      height: 28px;
      padding: 0;
      border: 1.5px solid #c8102e;
      border-radius: 50%;
      background: #ffffff;
      color: #c8102e;
      font-size: 15px;
      font-weight: 700;
      line-height: 1;
      cursor: pointer;
      box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
      transition: background 0.15s ease, box-shadow 0.15s ease;
      animation: czpLotPopupBounce 1.6s ease-in-out infinite;
    }
    .czp-lot-popup-trigger:hover {
      background: #fef2f2;
      box-shadow: 0 4px 10px rgba(200, 16, 46, 0.18);
      animation-play-state: paused;
    }
    /* Stop bouncing once the popup is open OR the user has acknowledged it
       once (data-bounced="false" is set by the JS on first click). */
    .czp-lot-popup-trigger[aria-expanded="true"],
    .czp-lot-popup-trigger[data-bounced="false"] {
      animation: none;
    }
    .czp-lot-popup-trigger[aria-expanded="true"] {
      background: #c8102e;
      color: #ffffff;
    }
    .czp-lot-popup-trigger:focus-visible {
      outline: 2px solid rgba(200, 16, 46, 0.55);
      outline-offset: 2px;
    }
    @media (prefers-reduced-motion: reduce) {
      .czp-lot-popup-trigger { animation: none; }
    }

    /* Lot popup, anchored to the top-left of the SVG card, opens from the
       "?" trigger above. Hidden by default; an arrow tail points back to
       the trigger. Bounded by the card so it doesn't overflow the viewport
       on narrow screens. */
    .czp-lot-popup {
      position: absolute;
      top: 46px;
      left: 10px;
      z-index: 6;
      width: min(360px, calc(100% - 24px));
      padding: 14px 38px 14px 16px;
      background: #ffffff;
      border: 2px solid #c8102e;
      border-radius: 12px;
      box-shadow: 0 8px 24px rgba(200, 16, 46, 0.15), 0 1px 3px rgba(15, 23, 42, 0.06);
      color: #1f2937;
    }
    /* Arrow tail pointing to the trigger button. */
    .czp-lot-popup::before {
      content: "";
      position: absolute;
      top: -8px;
      left: 12px;
      width: 12px;
      height: 12px;
      background: #ffffff;
      border-top: 2px solid #c8102e;
      border-left: 2px solid #c8102e;
      transform: rotate(45deg);
      border-top-left-radius: 2px;
    }
    .czp-lot-popup[hidden] { display: none; }
    .czp-lot-popup__title {
      margin: 0;
      color: #0f172a;
      font-size: 14px;
      line-height: 1.4;
      text-align: left;
      text-wrap: balance;
    }
    .czp-lot-popup__body {
      margin: 4px 0 0;
      color: #475569;
      font-size: 12.5px;
      line-height: 1.55;
      text-align: left;
      text-wrap: pretty;
      hyphens: auto;
      word-break: normal;
      overflow-wrap: break-word;
    }
    .czp-lot-popup__close {
      position: absolute;
      top: 6px;
      right: 6px;
      width: 26px;
      height: 26px;
      padding: 0;
      border: 0;
      background: transparent;
      color: #64748b;
      font-size: 20px;
      line-height: 1;
      cursor: pointer;
      border-radius: 6px;
      transition: background 0.15s ease, color 0.15s ease;
    }
    .czp-lot-popup__close:hover {
      background: rgba(200, 16, 46, 0.08);
      color: #c8102e;
    }
    .czp-lot-popup__close:focus-visible {
      outline: 2px solid rgba(200, 16, 46, 0.5);
      outline-offset: 2px;
    }
    @media (max-width: 520px) {
      .czp-lot-popup-trigger { top: 8px; left: 8px; width: 26px; height: 26px; font-size: 14px; }
      .czp-lot-popup { top: 42px; left: 8px; padding: 12px 36px 12px 14px; width: min(340px, calc(100% - 16px)); }
      .czp-lot-popup::before { left: 10px; }
      .czp-lot-popup__title { font-size: 13px; }
      .czp-lot-popup__body { font-size: 11.8px; line-height: 1.55; }
    }

    /* Per-cell explainer popup for the 5 limits-strip cells (Max Height,
       Coverage Headroom, Max Units, Total Buildable Area, Total Floor Area).
       Each cell becomes its own positioning context; the popup floats above
       the cell with a down-pointing arrow tail. JS toggles `hidden` and
       clamps horizontal overflow on edge cells via --popup-shift. */
    .czp-limit { position: relative; cursor: pointer; transition: background-color 0.15s ease; }
    .czp-limit:hover { background: #fafbfc; }
    .czp-limit:focus-visible { outline: 2px solid rgba(200, 16, 46, 0.5); outline-offset: -2px; }
    .czp-limit[aria-expanded="true"] { background: #fef2f2; }
    /* Subtle ⓘ glyph at end of dt label, no animation (5 cells bouncing
       would be visual noise), brightens on hover/active. */
    .czp-limit dt::after {
      content: " ⓘ";
      color: #94a3b8;
      font-weight: 400;
      font-size: 0.95em;
      transition: color 0.15s ease;
    }
    .czp-limit:hover dt::after,
    .czp-limit[aria-expanded="true"] dt::after { color: #c8102e; }

    .czp-limit-popup {
      position: absolute;
      bottom: calc(100% + 12px);
      left: 50%;
      /* --popup-shift is set by JS to keep the popup inside the viewport on
         edge cells (mobile especially). Default 0 = perfectly centered. */
      transform: translateX(calc(-50% + var(--popup-shift, 0px)));
      z-index: 12;
      width: max-content;
      max-width: min(280px, calc(100vw - 24px));
      padding: 12px 32px 12px 14px;
      background: #ffffff;
      border: 2px solid #c8102e;
      border-radius: 12px;
      box-shadow: 0 10px 28px rgba(200, 16, 46, 0.18), 0 1px 3px rgba(15, 23, 42, 0.06);
      color: #1f2937;
      text-align: left;
      cursor: default;
    }
    .czp-limit-popup[hidden] { display: none; }
    /* Down-pointing arrow tail. Compensates for --popup-shift so it stays
       aligned with the cell center even when the popup body has been
       horizontally clamped. */
    .czp-limit-popup::after {
      content: "";
      position: absolute;
      bottom: -8px;
      left: 50%;
      width: 12px;
      height: 12px;
      background: #ffffff;
      border-bottom: 2px solid #c8102e;
      border-right: 2px solid #c8102e;
      border-bottom-right-radius: 2px;
      transform: translateX(calc(-50% - var(--popup-shift, 0px))) rotate(45deg);
    }
    .czp-limit-popup__title {
      margin: 0;
      color: #0f172a;
      font: 700 13px/1.4 'Sora', system-ui, sans-serif;
      text-wrap: balance;
    }
    .czp-limit-popup__body {
      margin: 4px 0 0;
      color: #475569;
      font: 400 12.5px/1.55 'Sora', system-ui, sans-serif;
      text-wrap: pretty;
      hyphens: auto;
      word-break: normal;
      overflow-wrap: break-word;
    }
    .czp-limit-popup__close {
      position: absolute;
      top: 4px;
      right: 4px;
      width: 24px;
      height: 24px;
      padding: 0;
      border: 0;
      background: transparent;
      color: #64748b;
      font-size: 18px;
      line-height: 1;
      cursor: pointer;
      border-radius: 6px;
      transition: background 0.15s ease, color 0.15s ease;
    }
    .czp-limit-popup__close:hover { background: rgba(200, 16, 46, 0.08); color: #c8102e; }
    .czp-limit-popup__close:focus-visible { outline: 2px solid rgba(200, 16, 46, 0.5); outline-offset: 2px; }
    @media (max-width: 520px) {
      .czp-limit-popup { max-width: min(260px, calc(100vw - 24px)); padding: 10px 28px 10px 12px; }
      .czp-limit-popup__title { font-size: 12.5px; }
      .czp-limit-popup__body { font-size: 11.8px; line-height: 1.55; }
    }

    /* Form → output transition: rise up + scale in + deblur. Triggered the
       moment .zoning-info-panel gets its `.visible` class and the card is
       populated with real data. Durations doubled for a slower, more
       cinematic reveal. */
    .zoning-info-panel.visible .czp-lot-preview-card[aria-hidden="false"] {
      animation: czpCardRise 1520ms cubic-bezier(0.22, 1, 0.36, 1) both;
    }
    @keyframes czpCardRise {
      0%   { opacity: 0; transform: translateY(64px) scale(0.9); filter: blur(6px); }
      40%  { opacity: 1; filter: blur(0); }
      100% { opacity: 1; transform: translateY(0)   scale(1);    filter: blur(0); }
    }

    /* Stagger the five limits pills so they land just after the card. */
    .zoning-info-panel.visible .czp-lot-preview-card[aria-hidden="false"] .czp-limit {
      animation: czpPillRise 840ms cubic-bezier(0.22, 1, 0.36, 1) both;
    }
    .zoning-info-panel.visible .czp-lot-preview-card[aria-hidden="false"] .czp-limit:nth-child(1) { animation-delay: 960ms; }
    .zoning-info-panel.visible .czp-lot-preview-card[aria-hidden="false"] .czp-limit:nth-child(2) { animation-delay: 1080ms; }
    .zoning-info-panel.visible .czp-lot-preview-card[aria-hidden="false"] .czp-limit:nth-child(3) { animation-delay: 1200ms; }
    .zoning-info-panel.visible .czp-lot-preview-card[aria-hidden="false"] .czp-limit:nth-child(4) { animation-delay: 1320ms; }
    .zoning-info-panel.visible .czp-lot-preview-card[aria-hidden="false"] .czp-limit:nth-child(5) { animation-delay: 1440ms; }
    @keyframes czpPillRise {
      0%   { opacity: 0; transform: translateY(12px); }
      100% { opacity: 1; transform: translateY(0); }
    }

    /* Utility bar fades in last. */
    .zoning-info-panel.visible .czp-lot-preview-card[aria-hidden="false"] .czp-preview-utilbar {
      animation: czpUtilbarFade 760ms ease-out 1640ms both;
    }
    @keyframes czpUtilbarFade {
      0%   { opacity: 0; }
      100% { opacity: 1; }
    }

    /* Zone header rises with the card. */
    .zoning-info-panel.visible #czpZoneHeader {
      animation: czpZoneHeaderRise 1120ms cubic-bezier(0.22, 1, 0.36, 1) both;
    }
    @keyframes czpZoneHeaderRise {
      0%   { opacity: 0; transform: translateY(36px); }
      100% { opacity: 1; transform: translateY(0); }
    }

    @media (prefers-reduced-motion: reduce) {
      .zoning-info-panel.visible .czp-lot-preview-card[aria-hidden="false"],
      .zoning-info-panel.visible .czp-lot-preview-card[aria-hidden="false"] .czp-limit,
      .zoning-info-panel.visible .czp-lot-preview-card[aria-hidden="false"] .czp-preview-utilbar,
      .zoning-info-panel.visible #czpZoneHeader {
        animation: none;
      }
    }

    /* Building limits strip, 5 hairline-separated pills living directly
       under the SVG. The 1px gap gives us the hairlines for free. */
    .czp-limits-strip {
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 1px;
      background: rgba(15, 23, 42, 0.08);
      margin: 0;
      border-top: 1px solid rgba(15, 23, 42, 0.06);
    }
    /* Inline upper-storey stepback warning banner, sits directly under
       the building-limits strip and is unhidden by JS only when the
       active zone applies stepbacks above 15 m. Subtle amber treatment
       so it reads as a caution, not an error. */
    .czp-stepback-warning {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      padding: 10px 14px;
      background: #fef3c7;
      border-top: 1px solid #fde68a;
      border-bottom: 1px solid #fde68a;
      color: #78350f;
      font: 500 12.5px/1.45 'Inter', system-ui, sans-serif;
    }
    .czp-stepback-warning[hidden] { display: none; }
    .czp-stepback-warning__icon {
      flex: 0 0 auto;
      font-size: 14px;
      line-height: 1.2;
      color: #b45309;
    }
    .czp-stepback-warning__body {
      flex: 1;
      min-width: 0;
    }
    .czp-stepback-warning__body strong {
      font-weight: 700;
      color: #78350f;
    }
    .czp-stepback-warning__body em {
      font-style: italic;
      color: #92400e;
    }
    .czp-limit {
      background: #ffffff;
      padding: 12px 14px;
      display: flex;
      flex-direction: column;
      gap: 4px;
      min-width: 0;
    }
    .czp-limit dt {
      font: 600 10px/1.25 'Sora', system-ui, sans-serif;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      color: #64748b;
      margin: 0;
      /* Allow long labels like "Coverage Headroom" or "Total Buildable
         Area" to wrap to a second line instead of getting clipped to
         "Coverage Headr…". Aligned across the row via min-height so all
         five cells line up regardless of how many lines each label uses. */
      white-space: normal;
      word-break: keep-all;
      overflow-wrap: break-word;
      hyphens: auto;
      min-height: calc(2 * 1.25em);
    }
    .czp-limit dd {
      font: 700 14px/1.25 'Sora', system-ui, sans-serif;
      color: #0f172a;
      margin: 0;
      word-break: break-word;
      overflow-wrap: anywhere;
      hyphens: auto;
    }
    /* Tier-aware accent on the Lot Coverage cell, green for strong/moderate
       footprint headroom, amber for tight/at-limit, red for over-limit. The
       data-coverage-tier attribute is mirrored from the datasheet by
       _syncCzpLimitsStripFromPanel. */
    .czp-limit[data-coverage-tier="strong"] dd { color: #047857; }
    .czp-limit[data-coverage-tier="moderate"] dd { color: #047857; }
    .czp-limit[data-coverage-tier="limited"] dd { color: #b45309; }
    .czp-limit[data-coverage-tier="at_limit"] dd { color: #b45309; }
    .czp-limit[data-coverage-tier="over_limit"] dd { color: #b91c1c; }

    /* Utility bar at the bottom of the card, metric toggle + full-specs toggle. */
    .czp-preview-utilbar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px 14px;
      background: #f8fafc;
      border-top: 1px solid rgba(15, 23, 42, 0.06);
    }
    .czp-util-btn {
      background: transparent;
      border: none;
      color: #475569;
      font: 600 12px/1 'Sora', system-ui, sans-serif;
      cursor: pointer;
      padding: 7px 10px;
      border-radius: 8px;
      transition: background 0.15s ease, color 0.15s ease;
    }
    .czp-util-btn:hover { background: rgba(15, 23, 42, 0.05); color: #0f172a; }
    .czp-util-btn:focus-visible { outline: 2px solid rgba(200, 16, 46, 0.4); outline-offset: 1px; }
    .czp-util-btn--accent { color: #0f172a; }
    .czp-util-btn[aria-expanded="true"]::after { content: ' ▾'; }

    @media (max-width: 640px) {
      .czp-limits-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      .czp-limit:nth-child(5) { grid-column: span 2; }
      .czp-limit dd { font-size: 13px; }
    }
    @media (max-width: 420px) {
      .czp-preview-utilbar { flex-direction: column; gap: 4px; }
      .czp-util-btn { width: 100%; text-align: center; }
    }
    .oesp-grid-bg { pointer-events: none; }
    .oesp-parcel {
      fill: url(#oesp-parcel-fill);
      stroke: rgba(71, 85, 105, 0.55);
      stroke-width: 1.1;
      stroke-linejoin: round;
      stroke-linecap: round;
      filter: url(#oesp-polygon-shadow);
    }
    .oesp-building {
      fill: url(#oesp-building-fill);
      stroke: rgba(71, 85, 105, 0.9);
      stroke-width: 1;
      stroke-linejoin: round;
      stroke-linecap: round;
      filter: url(#oesp-polygon-shadow);
    }
    /* Existing accessory structures (sheds, detached garages) drawn
       beneath the placed layers on every tab. Per product direction
       2026-05-18: render as VERY faint green ghost-shapes, the user
       wants to register "something exists there" without competing
       with the buildable envelope, existing-building, or placed shape.
       Greens picked from the same emerald family as the envelope fill
       so the accessories read as belonging to the same drawing rather
       than as a different layer (slate-grey from the previous build
       read as "different color = different thing"). */
    .oesp-accessory {
      fill: rgba(22, 163, 74, 0.08);
      stroke: rgba(22, 101, 52, 0.32);
      stroke-width: 0.8;
      stroke-linejoin: round;
      stroke-dasharray: 2 2;
    }
    /* Teardown variant of the existing building, used on the Multiplex
       and Custom Home tabs. Same green family as the envelope fill (which
       lives at #oesp-envelope-fill, ~22-30% alpha) but a touch denser, so
       it reads as a darker patch *inside* the envelope rather than as a
       hole or a separate piece of geometry. Specificity uses both class
       names so it overrides .oesp-building's gradient fill cleanly. */
    .oesp-building.oesp-building--teardown {
      fill: rgba(95, 145, 115, 0.42);
      stroke: rgba(70, 105, 85, 0.55);
      stroke-width: 0.9;
      /* Skip the .oesp-building entry animation. The fade-up reads right
         for a "live" structure but feels wrong for a teardown ghost; it
         also tends to get stuck at opacity:0 when the SVG is deep-cloned
         into the persistent lot preview after the source's animation has
         already played. Just paint immediately at full opacity. */
      opacity: 1;
      transform: none;
      animation: none;
    }
    /* Ghost of the existing building on the Custom Home tab, the morph
       fills the FULL setback envelope (since custom homes replace the
       house), so the user needs a subtle cue showing what's being torn
       down. Faint dashed outline, no fill, reads as "this is gone,"
       not "this is a constraint." */
    .oesp-building-ghost {
      fill: none;
      stroke: rgba(71, 85, 105, 0.35);
      stroke-width: 0.8;
      stroke-linejoin: round;
      stroke-dasharray: 3 2;
      pointer-events: none;
    }
    /* Debug morph shape, area-preserving orthogonal polygon that morphs
       around envelope walls as the user drags it. Rendered in hot pink so
       it reads as a debug overlay, not a legal/real shape. Interactive:
       pointer events are enabled on this polygon only. */
    .oesp-debug-morph {
      fill: rgba(236, 72, 153, 0.42);
      stroke: rgba(190, 24, 93, 0.95);
      stroke-width: 1.6;
      stroke-linejoin: miter;
      cursor: grab;
      pointer-events: auto;
      touch-action: none;
    }
    .oesp-debug-morph.is-dragging,
    .oesp-debug-morph:active {
      cursor: grabbing;
    }
    .oesp-debug-morph-label {
      font: 700 10px/1.1 -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', sans-serif;
      fill: #fff;
      paint-order: stroke;
      stroke: rgba(190, 24, 93, 0.9);
      stroke-width: 3;
      text-anchor: middle;
      pointer-events: none;
      user-select: none;
    }
    .oesp-envelope {
      fill: url(#oesp-envelope-fill);
      stroke: rgba(75, 110, 88, 0.85);
      stroke-width: 1.4;
      stroke-linejoin: round;
      stroke-linecap: round;
      filter: url(#oesp-polygon-shadow);
    }
    .oesp-overlay--coach {
      fill: rgba(98, 130, 175, 0.16);
      stroke: rgba(55, 90, 130, 0.7);
      stroke-width: 1.2;
      stroke-dasharray: 4 3;
      stroke-linejoin: round;
    }
    .oesp-overlay--multiplex {
      fill: rgba(190, 110, 125, 0.20);
      stroke: rgba(140, 65, 80, 0.85);
      stroke-width: 1.4;
      stroke-linejoin: round;
    }
    .oesp-overlay--custom {
      fill: rgba(170, 130, 100, 0.22);
      stroke: rgba(125, 90, 65, 0.85);
      stroke-width: 1.4;
      stroke-linejoin: round;
    }
    .oesp-overlay--addition {
      fill: rgba(195, 150, 90, 0.22);
      stroke: rgba(150, 110, 55, 0.85);
      stroke-width: 1.4;
      stroke-dasharray: 4 3;
      stroke-linejoin: round;
    }
    /* Placed structure polygons, the fluid max-footprint shape the
       server pre-computed for each tab (see apps/api/src/lib/tabFootprints.ts).
       These sit on top of the zone overlays and pulse to cue the user that
       THIS is their buildable envelope for the selected project type. */
    .oesp-max-footprint {
      stroke-linejoin: round;
      stroke-linecap: round;
      fill-opacity: 0.45;
    }
    .oesp-placed--coach {
      fill: rgba(72, 105, 150, 0.55);
      stroke: rgba(40, 70, 110, 0.95);
      stroke-width: 1.8;
      stroke-linejoin: round;
    }
    .oesp-placed--custom {
      /* Warm taupe, distinct from coach's slate-blue and multiplex's dusty rose,
         reads as the "this is what you could build" shape at a glance. */
      fill: rgba(155, 110, 80, 0.62);
      stroke: rgba(95, 65, 45, 1);
      stroke-width: 2.0;
      stroke-linejoin: round;
    }
    .oesp-placed--addition {
      fill: rgba(178, 130, 70, 0.55);
      stroke: rgba(125, 85, 40, 0.95);
      stroke-width: 1.8;
      stroke-linejoin: round;
    }
    .oesp-placed--multiplex {
      /* Emerald green, distinct from the envelope's soft sage gradient
         (rgba(115-150, 155-184, 130-158)) so it reads as the buildable
         "max" filling INSIDE the envelope, not as the envelope itself. */
      fill: rgba(22, 163, 74, 0.45);
      stroke: rgba(21, 128, 61, 0.95);
      stroke-width: 1.8;
      stroke-linejoin: round;
      transform-box: fill-box;
      transform-origin: center;
    }
    /* "Max total footprint" permit-style layer, used on tabs (multiplex,
       addition, custom_homes) where the visualization is: hatched green =
       total legal cap polygon, gray = existing building re-drawn on top,
       the visible remaining green = "additional build area you could still
       build." Replaces the solid fill of .oesp-placed--<tab> because this
       rule is defined AFTER and matches with the same specificity. */
    .oesp-max-total {
      fill: url(#oesp-additional-hatch);
      stroke: rgba(21, 128, 61, 0.95);
      stroke-width: 1.8;
      stroke-dasharray: 7 5;
      stroke-linejoin: round;
      stroke-linecap: round;
      filter: drop-shadow(0 0 5px rgba(22, 163, 74, 0.28));
    }
    /* Multiplex-tab glow override, stack two drop-shadows for a halo
       look (close + far) and stronger green so the "max total footprint"
       reads as the active, live cue on the page. Paired with the matching
       `oesp-building--ontop` glow below: both layers wear the same green
       glow so the visual reads as "existing house + green hatch =
       complete max footprint", but the building itself is darker / opaque
       (slate fill) so the user still parses which part is "already built"
       vs. "could still build". Other tabs (addition, custom_homes) keep
       the modest base glow above. */
    .oesp-placed--multiplex.oesp-max-total {
      filter:
        drop-shadow(0 0 4px rgba(22, 163, 74, 0.65))
        drop-shadow(0 0 14px rgba(22, 163, 74, 0.45));
      animation: oesp-multiplex-glow 2.6s ease-in-out infinite;
    }
    @keyframes oesp-multiplex-glow {
      0%, 100% {
        filter:
          drop-shadow(0 0 4px rgba(22, 163, 74, 0.55))
          drop-shadow(0 0 12px rgba(22, 163, 74, 0.35));
      }
      50% {
        filter:
          drop-shadow(0 0 6px rgba(22, 163, 74, 0.85))
          drop-shadow(0 0 22px rgba(22, 163, 74, 0.60));
      }
    }
    @media (prefers-reduced-motion: reduce) {
      .oesp-placed--multiplex.oesp-max-total { animation: none; }
    }
    /* Existing-building variant for the "drawn on top of max-total hatch"
       pass. Needs to be near-opaque so the hatch underneath stops at the
       building edge, that's how the user reads "expansion area = max
       minus existing." Solid slate (not the gradient) + crisper stroke so
       the boundary between existing footprint and the green hatch is
       unambiguous at a glance. Cascade specificity wins because
       `oesp-building--ontop` is appended LAST to the class string. */
    .oesp-building.oesp-building--ontop {
      fill: rgba(51, 65, 85, 0.94);
      stroke: rgba(15, 23, 42, 0.95);
      stroke-width: 1.2;
      filter: none;
    }
    .oesp-building.oesp-building--teardown.oesp-building--ontop {
      /* Even on teardown tabs (multiplex / custom_homes) we want the
         existing building to read as solid on the hatch layer, the user
         needs to see *where* the current house sits to interpret the
         additional-build-area. */
      fill: rgba(51, 65, 85, 0.94);
      stroke: rgba(15, 23, 42, 0.95);
      stroke-width: 1.2;
    }
    /* Multiplex-tab match: give the existing-building overlay a related
       green halo so the user reads "building outline + green hatch = the
       max footprint they're describing". Slightly cooler / dimmer than
       the hatch glow so the two layers are visually distinct, the
       building reads as solid+contained, the hatch reads as live+open
       area. Stroke also nudges toward the same green family so the two
       outlines feel intentional rather than coincidental.
       Gated on `oesp-building--mplx` (only added by app-shell.js on the
       multiplex tab) so we don't bleed the green onto custom_homes which
       wears the same teardown class. */
    .oesp-building.oesp-building--ontop.oesp-building--mplx {
      stroke: rgba(20, 83, 45, 0.95);
      stroke-width: 1.6;
      filter:
        drop-shadow(0 0 3px rgba(34, 197, 94, 0.55))
        drop-shadow(0 0 9px rgba(22, 101, 52, 0.40));
      animation: oesp-multiplex-bld-glow 2.6s ease-in-out infinite;
    }
    @keyframes oesp-multiplex-bld-glow {
      0%, 100% {
        filter:
          drop-shadow(0 0 3px rgba(34, 197, 94, 0.45))
          drop-shadow(0 0 8px rgba(22, 101, 52, 0.30));
      }
      50% {
        filter:
          drop-shadow(0 0 5px rgba(34, 197, 94, 0.75))
          drop-shadow(0 0 14px rgba(22, 101, 52, 0.55));
      }
    }
    @media (prefers-reduced-motion: reduce) {
      .oesp-building.oesp-building--ontop.oesp-building--mplx {
        animation: none;
      }
    }
    /* Draggable placed shapes, grab cursor + pointer-events enabled.
       Applied alongside the per-project color class when _oespPlacedRingFor
       produces a morph (which is always now, for lots with a usable
       envelope). Non-morph fallbacks (rigid rects) don't get this class
       so they stay visually identical to pre-morph behaviour. */
    .oesp-placed-draggable {
      cursor: grab;
      pointer-events: auto;
      touch-action: none;
    }
    .oesp-placed-draggable.is-dragging,
    .oesp-placed-draggable:active {
      cursor: grabbing;
    }
    /* Breathing pulse so the max-footprint feels alive, not a static fill. */
    @keyframes oesp-max-pulse {
      0%, 100% { fill-opacity: 0.30; stroke-width: 1.6; }
      50%      { fill-opacity: 0.60; stroke-width: 2.4; }
    }
    .oesp-max-footprint.oesp-pulse {
      animation: oesp-max-pulse 2.4s ease-in-out infinite;
    }
    @media (prefers-reduced-motion: reduce) {
      .oesp-max-footprint.oesp-pulse {
        animation: none;
        fill-opacity: 0.44;
      }
    }
    /* Per-tab pulse overrides, placed AFTER the generic rule so they
       win the cascade. Custom home uses a much higher fill opacity so
       the magenta stays vivid against the green envelope. */
    @keyframes oesp-custom-pulse {
      0%, 100% { fill-opacity: 0.55; stroke-width: 2.0; }
      50%      { fill-opacity: 0.85; stroke-width: 2.8; }
    }
    .oesp-placed--custom.oesp-pulse {
      animation: oesp-custom-pulse 2.4s ease-in-out infinite;
    }
    @media (prefers-reduced-motion: reduce) {
      .oesp-placed--custom.oesp-pulse {
        animation: none;
        fill-opacity: 0.70;
      }
    }
    /* Max-total-footprint layer, quiet luminous breath of the drop-shadow
       only. The polygon itself stays still (no scale) so the dashed outline
       reads as a clean boundary; the soft emerald halo expanding/contracting
       around it keeps the shape feeling alive without redrawing the area. */
    @keyframes oesp-max-total-glow {
      0%, 100% { filter: drop-shadow(0 0 3px rgba(22, 163, 74, 0.22)); }
      50%      { filter: drop-shadow(0 0 9px rgba(22, 163, 74, 0.55)); }
    }
    .oesp-max-total {
      animation: oesp-max-total-glow 3.6s ease-in-out infinite;
    }
    @media (prefers-reduced-motion: reduce) {
      .oesp-max-total {
        animation: none;
        filter: drop-shadow(0 0 5px rgba(22, 163, 74, 0.38));
      }
    }
    .oesp-placed-label {
      font: 700 12px/1.1 -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      fill: #ffffff;
      paint-order: stroke;
      stroke: rgba(15, 23, 42, 0.8);
      stroke-width: 2.8;
      stroke-linejoin: round;
      text-anchor: middle;
      pointer-events: none;
    }
    .oesp-placed-label--sub {
      font-size: 10px;
      font-weight: 600;
      stroke-width: 2.4;
    }
    /* Subtle draw-in for the envelope when the panel first populates. */
    .oesp-envelope.oesp-draw {
      animation: oesp-draw 1800ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
    }
    @keyframes oesp-draw { to { stroke-dashoffset: 0; } }

    /* Staggered materialize: grid first, parcel fades + settles, building
       drops in, envelope stroke draws. Feels composed rather than "painted
       all at once." */
    .oesp-grid-bg {
      opacity: 0;
      animation: oesp-layer-fade 780ms ease-out 120ms forwards;
    }
    .oesp-parcel {
      opacity: 0;
      transform: translateY(6px);
      transform-origin: center;
      transform-box: fill-box;
      animation: oesp-layer-settle 900ms cubic-bezier(0.22, 1, 0.36, 1) 280ms forwards;
    }
    .oesp-building {
      opacity: 0;
      transform: translateY(4px) scale(0.98);
      transform-origin: center;
      transform-box: fill-box;
      animation: oesp-layer-settle 820ms cubic-bezier(0.22, 1, 0.36, 1) 520ms forwards;
    }
    .oesp-accessory {
      opacity: 0;
      animation: oesp-layer-fade 520ms ease-out 700ms forwards;
    }
    @keyframes oesp-layer-fade { to { opacity: 1; } }
    @keyframes oesp-layer-settle {
      to { opacity: 1; transform: translateY(0) scale(1); }
    }

    @media (prefers-reduced-motion: reduce) {
      .oesp-envelope.oesp-draw { animation: none; stroke-dashoffset: 0 !important; }
      .oesp-grid-bg, .oesp-parcel, .oesp-building, .oesp-accessory {
        animation: none; opacity: 1; transform: none;
      }
    }

    /* ── Overlay: property chips (modern floating pill labels) ──────────
       Each chip is a <g class="oesp-chip"> containing a dashed leader line
       from the polygon anchor to the chip, a rounded rect background, a
       small uppercase label, and a bold value. SVG-native so it clones
       cleanly into the mirrored persistent preview. */
    .oesp-chip-leader {
      stroke: rgba(15, 23, 42, 0.7);
      stroke-width: 1.6;
      stroke-dasharray: 3 3;
      stroke-linecap: round;
      fill: none;
    }
    .oesp-chip-leader-dot {
      fill: rgba(15, 23, 42, 0.9);
      stroke: rgba(255, 255, 255, 0.9);
      stroke-width: 1;
    }
    .oesp-chip-bg {
      fill: rgba(255, 255, 255, 0.96);
      stroke: rgba(15, 23, 42, 0.1);
      stroke-width: 0.8;
      filter: url(#oesp-chip-shadow);
    }
    .oesp-chip-label {
      font-family: 'Sora', system-ui, sans-serif;
      font-weight: 700;
      fill: #64748b;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      dominant-baseline: hanging;
    }
    .oesp-chip-value {
      font-family: 'Sora', system-ui, sans-serif;
      font-weight: 800;
      fill: #0f172a;
      letter-spacing: -0.01em;
      dominant-baseline: alphabetic;
    }
    .oesp-chip--envelope .oesp-chip-value { fill: #047857; }
    .oesp-chip--building .oesp-chip-value { fill: #475569; }
    /* Placed-shape chip, the single chip shown when a project tab is active.
       Colour picks up the active tab's placed-polygon tint for a subtle tie-in. */
    .oesp-chip--placed .oesp-chip-value { fill: #0f172a; }

    /* ── Overlay: setback dimensions (architectural extension + dim lines) ─
       Each setback is a <g class="oesp-dim"> with:
       - two dashed extension lines at the edge corners,
       - one solid dimension line parallel to the edge with arrowheads,
       - a mid-text label with a white halo so it reads on any background.

       Currently HIDDEN, the underlying setback geometry can be wrong on
       irregular lots, so we suppress the visual rather than show incorrect
       numbers. Re-enable by removing the rule below once the derivation
       is fixed. */
    .oesp-dim { display: none !important; }

    .oesp-dim-ext {
      stroke: rgba(30, 41, 59, 0.72);
      stroke-width: 0.7;
      stroke-dasharray: 2 2;
      fill: none;
    }
    .oesp-dim-line {
      stroke: rgba(30, 41, 59, 0.95);
      stroke-width: 1.05;
      fill: none;
    }
    .oesp-dim-arrowhead {
      fill: rgba(30, 41, 59, 0.95);
    }
    .oesp-dim-label {
      font-family: 'JetBrains Mono', 'Menlo', ui-monospace, monospace;
      font-size: 12px;
      font-weight: 700;
      fill: #0f172a;
      paint-order: stroke fill;
      stroke: rgba(255, 255, 255, 0.95);
      stroke-width: 2.5;
      stroke-linejoin: round;
      text-anchor: middle;
      dominant-baseline: central;
    }

    /* Per-edge length labels on the parcel polygon, PDF-style "break
       the edge line with a number in the middle". The thick halo stroke
       uses the SVG-background gradient colour so it visually punches a
       hole through the parcel's outline where the number sits. */
    .oesp-edge-label {
      font-family: 'JetBrains Mono', 'Menlo', ui-monospace, monospace;
      font-size: 15px;
      font-weight: 700;
      fill: #0f172a;
      paint-order: stroke fill;
      stroke: #f8fafc;
      stroke-width: 6;
      stroke-linejoin: round;
      text-anchor: middle;
      dominant-baseline: central;
      letter-spacing: 0.01em;
    }

    /* Phone-sized cards: the SVG fits into a much smaller box, which
       shrinks every userspace unit. Bump edge labels (and the halo that
       punches them through the parcel outline) so dimensions stay
       readable instead of becoming sub-12px on a small screen, but
       not so much that they compete with the corner property chips,
       which carry the headline lot/envelope/frontage values. Edge
       labels are subordinate measurements. */
    @media (max-width: 640px) {
      .oesp-edge-label {
        font-size: 25px;
        stroke-width: 7;
      }
    }

    /* Entry animations, chips fade + lift, dimensions draw their line in.
       Durations doubled so the reveal matches the slower card rise. */
    .oesp-chip {
      opacity: 0;
      transform-origin: center;
      animation: oesp-chip-in 920ms cubic-bezier(0.22, 1, 0.36, 1) 840ms forwards;
    }
    .oesp-chip--lotarea { animation-delay: 840ms; }
    .oesp-chip--frontage { animation-delay: 1000ms; }
    .oesp-chip--envelope { animation-delay: 1160ms; }
    .oesp-chip--building { animation-delay: 1320ms; }
    .oesp-chip--placed { animation-delay: 200ms; }
    @keyframes oesp-chip-in {
      0%   { opacity: 0; transform: translateY(4px) scale(0.95); }
      100% { opacity: 1; transform: translateY(0) scale(1); }
    }

    .oesp-dim { opacity: 0; animation: oesp-dim-fade 640ms ease-out 1040ms forwards; }
    .oesp-dim--rear  { animation-delay: 1200ms; }
    .oesp-dim--left  { animation-delay: 1360ms; }
    .oesp-dim--right { animation-delay: 1520ms; }
    .oesp-dim-line {
      stroke-dasharray: 600;
      stroke-dashoffset: 600;
      animation: oesp-dim-draw 1040ms cubic-bezier(0.22, 1, 0.36, 1) 1200ms forwards;
    }
    .oesp-dim--rear  .oesp-dim-line { animation-delay: 1360ms; }
    .oesp-dim--left  .oesp-dim-line { animation-delay: 1520ms; }
    .oesp-dim--right .oesp-dim-line { animation-delay: 1680ms; }
    @keyframes oesp-dim-fade { to { opacity: 1; } }
    @keyframes oesp-dim-draw { to { stroke-dashoffset: 0; } }

    @media (prefers-reduced-motion: reduce) {
      .oesp-chip, .oesp-dim { animation: none; opacity: 1; transform: none; }
      .oesp-dim-line { animation: none; stroke-dashoffset: 0 !important; }
    }

    /* ── Draw Your Own (DYO), inline shape editor ──────────────────────
       Locked control bar that docks under the SVG card whenever the user
       enters shape-edit mode. Replaces the old floating overlay so the
       controls feel like part of the report. Two-row layout: a small
       eyebrow + hint at top, sliders / area / buttons in a flex row
       below. Wraps gracefully on narrow viewports. */
    .dyo-panel {
      margin: 0;
      padding: 14px 18px 16px;
      background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
      border-top: 1px solid #e2e8f0;
      border-radius: 0 0 14px 14px;
      font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', sans-serif;
      font-size: 13px;
      color: #0f172a;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
    }
    .dyo-panel[hidden] { display: none; }
    .dyo-panel__head {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 10px;
      flex-wrap: wrap;
    }
    .dyo-panel__eyebrow {
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: #1d4ed8;
    }
    .dyo-panel__eyebrow::before {
      content: "✎";
      margin-right: 6px;
      font-size: 12px;
    }
    .dyo-panel__hint {
      font-size: 11px;
      color: #64748b;
      line-height: 1.45;
      flex: 1;
      min-width: 0;
      text-align: right;
    }
    /* Inline chip showing the active catalogue template's name. Lives in
       the YOUR FOOTPRINT header so it sits directly under the SVG card,
       making it obvious which catalogue item the placed shape represents.
       Hidden by default; surfaces only when .is-catalogue is on the panel. */
    .dyo-panel__catalogue-chip {
      display: none;
      align-items: center;
      gap: 8px;
      padding: 4px 12px;
      border-radius: 999px;
      background: #eef2ff;
      border: 1px solid #c7d2fe;
      color: #1e1b4b;
      font: 600 12px/1.2 'Sora', system-ui, sans-serif;
      letter-spacing: 0.01em;
    }
    .dyo-panel.is-catalogue .dyo-panel__catalogue-chip { display: inline-flex; }
    .dyo-panel__catalogue-chip-tag {
      font-size: 9.5px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      opacity: 0.65;
    }
    .dyo-panel__catalogue-chip-name {
      font-size: 12px;
      font-weight: 700;
    }
    .dyo-panel__controls {
      display: flex;
      align-items: center;
      gap: 14px;
      flex-wrap: wrap;
    }
    /* Quick-shape presets, sit under the sliders. The row breaks to its own
       line because the sliders+area+btns above already fill the row. */
    .dyo-panel__presets {
      display: flex;
      align-items: center;
      gap: 8px;
      flex: 1 1 100%;
      flex-wrap: wrap;
      margin-top: -2px;
    }
    .dyo-panel__presets-label {
      font-size: 11.5px;
      font-weight: 700;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: #64748b;
      margin-right: 2px;
    }
    .dyo-preset-btn {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 5px 10px 5px 8px;
      background: #ffffff;
      border: 1px solid #cbd5e1;
      border-radius: 8px;
      color: #1e293b;
      font-size: 12px;
      font-weight: 600;
      line-height: 1;
      cursor: pointer;
      transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    }
    .dyo-preset-btn svg {
      width: 16px;
      height: 16px;
      flex-shrink: 0;
    }
    .dyo-preset-btn:hover {
      background: #f8fafc;
      border-color: #94a3b8;
      color: #c8102e;
    }
    .dyo-preset-btn:active { transform: translateY(1px); }
    .dyo-preset-btn:focus-visible {
      outline: 2px solid rgba(200, 16, 46, 0.5);
      outline-offset: 2px;
    }
    .dyo-panel__row {
      display: flex;
      align-items: center;
      gap: 10px;
      flex: 1 1 200px;
      min-width: 180px;
    }
    .dyo-panel__label {
      display: inline-flex;
      align-items: baseline;
      gap: 6px;
      font-size: 11px;
      font-weight: 600;
      color: #475569;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      white-space: nowrap;
    }
    .dyo-panel__label span { color: #0f172a; font-variant-numeric: tabular-nums; font-size: 12px; }
    .dyo-panel input[type="range"] {
      flex: 1;
      min-width: 90px;
      accent-color: #1d4ed8;
    }
    .dyo-panel__area {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 8px 12px;
      background: linear-gradient(180deg, #f1f5f9 0%, #e2e8f0 100%);
      border-radius: 8px;
      font-size: 11px;
      color: #475569;
      font-weight: 600;
      white-space: nowrap;
    }
    .dyo-panel__area-label {
      font-size: 10px;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      color: #64748b;
    }
    .dyo-panel__area strong {
      color: #0f172a;
      font-size: 14px;
      font-variant-numeric: tabular-nums;
    }
    .dyo-panel__max {
      font-size: 10px;
      font-weight: 600;
      color: #64748b;
      letter-spacing: 0.02em;
    }
    .dyo-panel__area.is-over-cap {
      background: linear-gradient(180deg, #fee2e2 0%, #fecaca 100%);
    }
    .dyo-panel__area.is-over-cap strong,
    .dyo-panel__area.is-over-cap .dyo-panel__max { color: #b91c1c; }
    .dyo-panel__btns {
      display: inline-flex;
      gap: 6px;
      margin-left: auto;
    }
    .dyo-panel__btns button {
      padding: 8px 14px;
      border: 1px solid #cbd5e1;
      border-radius: 8px;
      background: #ffffff;
      color: #0f172a;
      font-size: 12px;
      font-weight: 600;
      cursor: pointer;
      transition: background 0.12s, border-color 0.12s, transform 0.08s;
    }
    .dyo-panel__btns button:hover { background: #f8fafc; border-color: #94a3b8; }
    .dyo-panel__btns button:active { transform: translateY(1px); }
    .dyo-panel__btns button.primary {
      background: #0f172a;
      color: #ffffff;
      border-color: #0f172a;
    }
    .dyo-panel__btns button.primary:hover { background: #1e293b; }
    /* Draw-my-own, only visible when a catalogue template has been
       applied to the lot. Lets the user abandon the catalogue, restore
       the auto-placed starter polygon, and dismiss the showcase panel. */
    .dyo-draw-own-btn { display: none; }
    .dyo-panel.is-catalogue .dyo-draw-own-btn { display: inline-flex; align-items: center; }
    .dyo-panel.is-catalogue .dyo-draw-own-btn::before {
      content: '✏️';
      margin-right: 6px;
      font-size: 13px;
    }
    .dyo-panel__btns button.danger {
      color: #b91c1c;
      border-color: #fecaca;
    }
    .dyo-panel__btns button.danger:hover { background: #fef2f2; }
    .dyo-panel__btns button.save {
      background: linear-gradient(135deg, #334155, #1e293b);
      color: #ffffff;
      border-color: #1e293b;
    }
    .dyo-panel__btns button.save:hover { filter: brightness(1.05); }
    .dyo-panel__btns button:disabled,
    .dyo-panel__btns button.save:disabled {
      opacity: 0.6;
      cursor: not-allowed;
      transform: none;
    }
    .dyo-panel__btns button.save.is-sent {
      background: #16a34a;
      border-color: #16a34a;
    }
    .dyo-panel__btns button.save.is-failed {
      background: #ffffff;
      color: #b91c1c;
      border-color: #fecaca;
    }
    /* Hidden by default; only laid out as a flex row when the JS reveals
       it by removing the [hidden] attribute. Without :not([hidden]) the
       custom display: inline-flex would override the browser's [hidden]
       rule and leave an empty padded sliver visible next to Done. */
    .dyo-save-inline { display: none; }
    .dyo-save-inline:not([hidden]) {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      margin-left: 8px;
      padding: 4px 6px;
      border: 1px solid #cbd5e1;
      border-radius: 8px;
      background: #f8fafc;
    }
    .dyo-save-inline input[type="email"] {
      border: 1px solid #cbd5e1;
      border-radius: 6px;
      padding: 5px 8px;
      font-size: 12px;
      width: 200px;
      background: #ffffff;
    }
    .dyo-save-inline input[type="email"]:focus {
      outline: none;
      border-color: #2563eb;
      box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.18);
    }
    .dyo-save-inline button {
      padding: 6px 10px;
      border: 1px solid #1d4ed8;
      background: #2563eb;
      color: #ffffff;
      border-radius: 6px;
      font-size: 12px;
      font-weight: 600;
      cursor: pointer;
    }
    .dyo-save-inline button:hover { background: #1d4ed8; }
    .dyo-save-inline .dyo-save-inline__msg {
      font-size: 11px;
      color: #b91c1c;
    }

    /* Stack to vertical on narrow viewports, bar stays under the SVG
       but each control row gets its own line. Bigger touch targets and
       roomier spacing so it's actually thumb-friendly. */
    @media (max-width: 640px) {
      .dyo-panel { padding: 14px 16px 16px; }
      .dyo-panel__hint {
        text-align: left;
        font-size: 12px;
        line-height: 1.4;
      }
      .dyo-panel__head { gap: 8px; }
      .dyo-panel__warning {
        font-size: 12px;
        padding: 5px 10px;
      }
      .dyo-panel__controls { flex-direction: column; align-items: stretch; gap: 14px; }
      .dyo-panel__row {
        flex: 1 1 auto;
        gap: 12px;
        min-height: 40px;
      }
      .dyo-panel__label {
        font-size: 12px;
        min-width: 88px;
      }
      .dyo-panel__label span { font-size: 13px; }
      /* Beefier slider, fatter track, larger thumb for thumb-friendly
         dragging. Affects both Size and Rotation sliders. */
      .dyo-panel input[type="range"] {
        flex: 1;
        height: 28px;
        accent-color: #1d4ed8;
      }
      .dyo-panel input[type="range"]::-webkit-slider-thumb {
        appearance: none;
        -webkit-appearance: none;
        width: 22px;
        height: 22px;
        border-radius: 50%;
        background: #1d4ed8;
        border: 2px solid #ffffff;
        box-shadow: 0 1px 3px rgba(15, 23, 42, 0.25);
      }
      .dyo-panel input[type="range"]::-moz-range-thumb {
        width: 22px;
        height: 22px;
        border-radius: 50%;
        background: #1d4ed8;
        border: 2px solid #ffffff;
        box-shadow: 0 1px 3px rgba(15, 23, 42, 0.25);
      }
      .dyo-panel__btns { margin-left: 0; }
      .dyo-panel__btns button { flex: 1; }
    }

    /* SVG pieces, the editable polygon, vertex handles, and mid-edge
       insert handles. Must be above the other svg layers so they catch
       pointer events. */
    .dyo-shape {
      fill: rgba(59, 130, 246, 0.28);
      stroke: #1d4ed8;
      stroke-width: 1.8;
      stroke-dasharray: 5 3;
      pointer-events: fill;   /* drag the interior to move the whole shape */
      cursor: move;
      filter: drop-shadow(0 1px 2px rgba(29, 78, 216, 0.35));
    }
    .dyo-shape.is-dragging { cursor: grabbing; }
    /* 3-band bounds indicator. Polygon and panel pill share the same
       palette so the user sees a single coordinated signal:
         FITS   (≤ 0.1 m past edge): blue dashed shape, no pill
         TIGHT  (0.1-1.5 m past edge): amber shape + amber pill
         OUT    (> 1.5 m past edge): red shape + red pill
       Catalogue tile verdicts (_aduFitUi) use the same thresholds. */
    .dyo-shape.is-tight-envelope {
      fill: rgba(234, 88, 12, 0.18);
      stroke: #ea580c;
      stroke-width: 1.6;
    }
    .dyo-shape.is-outside-envelope {
      fill: rgba(220, 38, 38, 0.18);
      stroke: #dc2626;
      stroke-width: 1.6;
    }
    .dyo-panel__warning {
      /* Inline chip in the head, sitting next to the "Your footprint"
         label. Hidden by default; surfaced via .is-outside-envelope or
         .is-tight-envelope on the panel. */
      display: none;
      align-items: center;
      gap: 6px;
      padding: 4px 10px;
      margin: 0;
      border-radius: 999px;
      font-size: 11.5px;
      font-weight: 700;
      letter-spacing: 0.01em;
      line-height: 1.2;
      /* Default palette (red / out-of-bounds). Tight-band overrides below. */
      background: #fef2f2;
      border: 1px solid #fecaca;
      color: #b91c1c;
    }
    .dyo-panel__warning svg { flex-shrink: 0; }
    .dyo-panel.is-outside-envelope .dyo-panel__warning,
    .dyo-panel.is-tight-envelope .dyo-panel__warning { display: inline-flex; }
    .dyo-panel.is-tight-envelope .dyo-panel__warning {
      background: #fff7ed;
      border-color: #fed7aa;
      color: #c2410c;
    }
    /* ── Bottom row: bare text + icons under the map ─────────────────
       Sits in NORMAL FLOW at the top of the dyo-panel, right under
       the SVG card's bottom edge. Previously absolute-positioned over
       the bottom strip of the SVG, which obscured the lot's edge
       callouts (e.g. "MAX CUSTOM HOME 3,972 sq ft"). Moving the row
       out of the SVG render area means nothing important on the map
       ever sits as low as these controls, the SVG owns its full
       height, and the controls live just below it on the seam.
       Still no frame / no chrome, reads as floating text + icons
       attached to the bottom of the map; only Reset / Save this keep
       real button styling because they need to look pressable. */
    .dyo-panel { position: relative; }
    .dyo-panel__bottom-row {
      display: flex;
      align-items: center;
      gap: 12px;
      margin: 0 0 12px;
      padding: 0;
      background: transparent;
      border: 0;
      border-radius: 0;
      box-shadow: none;
      flex-wrap: nowrap;
    }
    .dyo-panel__bottom-row .dyo-panel__area {
      /* Plain text on the map, no chip background. Tiny halo keeps it
         legible without painting a card behind it. */
      margin: 0;
      flex-shrink: 0;
      background: transparent;
      padding: 0;
      text-shadow: 0 0 6px rgba(255, 255, 255, 0.9), 0 1px 2px rgba(255, 255, 255, 0.6);
    }
    .dyo-panel__bottom-row .dyo-panel__area.is-over-cap { background: transparent; }
    .dyo-panel__bottom-row .dyo-panel__presets {
      /* Centred between the footprint text and the action buttons.
         Tight gap so the 4 shape icons read as a single group, not
         four scattered targets. */
      flex: 1 1 auto;
      justify-content: center;
      align-items: center;
      margin-top: 0;
      gap: 4px;
    }
    .dyo-panel__bottom-row .dyo-panel__presets-label {
      /* Hide "Shapes" label, icons alone are self-explanatory. */
      display: none;
    }
    .dyo-panel__bottom-row .dyo-preset-btn {
      /* Strip the button chrome, just the SVG icon hovering on the
         map. Larger hit-target / icon size so the icons feel intentional
         rather than tiny. */
      padding: 6px 8px;
      background: transparent;
      border-color: transparent;
      color: #0f172a;
      filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.85));
    }
    .dyo-panel__bottom-row .dyo-preset-btn svg {
      width: 26px;
      height: 26px;
    }
    .dyo-panel__bottom-row .dyo-preset-btn:hover {
      background: transparent;
      border-color: transparent;
      color: #c8102e;
    }
    .dyo-panel__bottom-row .dyo-panel__btns {
      /* The one chunk that KEEPS real button chrome, Reset / Save this
         need to look pressable. Anchored bottom-right of the bar. */
      margin-left: 0;
      flex-shrink: 0;
      gap: 6px;
    }
    .dyo-panel__bottom-row .dyo-panel__btns button {
      padding: 6px 12px;
      font-size: 12px;
    }
    @media (max-width: 640px) {
      /* On narrow viewports, drop back to normal flow inside the panel, 
         floating bare text would get lost on a small map. Each row gets
         a full line of its own with thumb-friendly tap targets. */
      .dyo-panel__bottom-row {
        position: static;
        margin-top: 12px;
        padding: 0;
        gap: 12px;
        flex-wrap: wrap;
        pointer-events: auto;
      }
      .dyo-panel__bottom-row .dyo-panel__area {
        background: linear-gradient(180deg, #f1f5f9 0%, #e2e8f0 100%);
        padding: 10px 14px;
        text-shadow: none;
        font-size: 12px;
        flex-basis: 100%;  /* own line, easier to read the footprint number */
        order: 1;
        justify-content: flex-start;
      }
      .dyo-panel__bottom-row .dyo-panel__area strong { font-size: 16px; }
      .dyo-panel__bottom-row .dyo-panel__presets {
        flex-basis: 100%;
        order: 2;
        justify-content: flex-start;
        align-items: center;
        gap: 8px;
      }
      .dyo-panel__bottom-row .dyo-panel__presets-label {
        display: inline;
        font-size: 12px;
      }
      .dyo-panel__bottom-row .dyo-panel__btns {
        flex-basis: 100%;
        order: 3;
        margin-left: 0;
        gap: 10px;
      }
      .dyo-panel__bottom-row .dyo-panel__btns button {
        /* Thumb-friendly tap targets, at least 44px tall (Apple HIG)
           and equal-width via flex: 1 so they share the row cleanly. */
        flex: 1 1 0;
        min-height: 44px;
        padding: 10px 14px;
        font-size: 14px;
        font-weight: 600;
        white-space: nowrap;  /* prevent "Save this" wrap */
      }
      .dyo-panel__bottom-row .dyo-preset-btn {
        /* Bigger square hit targets for the shape icons (≥44×44). */
        flex: 0 0 auto;
        min-width: 44px;
        min-height: 44px;
        padding: 8px;
        background: #ffffff;
        border: 1px solid #cbd5e1;
        border-radius: 10px;
        filter: none;
      }
      .dyo-panel__bottom-row .dyo-preset-btn svg {
        width: 24px;
        height: 24px;
      }
    }
    .dyo-handle {
      fill: #ffffff;
      stroke: #1d4ed8;
      stroke-width: 2;
      cursor: grab;
      pointer-events: all;
      transition: fill 0.1s, r 0.1s;
    }
    .dyo-handle:hover { fill: #dbeafe; }
    .dyo-handle.is-active { fill: #2563eb; stroke: #ffffff; cursor: grabbing; }
    .dyo-mid-handle {
      fill: #93c5fd;
      stroke: #1d4ed8;
      stroke-width: 1.5;
      cursor: copy;
      pointer-events: all;
      opacity: 0.6;
    }
    .dyo-mid-handle:hover { opacity: 1; fill: #60a5fa; }

    /* "Edit shape" entry button, hidden because DYO mode is now always-on
       for shape-supporting tabs; the pill would be redundant. */
    .oesp-edit-shape-btn {
      display: none !important;
      position: absolute;
      bottom: 10px;
      right: 10px;
      padding: 7px 12px;
      background: rgba(15, 23, 42, 0.88);
      color: #ffffff;
      border: 0;
      border-radius: 20px;
      font-size: 12px;
      font-weight: 600;
      letter-spacing: 0.01em;
      cursor: pointer;
      z-index: 12;
      backdrop-filter: blur(6px);
      box-shadow: 0 4px 16px rgba(15, 23, 42, 0.28);
      transition: background 0.12s, transform 0.12s;
    }
    .oesp-edit-shape-btn:hover { background: #1e293b; transform: translateY(-1px); }
    .oesp-edit-shape-btn[hidden] { display: none; }
    .oesp-edit-shape-btn::before {
      content: "✎";
      margin-right: 6px;
      font-size: 14px;
    }

    /* SVG envelope placeholder drawn into the iframe's loading overlay so
       users see their actual lot + envelope while satellite tiles load. */
    .options-envelope-preview-slot {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 16px;
      opacity: 0;
      transition: opacity 220ms ease;
    }
    .options-envelope-preview-slot.is-populated { opacity: 1; }
    .options-envelope-preview-slot svg {
      width: 100%;
      height: 100%;
      max-width: 720px;
      max-height: 100%;
      display: block;
    }
    /* Shrink the maple-leaf to a corner indicator when the placeholder has
       real content, the SVG does the heavy lifting visually, the leaf is
       just a "still working" cue. */
    .options-envelope-loading-overlay.has-preview .loader-maple {
      position: absolute;
      top: 12px;
      right: 12px;
      width: 32px;
      height: 32px;
      filter: drop-shadow(0 2px 8px rgba(200, 16, 46, 0.25));
    }
    .options-envelope-loading-overlay.has-preview .options-envelope-loading-text {
      position: absolute;
      bottom: 12px;
      padding: 6px 12px;
      background: rgba(255, 255, 255, 0.92);
      border-radius: 8px;
      box-shadow: 0 1px 3px rgba(15,23,42,0.1);
      font-size: 12px;
    }

    /* Multiplex / custom homes embedded map: match full Zoned address-loader look + block clicks until ready */
    .multifamily-canvas-loading-overlay {
      background: rgba(255, 255, 255, 0.92);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      gap: 16px;
    }

    .multifamily-canvas-loading-overlay.visible,
    .options-envelope-loading-overlay.visible {
      display: flex;
    }

    .multifamily-canvas-loading-overlay.visible {
      pointer-events: auto;
    }

    .multifamily-canvas-loading-overlay .loader-maple,
    .options-envelope-loading-overlay .loader-maple {
      width: 64px;
      height: 64px;
      filter: drop-shadow(0 3px 14px rgba(200, 16, 46, 0.3));
    }

    .multifamily-canvas-loading-overlay .loader-maple {
      width: 80px;
      height: 80px;
      filter: drop-shadow(0 4px 20px rgba(200, 16, 46, 0.4));
    }

    .multifamily-canvas-loading-overlay .loader-maple .leaf-bg,
    .options-envelope-loading-overlay .loader-maple .leaf-bg {
      fill: rgba(200, 16, 46, 0.18);
    }

    .multifamily-canvas-loading-overlay .loader-maple .leaf-bg {
      fill: rgba(200, 16, 46, 0.2);
    }

    .multifamily-canvas-loading-overlay .loader-maple .leaf-stroke,
    .options-envelope-loading-overlay .loader-maple .leaf-stroke {
      fill: none;
      stroke: #c8102e;
      stroke-width: 120;
      stroke-linecap: round;
      stroke-linejoin: round;
      stroke-dasharray: 1;
      stroke-dashoffset: 1;
      animation: trace-leaf-full 2s ease-in-out infinite;
    }

    .multifamily-canvas-loading-text,
    .options-envelope-loading-text {
      font-size: 14px;
      font-weight: 600;
      color: #1f2937;
      animation: pulse-loader-text 1.5s ease-in-out infinite;
    }

    .multifamily-canvas-loading-text {
      font-size: 18px;
      font-weight: 500;
      color: #1a1a2e;
    }

    .multifamily-canvas-loading-subtext {
      font-size: 14px;
      font-weight: 500;
      color: #64748b;
      margin-top: -8px;
      text-align: center;
      max-width: 280px;
      line-height: 1.45;
      animation: pulse-loader-text 1.5s ease-in-out infinite;
    }

    .draw-siteplan-promo {
      position: absolute;
      left: 14px;
      right: 14px;
      bottom: 14px;
      z-index: 3;
      display: none;
      pointer-events: none;
      margin: 0;
    }

    .draw-siteplan-promo.visible {
      display: block;
    }

    .draw-siteplan-promo-card {
      max-width: none;
      background: transparent;
      color: #ffffff;
      border: 0;
      border-radius: 0;
      padding: 0;
      backdrop-filter: none;
      box-shadow: none;
      pointer-events: auto;
    }

    .draw-siteplan-promo-copy {
      margin: 0 0 10px;
      font-size: 13px;
      line-height: 1.45;
      color: #ffffff;
      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.95), 0 3px 8px rgba(0, 0, 0, 0.85);
    }

    .draw-siteplan-promo-cta {
      border: 1px solid #22c55e;
      background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
      color: #ffffff;
      border-radius: 999px;
      padding: 9px 16px;
      font-size: 12px;
      font-weight: 800;
      letter-spacing: 0.02em;
      cursor: pointer;
      transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
      box-shadow: 0 6px 16px rgba(34, 197, 94, 0.34);
    }

    .draw-siteplan-promo-cta:hover {
      transform: translateY(-1px);
      box-shadow: 0 8px 20px rgba(34, 197, 94, 0.4);
      filter: brightness(1.02);
    }

    #drawSitePlanView #drawSitePlanPromo {
      position: absolute;
      left: 14px;
      right: 14px;
      bottom: 14px;
      z-index: 3;
      pointer-events: none;
      margin: 0;
    }

    #drawSitePlanView #drawSitePlanPromo .draw-siteplan-promo-card {
      background: transparent;
      border: 0;
      border-radius: 0;
      padding: 0;
      text-align: center;
      box-shadow: none;
      pointer-events: auto;
    }

    #drawSitePlanView #drawSitePlanPromo .draw-siteplan-promo-copy {
      display: none;
    }

    #drawSitePlanView #drawSitePlanPromo .draw-siteplan-promo-cta {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
    }

    .template-showcase {
      border: 0;
      border-radius: 0;
      background: transparent;
      padding: 0;
      margin: 0 0 10px;
      box-shadow: none;
    }

    .template-showcase.is-hidden {
      display: none;
    }

    .template-showcase-layout {
      display: grid;
      grid-template-columns: minmax(220px, 360px) minmax(0, 1fr);
      gap: 14px;
      align-items: stretch;
    }

    .template-showcase-frame {
      position: relative;
      border-radius: 14px;
      overflow: hidden;
      background: #f1f5f9;
      border: 2px solid rgba(200, 16, 46, 0.58);
      box-shadow: 0 10px 28px rgba(15, 23, 42, 0.2), 0 2px 8px rgba(200, 16, 46, 0.18);
      width: 100%;
      aspect-ratio: 1 / 1;
      min-height: 0;
    }

    /* Loading spinner shown while first slide loads */
    .template-showcase-frame::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      width: 32px;
      height: 32px;
      margin: -16px 0 0 -16px;
      border: 3px solid #e2e8f0;
      border-top-color: #c8102e;
      border-radius: 50%;
      animation: showcaseSpinner 0.7s linear infinite;
      z-index: 0;
    }
    .template-showcase-frame.has-loaded::before {
      display: none;
    }
    @keyframes showcaseSpinner {
      to { transform: rotate(360deg); }
    }

    .template-showcase-slide {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      min-height: 0;
      display: block;
      object-fit: cover;
      background: transparent;
      opacity: 0;
      filter: blur(2px);
      transform: scale(1);
      transition: opacity 600ms ease, filter 600ms ease;
      z-index: 1;
    }

    .template-showcase-slide.is-active {
      opacity: 1;
      filter: blur(0);
      animation: templateShowcaseKenBurns 5250ms ease-out forwards;
    }

    .template-showcase-slide.is-exiting {
      opacity: 0;
      filter: blur(0);
      transition: opacity 2000ms ease;
      animation: templateShowcaseExitZoom 2000ms ease-out forwards;
      pointer-events: none;
    }

    @keyframes templateShowcaseKenBurns {
      from {
        transform: scale(1);
      }
      to {
        transform: scale(1.07);
      }
    }

    @keyframes templateShowcaseExitZoom {
      from {
        transform: scale(1.07);
      }
      to {
        transform: scale(1.1);
      }
    }

    .template-showcase-frame::after {
      content: '';
      position: absolute;
      inset: 0;
      pointer-events: none;
      background: linear-gradient(to top, rgba(2, 6, 23, 0.08), rgba(2, 6, 23, 0.02) 40%, rgba(2, 6, 23, 0) 70%);
    }

    /* Catalogue items without photos still get a slideshow frame, just with
       a subtle placeholder so admins/users see the frame exists. The frame
       takes the same square space as a photo-loaded one so the meta panel
       layout stays stable across catalogue items. */
    .template-showcase-frame.is-empty-state {
      background: linear-gradient(135deg, #f1f5f9, #e2e8f0);
    }
    .template-showcase-empty {
      position: absolute;
      inset: 0;
      display: none;
      align-items: center;
      justify-content: center;
      color: #64748b;
      font-size: 13px;
      font-style: italic;
      text-align: center;
      padding: 16px;
      z-index: 2;
      border-radius: inherit;
    }

    .template-showcase-meta {
      border: 2px solid rgba(200, 16, 46, 0.52);
      border-radius: 14px;
      background: #ffffff;
      padding: 14px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      min-height: 0;
      box-shadow: 0 10px 28px rgba(15, 23, 42, 0.18), 0 2px 8px rgba(200, 16, 46, 0.14);
    }

    .template-showcase-meta-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
    }

    .template-showcase-meta-title {
      margin: 0;
      font-size: 26px;
      line-height: 1.05;
      font-family: "Brush Script MT", "Lucida Handwriting", "Segoe Script", cursive;
      font-style: italic;
      font-weight: 700;
      letter-spacing: 0.01em;
      color: #0b1f4d;
      text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7), 0 3px 10px rgba(15, 23, 42, 0.18);
    }

    .template-showcase-ogc-logo {
      width: 72px;
      height: 72px;
      object-fit: contain;
      flex-shrink: 0;
      opacity: 0.92;
    }
    .template-showcase-ogc-logo:not([src]),
    .template-showcase-ogc-logo[src=""] {
      display: none;
    }

    .template-showcase-meta-copy {
      margin: 0;
      font-size: 13px;
      line-height: 1.45;
      color: #334155;
    }

    .template-showcase-qr {
      margin-top: auto;
      border: 0;
      border-radius: 0;
      min-height: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 6px;
      color: #475569;
      font-size: 11px;
      font-weight: 600;
      background: transparent;
      padding: 2px 0 0;
      text-align: center;
    }

    .template-showcase-qr-cta {
      margin: 2px 0 0;
      text-align: center;
      font-size: 12px;
      font-weight: 700;
      color: #0f172a;
      letter-spacing: 0.01em;
    }

    .template-showcase-qr img {
      width: 108px;
      height: 108px;
      object-fit: contain;
      background: #ffffff;
      border-radius: 6px;
      border: 1px solid #e2e8f0;
    }

    .template-showcase-qr-label {
      color: #334155;
      font-size: 11px;
      line-height: 1.25;
      word-break: break-all;
    }

    .template-showcase-qr-link {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      margin-top: 8px;
      color: #0f172a;
      font-size: 12px;
      font-weight: 700;
      text-decoration: none;
      border: 1px solid #cbd5e1;
      border-radius: 999px;
      padding: 6px 10px;
      background: #ffffff;
    }

    .template-showcase-qr-link:hover {
      background: #f1f5f9;
      border-color: #94a3b8;
    }

    .template-showcase-ready-btn {
      display: none;
      margin-top: 6px;
      align-self: center;
    }

    .template-showcase.permit-prep-showcase .template-showcase-ready-btn {
      display: none !important;
    }

    .draw-siteplan-iframe {
      width: 100%;
      height: clamp(420px, 64vh, 780px);
      min-height: 0;
      border: 0;
      display: block;
      background: transparent;
    }

    .draw-siteplan-embed.template-map-readonly {
      min-height: 0;
      width: 100%;
      margin-left: 0;
      margin-right: 0;
    }

    .draw-siteplan-embed.template-map-readonly .draw-siteplan-iframe {
      height: clamp(420px, 64vh, 780px);
      min-height: 0;
      max-height: none;
      aspect-ratio: auto;
    }

    .guide-me-panel {
      border: 1px solid #dbe5f1;
      border-radius: 14px;
      background: #fff;
      padding: 14px;
    }

    .guide-me-title {
      margin: 0 0 6px;
      font-size: 18px;
      font-weight: 700;
      color: #0f172a;
    }

    .guide-me-subtitle {
      margin: 0 0 14px;
      font-size: 13px;
      color: #475569;
      line-height: 1.4;
    }

    .guide-question-group {
      border: 1px solid #dbe5f1;
      border-radius: 12px;
      background: #f8fafc;
      padding: 11px 12px;
      margin-bottom: 10px;
    }

    .guide-question {
      margin: 0 0 8px;
      font-size: 13px;
      font-weight: 700;
      color: #1e293b;
    }

    .guide-options {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
    }

    .guide-option {
      display: flex;
      align-items: flex-start;
      gap: 7px;
      font-size: 12px;
      color: #334155;
      background: #fff;
      border: 1px solid #dbe5f1;
      border-radius: 9px;
      padding: 8px;
    }

    .guide-option input {
      margin-top: 1px;
    }

    .guide-actions {
      display: flex;
      gap: 8px;
      margin-top: 12px;
      flex-wrap: wrap;
    }

    .guide-run-btn,
    .guide-reset-btn {
      border: 1px solid #cbd5e1;
      border-radius: 10px;
      padding: 9px 12px;
      font-size: 12px;
      font-weight: 700;
      cursor: pointer;
    }

    .guide-run-btn {
      background: #0f172a;
      color: #fff;
      border-color: #0f172a;
    }

    .guide-reset-btn {
      background: #fff;
      color: #334155;
    }

    .guide-result {
      margin-top: 14px;
      border: 1px solid #bbf7d0;
      border-radius: 12px;
      background: #f0fdf4;
      padding: 12px;
      display: none;
    }

    .guide-result.visible {
      display: block;
    }

    .guide-result-title {
      margin: 0 0 6px;
      font-size: 14px;
      font-weight: 800;
      color: #14532d;
    }

    .guide-result-copy {
      margin: 0 0 8px;
      font-size: 12px;
      color: #166534;
      line-height: 1.45;
    }

    .guide-result-list {
      margin: 0;
      padding-left: 18px;
      color: #166534;
      font-size: 12px;
      line-height: 1.45;
    }

    .guide-result-list li + li {
      margin-top: 4px;
    }

    .cost-estimate-panel .guide-actions {
      margin-top: 10px;
    }

    .cost-estimate-help {
      margin: 6px 0 12px;
      font-size: 12px;
      color: #64748b;
      line-height: 1.45;
    }

    .cost-estimate-select-wrap {
      margin-bottom: 6px;
    }

    .permit-path-panel {
      border-color: #cbd5e1;
      background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    }

    .permit-path-pill-row {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin: 8px 0 12px;
    }

    .permit-path-pill {
      display: inline-flex;
      align-items: center;
      padding: 5px 10px;
      border-radius: 999px;
      border: 1px solid #dbe5f1;
      background: #ffffff;
      color: #334155;
      font-size: 11px;
      font-weight: 700;
      line-height: 1.2;
    }

    .permit-path-pill.is-asofright {
      border-color: #86efac;
      background: #f0fdf4;
      color: #166534;
    }

    .permit-path-pill.is-conditional {
      border-color: #fbbf24;
      background: #fffbeb;
      color: #92400e;
    }

    .permit-path-block {
      border: 1px solid #dbe5f1;
      border-radius: 12px;
      background: #ffffff;
      padding: 12px;
      margin-top: 10px;
    }

    .permit-path-block-title {
      margin: 0 0 8px;
      font-size: 13px;
      font-weight: 800;
      color: #0f172a;
      text-transform: none;
      letter-spacing: 0.01em;
    }

    .permit-path-summary {
      margin: 0;
      color: #334155;
      font-size: 13px;
      line-height: 1.55;
    }

    .permit-path-data-warnings {
      margin-top: 8px;
      padding: 7px 10px;
      border-radius: 8px;
      background: #eff6ff;
      border: 1px solid #bfdbfe;
      color: #1e40af;
      font-size: 12px;
      line-height: 1.5;
      display: none;
    }

    .permit-path-data-warnings.has-warnings {
      display: block;
    }

    .permit-path-data-warnings ul {
      margin: 0;
      padding-left: 16px;
    }

    .permit-path-data-warnings ul li + li {
      margin-top: 3px;
    }

    .permit-path-columns {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
    }

    @media (max-width: 860px) {
      .permit-path-columns {
        grid-template-columns: minmax(0, 1fr);
      }
    }

    .permit-path-list {
      margin: 0;
      padding-left: 18px;
      color: #1e293b;
      font-size: 13px;
      line-height: 1.5;
    }

    .permit-path-list li + li {
      margin-top: 4px;
    }

    .permit-path-lot-numbers {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 6px 16px;
    }

    @media (max-width: 600px) {
      .permit-path-lot-numbers {
        grid-template-columns: minmax(0, 1fr);
      }
    }

    .permit-path-lot-kv {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      padding: 4px 0;
      border-bottom: 1px solid #f1f5f9;
      font-size: 12.5px;
      line-height: 1.4;
    }

    .permit-path-lot-kv-label {
      color: #64748b;
      flex-shrink: 0;
      margin-right: 8px;
    }

    .permit-path-lot-kv-value {
      color: #0f172a;
      font-weight: 600;
      text-align: right;
    }

    .permit-path-resources {
      list-style: none;
      padding-left: 0;
    }

    .permit-path-resources li {
      padding: 5px 0;
      border-bottom: 1px solid #f1f5f9;
    }

    .permit-path-resources a {
      color: #2563eb;
      text-decoration: none;
      font-size: 13px;
    }

    .permit-path-resources a:hover {
      text-decoration: underline;
    }

    .permit-path-canvas-wrap {
      margin: 8px 0 14px;
    }

    #permitPathView .permit-path-pill-row,
    #permitPathView .permit-path-block,
    #permitPathView .permit-path-columns {
      display: none;
    }

    .permit-prep-step-guide {
      margin: 6px 0 10px;
      padding: 0;
    }

    .permit-prep-step-kicker {
      margin: 0;
      font-size: 11px;
      letter-spacing: 0.08em;
      font-weight: 800;
      color: #be123c;
      text-transform: uppercase;
    }

    .permit-prep-step-title {
      margin: 0;
      font-size: 16px;
      line-height: 1.35;
      color: #0f172a;
    }

    .permit-prep-step-copy {
      margin: 6px 0 0;
      font-size: 13px;
      line-height: 1.55;
      color: #475569;
    }

    .permit-path-canvas-footer {
      margin-top: 8px;
      display: flex;
      justify-content: flex-end;
    }

    .permit-prep-next-btn[disabled] {
      opacity: 0.65;
      cursor: not-allowed;
    }

    .permit-prep-coming-soon {
      display: none;
      margin-top: 10px;
      border: 1px dashed #f59e0b;
      border-radius: 12px;
      background: #fffbeb;
      padding: 12px;
      color: #92400e;
    }

    .permit-prep-coming-soon.visible {
      display: block;
    }

    .permit-prep-coming-soon-title {
      margin: 0;
      font-size: 14px;
      font-weight: 800;
      line-height: 1.4;
    }

    .permit-prep-coming-soon-copy {
      margin: 6px 0 0;
      font-size: 12px;
      line-height: 1.5;
      color: #a16207;
    }

    .permit-path-timeline {
      display: grid;
      gap: 7px;
    }

    .permit-path-timeline-item {
      border: 1px solid #dbe5f1;
      border-radius: 10px;
      background: #f8fafc;
      padding: 9px 10px;
    }

    .permit-path-timeline-title {
      margin: 0 0 3px;
      font-size: 13px;
      font-weight: 700;
      color: #0f172a;
    }

    .permit-path-timeline-meta {
      margin: 0;
      font-size: 12px;
      color: #475569;
      line-height: 1.45;
    }

    .permit-path-requirement-row {
      margin-top: 8px;
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      align-items: center;
    }

    .permit-path-requirement-check {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      border: 1px solid #cbd5e1;
      border-radius: 999px;
      background: #ffffff;
      color: #334155;
      font-size: 11px;
      font-weight: 600;
      padding: 4px 8px;
      line-height: 1.2;
    }

    .permit-path-requirement-check input {
      width: 14px;
      height: 14px;
      margin: 0;
      accent-color: #16a34a;
    }

    .permit-path-requirement-check input:disabled {
      opacity: 1;
      cursor: not-allowed;
    }

    .permit-path-siteplan-cta {
      border: 1px solid var(--accent, #c8102e);
      border-radius: 999px;
      background: #ffffff;
      color: var(--accent, #c8102e);
      font-size: 11px;
      font-weight: 700;
      padding: 5px 10px;
      cursor: pointer;
      transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    }

    .permit-path-siteplan-cta:hover {
      background: var(--accent, #c8102e);
      color: #ffffff;
    }

    .permit-path-siteplan-cta:focus-visible {
      outline: none;
      box-shadow: 0 0 0 3px var(--accent-dim, rgba(200, 16, 46, 0.12));
    }

    /* ── Qualified Projects: Accordion Cards with Continuity Transitions ── */

    .qualified-projects {
      margin-bottom: 14px;
    }

    .qualified-projects-intro {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 12px;
      font-weight: 700;
      color: #065f46;
      margin: 0 0 12px;
      line-height: 1.3;
      letter-spacing: 0.3px;
      text-transform: uppercase;
    }

    .qualified-projects-intro .qp-badge {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      background: linear-gradient(135deg, #ecfdf5, #d1fae5);
      border: 1px solid rgba(16, 185, 129, 0.3);
      border-radius: 999px;
      padding: 3px 10px 3px 7px;
      font-size: 11px;
      font-weight: 700;
      color: #065f46;
    }

    .qualified-projects-intro .qp-badge svg {
      flex-shrink: 0;
    }

    .qualified-projects-list {
      margin: 0;
      padding: 0;
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 6px;
      max-width: 100%;
    }

    /* ── Individual project card ── */

    .qualified-projects-list .project-card {
      display: flex;
      flex-direction: column;
      border-radius: 14px;
      border: 1.5px solid rgba(148, 163, 184, 0.2);
      background: #ffffff;
      cursor: pointer;
      overflow: hidden;
      transition: border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
    }

    .qualified-projects-list .project-card:hover {
      border-color: rgba(16, 185, 129, 0.35);
      box-shadow: 0 2px 8px rgba(16, 185, 129, 0.08);
    }

    .qualified-projects-list .project-card.restricted:hover {
      border-color: rgba(148, 163, 184, 0.3);
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    }

    .qualified-projects-list .project-card.saving {
      opacity: 0.5;
      pointer-events: none;
    }

    /* ── Card header (always visible) ── */

    .project-card-header {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 11px 14px;
      min-height: 48px;
    }

    .project-card-icon {
      flex-shrink: 0;
      width: 34px;
      height: 34px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 10px;
      font-size: 17px;
      line-height: 1;
      transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), background 0.3s ease;
    }

    .project-card.allowed .project-card-icon {
      background: rgba(16, 185, 129, 0.1);
    }

    .project-card.restricted .project-card-icon {
      background: rgba(148, 163, 184, 0.12);
    }

    .project-card-info {
      flex: 1;
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    .project-card-title {
      font-size: 13.5px;
      font-weight: 700;
      color: #0f172a;
      line-height: 1.25;
      transition: color 0.3s ease;
    }

    .project-card.restricted .project-card-title {
      color: #64748b;
    }

    .project-card-subtitle {
      font-size: 11px;
      color: #94a3b8;
      line-height: 1.3;
      font-weight: 500;
      transition: color 0.3s ease;
    }

    .project-card.allowed .project-card-subtitle {
      color: #64748b;
    }

    .project-card-tag {
      flex-shrink: 0;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 3px 8px;
      border-radius: 999px;
      font-size: 10.5px;
      font-weight: 700;
      letter-spacing: 0.2px;
      transition: background 0.3s ease, color 0.3s ease;
    }

    .project-card-tag.tag-allowed {
      background: rgba(16, 185, 129, 0.12);
      color: #065f46;
    }

    .project-card-tag.tag-restricted {
      background: rgba(148, 163, 184, 0.12);
      color: #94a3b8;
    }

    .project-card-chevron {
      flex-shrink: 0;
      width: 20px;
      height: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #cbd5e1;
      font-size: 16px;
      font-weight: 600;
      transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), color 0.3s ease;
    }

    /* ── Recommended badge ── */

    .project-card-recommended {
      display: none;
      align-items: center;
      gap: 4px;
      margin-left: 6px;
      padding: 2px 7px;
      border-radius: 999px;
      font-size: 9.5px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      background: linear-gradient(135deg, #fef3c7, #fde68a);
      color: #92400e;
      border: 1px solid rgba(245, 158, 11, 0.25);
    }

    .project-card.is-recommended .project-card-recommended {
      display: inline-flex;
    }

    /* ── Expanded card state ── */

    .project-card.expanded {
      border-color: rgba(16, 185, 129, 0.4);
      box-shadow: 0 4px 20px rgba(16, 185, 129, 0.12), 0 1px 3px rgba(0, 0, 0, 0.06);
      background: linear-gradient(180deg, #ffffff 0%, #f0fdf4 100%);
    }

    .project-card.expanded.restricted {
      border-color: rgba(239, 68, 68, 0.25);
      box-shadow: 0 4px 20px rgba(239, 68, 68, 0.08), 0 1px 3px rgba(0, 0, 0, 0.06);
      background: linear-gradient(180deg, #ffffff 0%, #fef2f2 100%);
    }

    .project-card.expanded .project-card-icon {
      transform: scale(1.1);
    }

    .project-card.expanded .project-card-chevron {
      transform: rotate(90deg);
      color: #10b981;
    }

    .project-card.expanded.restricted .project-card-chevron {
      color: #f87171;
    }

    .project-card.expanded .project-card-tag.tag-allowed {
      background: rgba(16, 185, 129, 0.2);
    }

    /* ── Card body (hidden by default, revealed on expand) ── */

    .project-card-body {
      max-height: 0;
      opacity: 0;
      overflow: hidden;
      padding: 0 14px;
      transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                  opacity 0.3s ease 0.05s,
                  padding 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .project-card.expanded .project-card-body {
      max-height: 320px;
      opacity: 1;
      padding: 0 14px 14px;
    }

    .project-card-body-inner {
      border-top: 1px solid rgba(148, 163, 184, 0.15);
      padding-top: 12px;
    }

    .project-card-body .pcard-headline {
      margin: 0 0 4px;
      font-size: 11px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.7px;
      color: #0f766e;
    }

    .project-card.restricted.expanded .pcard-headline {
      color: #b91c1c;
    }

    .project-card-body .pcard-reason {
      margin: 0 0 6px;
      font-size: 12px;
      line-height: 1.4;
      color: #0f766e;
      font-weight: 600;
    }

    .project-card.restricted.expanded .pcard-reason {
      color: #b91c1c;
    }

    .project-card-body .pcard-message {
      margin: 0;
      font-size: 13px;
      line-height: 1.55;
      color: #334155;
    }

    .project-card-body .pcard-message strong {
      color: #0f172a;
    }

    .project-card-body .pcard-cta {
      margin-top: 12px;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 10px 18px;
      border: 0;
      border-radius: 12px;
      font-size: 12.5px;
      font-weight: 800;
      letter-spacing: 0.15px;
      color: #ffffff;
      cursor: pointer;
      background: linear-gradient(135deg, #C8102E 0%, #FF1744 100%);
      box-shadow: 0 8px 20px rgba(200, 16, 46, 0.2);
      transition: transform 0.16s ease, box-shadow 0.16s ease, filter 0.16s ease;
    }

    .project-card-body .pcard-cta::after {
      content: '→';
      font-size: 14px;
      line-height: 1;
    }

    .project-card-body .pcard-cta:hover {
      transform: translateY(-1px);
      box-shadow: 0 10px 26px rgba(200, 16, 46, 0.3);
      filter: brightness(1.04);
    }

    /* ── Nurture glow for allowed cards in exploring mode ── */

    body.cta-nurture-exploring .qualified-projects-list.exploring-mode .project-card.allowed:not(.expanded) {
      animation: nurtureCardGlow 2.2s ease-in-out infinite;
    }

    body.cta-nurture-exploring .qualified-projects-list.exploring-mode .project-card.allowed.is-recommended:not(.expanded) {
      animation: nurtureCardGlowRecommended 2.2s ease-in-out infinite;
    }

    @keyframes nurtureCardGlow {
      0%, 100% { box-shadow: 0 0 4px rgba(16, 185, 129, 0.15); }
      50% { box-shadow: 0 0 16px rgba(16, 185, 129, 0.35), 0 0 32px rgba(16, 185, 129, 0.1); }
    }

    @keyframes nurtureCardGlowRecommended {
      0%, 100% { box-shadow: 0 0 6px rgba(16, 185, 129, 0.2); }
      50% { box-shadow: 0 0 20px rgba(16, 185, 129, 0.45), 0 0 40px rgba(16, 185, 129, 0.15); }
    }

    /* ── Collapsed cards when one is expanded (dim siblings) ── */

    .qualified-projects-list.has-expanded .project-card:not(.expanded) {
      opacity: 0.7;
      transition: opacity 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
    }

    .qualified-projects-list.has-expanded .project-card:not(.expanded):hover {
      opacity: 0.9;
    }

    /* ── Legacy compat: hide the old separate project-next-steps when cards are active ── */

    .project-next-steps {
      margin-top: 16px;
      border: 1px solid rgba(148, 163, 184, 0.24);
      background:
        radial-gradient(circle at top right, rgba(59, 130, 246, 0.12), transparent 32%),
        linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, rgba(255, 255, 255, 0.92) 42%, rgba(239, 246, 255, 0.96) 100%);
      box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
      border-radius: 16px;
      padding: 16px 18px 18px;
      display: none;
      position: relative;
      overflow: hidden;
    }

    .project-next-steps-title,
    .project-next-steps-reason,
    .project-next-steps-copy { display: none; }

    .zoning-square-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
      margin-bottom: 14px;
    }

    .zoning-square-card {
      background: #f8fafc;
      border: 1px solid #dbe5f1;
      border-radius: 12px;
      padding: 12px;
      min-height: 120px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

    .zoning-square-label {
      font-size: 10px;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: #64748b;
      font-weight: 700;
      margin-bottom: 8px;
    }

    .zoning-square-value {
      font-size: 15px;
      color: #0f172a;
      font-weight: 700;
      line-height: 1.25;
    }

    .zoning-square-note {
      font-size: 12px;
      color: #475569;
      line-height: 1.35;
    }

    .zoning-info-segments {
      display: grid;
      gap: 14px;
      margin-bottom: 12px;
    }

    .zoning-info-banner {
      font-size: clamp(16px, 2.2vw, 24px);
      font-weight: 800;
      letter-spacing: -0.02em;
      color: #0f172a;
      margin: 0 0 8px;
      text-align: left;
    }

    .zoning-segment {
      background: transparent;
      border: none;
      border-radius: 0;
      padding: 0;
    }

    .zoning-segment-title {
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.6px;
      color: #425a7b;
      font-weight: 700;
      margin-bottom: 6px;
    }

    .zoning-bullets {
      margin: 0;
      padding-left: 18px;
      color: #334155;
      font-size: 13px;
      line-height: 1.45;
      text-align: left;
    }

    .zoning-bullets li + li {
      margin-top: 4px;
    }

    /* ── Combined Zoning Panel (czp) cards ── */
    .czp-card {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 14px;
      padding: 18px 20px;
      margin-bottom: 14px;
    }

    /* ── Development Capacity Snapshot ───────────────────────────────
       Replaces the older mid-row stat tiles + See What Fits paragraph +
       yellow stepback banner with one condensed, scannable panel that
       visually extends the lot-preview card directly below it.
       Stable child IDs are populated from the canonical datasheet stats
       by _syncCzpFeasibilitySnapshot() so the unit toggle and engine
       fallbacks remain the single source of truth.
       Collapsible via the header button (#czpFsHeaderToggle); auto-
       collapses when any qualified-project tile is clicked. */
    .czp-feasibility-snapshot {
      width: min(100%, 1080px);
      /* Pull up so the panel visually attaches to the lot-preview card's
         bottom edge, the lot card has margin: 10px 0 16px, so a -10px
         top margin closes the gap. The shared border + matching radius
         make them read as one continuous unit. */
      margin: -10px auto 14px;
      background: #ffffff;
      border: 1px solid rgba(15, 23, 42, 0.06);
      box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05), 0 12px 24px -16px rgba(15, 23, 42, 0.12);
      /* Top corners flat (attach to lot card); bottom corners rounded to
         match the lot-preview card's bottom radius. */
      border-radius: 0 0 16px 16px;
      padding: 0;
      color: #0f172a;
      font-size: 14px;
      line-height: 1.5;
      overflow: hidden;
    }
    .czp-feasibility-snapshot[hidden] { display: none; }

    /* ── Private services check card (well / septic risk) ──────────────────
       Yellow is intentional here for the medium-risk state + warnings, the
       product spec calls for a yellow warning treatment on private-service
       lots (distinct from the cash-flow badge, where yellow was removed). */
    .ps-card {
      width: min(100%, 1080px);
      margin: 0 auto 14px;
      background: #ffffff;
      border: 1px solid rgba(15, 23, 42, 0.08);
      border-radius: 14px;
      box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05), 0 12px 24px -16px rgba(15, 23, 42, 0.12);
      padding: 14px 18px 16px;
      color: #0f172a;
      font-size: 14px;
      line-height: 1.55;
    }
    .ps-card[hidden] { display: none; }
    .ps-card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
    .ps-card-title {
      display: inline-flex; align-items: center; gap: 7px;
      font-size: 13px; font-weight: 800; letter-spacing: 0.02em;
      text-transform: uppercase; color: #334155;
    }
    .ps-card-title svg { width: 15px; height: 15px; color: #64748b; }
    .ps-risk-pill {
      margin-left: auto; display: inline-flex; align-items: center;
      padding: 3px 10px; border-radius: 999px;
      font-size: 11px; font-weight: 700; white-space: nowrap;
    }
    .ps-risk-pill--low { background: #ecfdf5; color: #047857; }
    .ps-risk-pill--medium { background: #fffbeb; color: #b45309; }
    .ps-risk-pill--high { background: #fef3f2; color: #b42318; }
    .ps-card-summary { margin: 0 0 10px; color: #1e293b; }
    .ps-card-summary[hidden] { display: none; }
    .ps-confidence { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
    .ps-confidence:empty { display: none; }
    .ps-chip {
      display: inline-flex; align-items: center; padding: 3px 9px;
      border-radius: 999px; background: #f1f5f9; color: #475569;
      font-size: 11px; font-weight: 600; border: 1px solid #e2e8f0;
    }
    .ps-warnings {
      margin: 0 0 10px; padding: 10px 12px 10px 28px; list-style: disc;
      background: #fffbeb; border: 1px solid #fde68a; border-radius: 10px;
      color: #78350f; font-size: 13px;
    }
    .ps-warnings[hidden], .ps-warnings:empty { display: none; }
    .ps-warnings li { margin: 2px 0; }
    .ps-pool { margin: 0 0 8px; font-size: 13px; color: #334155; }
    .ps-pool[hidden] { display: none; }
    .ps-verify { margin: 0; font-size: 12px; color: #64748b; }
    .ps-verify[hidden] { display: none; }

    .czp-feasibility-snapshot .fs-header {
      /* Button-styled header: full-width, looks like a label until
         hover/focus reveals its toggle role. */
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      padding: 14px 20px;
      background: transparent;
      border: 0;
      border-top: 1px solid rgba(15, 23, 42, 0.06);
      font-family: inherit;
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.7px;
      color: #c8102e;
      cursor: pointer;
      text-align: left;
    }
    .czp-feasibility-snapshot .fs-header:hover {
      background: rgba(200, 16, 46, 0.04);
    }
    .czp-feasibility-snapshot .fs-header:focus-visible {
      outline: 2px solid #c8102e;
      outline-offset: -2px;
    }
    .czp-feasibility-snapshot .fs-header-label {
      flex: 1;
    }
    .czp-feasibility-snapshot .fs-header-chevron {
      flex-shrink: 0;
      font-size: 14px;
      color: #94a3b8;
      transition: transform 0.18s ease;
      margin-left: 8px;
    }
    .czp-feasibility-snapshot .fs-header[aria-expanded="false"] .fs-header-chevron {
      transform: rotate(-90deg);
    }
    .czp-feasibility-snapshot .fs-body {
      padding: 0 20px 14px;
      /* Large enough to contain every line on the snapshot at any
         viewport. Animating from this to 0 gives a smooth slide. */
      max-height: 1500px;
      opacity: 1;
      transition: max-height 0.24s ease, opacity 0.18s ease, padding 0.18s ease;
      overflow: hidden;
    }
    .czp-feasibility-snapshot .fs-header[aria-expanded="false"] + .fs-body {
      max-height: 0;
      opacity: 0;
      padding-top: 0;
      padding-bottom: 0;
    }
    .czp-feasibility-snapshot .fs-line {
      padding: 4px 0;
      color: #334155;
    }
    .czp-feasibility-snapshot .fs-line[hidden] { display: none; }
    .czp-feasibility-snapshot .fs-line strong {
      color: #0f172a;
      font-weight: 700;
    }
    .czp-feasibility-snapshot .fs-line .fs-sep {
      display: inline-block;
      margin: 0 8px;
      color: #cbd5e1;
    }

    /* ── Development Capacity Snapshot, content-aware fact grid ─────────
       Each data line (l2 Lot row, l3 Envelope row, l4 Height row, l5 Yield
       row, l6 Setbacks row) is a 3-column CSS grid of .fs-fact cells. Each
       cell stacks a tiny uppercase label over a bold value, optionally with
       an inline red "(limits)" flag or a small sub-note ("verify ROW",
       "above 15 m"). Reads like a stat dashboard instead of a dot-separated
       run-on sentence, same vertical footprint, much higher scannability.
       Line 1 (verdict) is intentionally excluded, it stays inline. */
    .czp-feasibility-snapshot #fsLine2Lot,
    .czp-feasibility-snapshot #fsLine3Envelope,
    .czp-feasibility-snapshot #fsLine4Height,
    .czp-feasibility-snapshot #fsLine5Yield,
    .czp-feasibility-snapshot #fsLine6Setbacks {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 6px 18px;
      padding: 6px 0;
    }
    .czp-feasibility-snapshot #fsLine2Lot .fs-sep,
    .czp-feasibility-snapshot #fsLine3Envelope .fs-sep,
    .czp-feasibility-snapshot #fsLine4Height .fs-sep,
    .czp-feasibility-snapshot #fsLine5Yield .fs-sep,
    .czp-feasibility-snapshot #fsLine6Setbacks .fs-sep { display: none; }
    .czp-feasibility-snapshot .fs-fact {
      display: flex;
      flex-direction: column;
      gap: 1px;
      min-width: 0;
    }
    .czp-feasibility-snapshot .fs-fact__label {
      font-size: 10px;
      font-weight: 600;
      letter-spacing: 0.07em;
      text-transform: uppercase;
      color: #64748b;
      line-height: 1.3;
    }
    .czp-feasibility-snapshot .fs-fact__value {
      font-size: 14px;
      font-weight: 700;
      color: #0f172a;
      line-height: 1.25;
    }
    .czp-feasibility-snapshot .fs-fact__flag {
      display: inline-block;
      margin-left: 4px;
      font-size: 11px;
      font-weight: 600;
      font-style: normal;
      color: #c8102e;
    }
    .czp-feasibility-snapshot .fs-fact__note {
      font-size: 11px;
      font-weight: 500;
      font-style: italic;
      color: #64748b;
      line-height: 1.35;
      margin-top: 1px;
    }
    /* ── Mobile (≤768px): a clean single-column scorecard ───────────────
       The desktop 3-up fact grid wraps awkwardly on a phone, so under 768px
       each fact becomes a full-width row, label left, value right, helper
       on its own line, with generous spacing. Reads as a calm property
       scorecard instead of a desktop report squeezed onto a phone. (The
       structural pieces, 3 hero summary cards + the warning rebuild, are
       handled in a separate, visually-verified pass.) */
    @media (max-width: 768px) {
      .czp-feasibility-snapshot .fs-header { padding: 16px 20px; }
      .czp-feasibility-snapshot .fs-body { padding: 4px 20px 20px; }

      /* One fact per row, never force long values into 2/3 columns on mobile. */
      .czp-feasibility-snapshot #fsLine2Lot,
      .czp-feasibility-snapshot #fsLine3Envelope,
      .czp-feasibility-snapshot #fsLine4Height,
      .czp-feasibility-snapshot #fsLine5Yield,
      .czp-feasibility-snapshot #fsLine6Setbacks {
        grid-template-columns: 1fr;
        gap: 0;
        padding: 0;
      }
      /* Each fact = a clean spec row: label left, value right, helper below. */
      .czp-feasibility-snapshot .fs-fact {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: baseline;
        column-gap: 14px;
        row-gap: 2px;
        padding: 14px 0;
        border-top: 1px solid #eef2f6;
      }
      .czp-feasibility-snapshot #fsLine2Lot .fs-fact:first-child { border-top: 0; }
      .czp-feasibility-snapshot .fs-fact__label {
        font-size: 12px;
        letter-spacing: 0.04em;
      }
      .czp-feasibility-snapshot .fs-fact__value {
        margin-left: auto;
        font-size: 16px;
        text-align: right;
      }
      /* Long helper text drops to its own full-width line under the value. */
      .czp-feasibility-snapshot .fs-fact__note {
        flex-basis: 100%;
        font-size: 12px;
        margin-top: 0;
      }
      .czp-feasibility-snapshot .fs-line--caveat,
      .czp-feasibility-snapshot .fs-line--footnote { margin-top: 10px; }
      .czp-feasibility-snapshot { margin-bottom: 20px; }

      /* Private-services / warning card, full width + breathing room. */
      .ps-card { padding: 20px; margin-bottom: 20px; }
    }

    .czp-feasibility-snapshot #fsLine1Verdict {
      font-size: 15px;
      font-weight: 600;
      color: #0f172a;
      padding-top: 0;
    }
    .czp-feasibility-snapshot #fsLine1Verdict .fs-verdict {
      color: #c8102e;
    }
    /* Upper-storey stepback caveat, collapsed by default so the headline
       floor-area number stays clean. The amber treatment now lives only on
       the expanded body; the summary is a quiet one-line toggle. */
    .czp-feasibility-snapshot .fs-line--caveat {
      margin-top: 6px;
    }
    .czp-feasibility-snapshot .fs-caveat-expander > summary {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      cursor: pointer;
      list-style: none;
      color: #92400e;
      font-weight: 600;
      font-size: 12px;
      line-height: 1.3;
      padding: 4px 0;
      -webkit-tap-highlight-color: transparent;
    }
    .czp-feasibility-snapshot .fs-caveat-expander > summary::-webkit-details-marker { display: none; }
    .czp-feasibility-snapshot .fs-caveat-ico { font-size: 13px; opacity: 0.9; }
    .czp-feasibility-snapshot .fs-caveat-chevron {
      font-size: 13px;
      transition: transform 0.15s ease;
    }
    .czp-feasibility-snapshot .fs-caveat-expander[open] > summary .fs-caveat-chevron {
      transform: rotate(90deg);
    }
    .czp-feasibility-snapshot .fs-caveat-body {
      margin-top: 4px;
      padding: 8px 10px;
      background: rgba(245, 158, 11, 0.10);
      border: 1px solid rgba(245, 158, 11, 0.30);
      border-radius: 8px;
      color: #92400e;
      font-size: 12.5px;
      line-height: 1.45;
    }
    /* Inline grey caveat appended to a single fs-line value (e.g. the
       "verify ROW + transit rules" suffix on Height, or the "(above 15 m;
       lower building 0)" annotation on the front setback). Keeps the
       caveat visible but visually de-prioritised vs the headline number. */
    .czp-feasibility-snapshot .fs-caveat-inline {
      color: #64748b;
      font-weight: 500;
      font-size: 12px;
    }
    /* Cross-bylaw footnote, sits below the snapshot, smaller than the
       data lines, italicised to read as a meta-disclaimer rather than a
       facts row. */
    .czp-feasibility-snapshot .fs-line--footnote {
      margin-top: 8px;
      padding-top: 8px;
      border-top: 1px dashed #e2e8f0;
      color: #64748b;
      font-size: 12px;
      line-height: 1.5;
    }
    .czp-feasibility-snapshot .fs-line--footnote em {
      font-style: normal;
      font-weight: 600;
      color: #475569;
    }
    .czp-feasibility-snapshot .fs-footer {
      margin-top: 12px;
      padding-top: 10px;
      border-top: 1px solid #f1f5f9;
      text-align: center;
    }
    .czp-feasibility-snapshot .fs-toggle-specs {
      background: transparent;
      border: 1px solid #e2e8f0;
      color: #475569;
      font-size: 13px;
      font-weight: 600;
      padding: 8px 16px;
      border-radius: 8px;
      cursor: pointer;
      transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    }
    .czp-feasibility-snapshot .fs-toggle-specs:hover {
      background: #f8fafc;
      color: #0f172a;
      border-color: #cbd5e1;
    }
    .czp-feasibility-snapshot .fs-toggle-specs:focus-visible {
      outline: 2px solid #c8102e;
      outline-offset: 2px;
    }
    /* Compact secondary site checks (servicing, pool), neutral chips that
       support the decision without becoming a standalone section. */
    .czp-feasibility-snapshot .fs-site-checks {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 8px;
      margin-top: 12px;
      padding-top: 10px;
      border-top: 1px solid #f1f5f9;
    }
    .czp-feasibility-snapshot .fs-site-checks[hidden] { display: none; }
    .czp-feasibility-snapshot .fs-site-checks__label {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.07em;
      text-transform: uppercase;
      color: #94a3b8;
    }
    .czp-feasibility-snapshot .fs-site-check {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 12.5px;
      line-height: 1.35;
      color: #15803d;
      background: #f0fdf4;
      border: 1px solid #bbf7d0;
      padding: 4px 10px;
      border-radius: 999px;
    }
    .czp-feasibility-snapshot .fs-site-check[hidden] { display: none; }
    .czp-feasibility-snapshot .fs-site-check::before {
      content: "";
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: #22c55e;
      flex-shrink: 0;
    }
    /* Force-hide the elements the Feasibility Snapshot replaces. The
       limits-strip and utilbar both have explicit display:grid/flex rules
       which beat the HTML `hidden` attribute, and the stepback-warning
       JS toggles #czpStepbackWarning.hidden on tall mid/high-rise zones, 
       so CSS-level overrides are needed to keep all three suppressed. */
    .czp-stepback-warning[data-fs-replaced="true"] { display: none !important; }
    .czp-limits-strip[hidden] { display: none !important; }
    .czp-projects-header[hidden] { display: none !important; }
    /* Hide the entire utilbar (Switch to metric + Show full specs), the
       snapshot card carries the disclosure entry-point, and the unit
       toggle in the legacy ds-footer was already removed. The lot-preview
       card now shows just the map; the snapshot below replaces every
       other piece of the old toolbar / strip stack. */
    .czp-lot-preview-card .czp-preview-utilbar { display: none !important; }
    /* Permanently hide the full PROPERTY / BUILDING LIMITS / SETBACKS
       datasheet, the Feasibility Snapshot already shows every value in
       a more digestible form, so the expanded table was pure redundancy.
       Kept in the DOM (display:none) because _syncCzpFeasibilitySnapshot()
       reads textContent from these cells as the canonical source of
       truth for unit-toggle and engine fallbacks. */
    #czpDatasheet { display: none !important; }
    /* The snapshot's "View full zoning details" footer is now obsolete
       since there's no datasheet to reveal. */
    .czp-feasibility-snapshot .fs-footer { display: none !important; }
    @media (max-width: 480px) {
      .czp-feasibility-snapshot {
        padding: 14px 14px 12px;
        font-size: 13px;
      }
      .czp-feasibility-snapshot .fs-line {
        padding: 5px 0;
      }
      .czp-feasibility-snapshot #fsLine1Verdict {
        font-size: 14px;
      }
      .czp-feasibility-snapshot .fs-line .fs-sep {
        margin: 0 6px;
      }
    }

    .czp-card-label {
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.7px;
      color: #64748b;
      margin-bottom: 12px;
    }

    .czp-card-sublabel {
      font-size: 10px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: #94a3b8;
      margin-bottom: 8px;
    }

    /* ── Continuity-transition tile grid ──
       Square tiles in a 2-col grid. Project tiles expand to full-page views;
       info tiles expand inline to show stats. Inspired by zanderwhitehurst's
       "grid item → product page" continuity pattern.
       ─────────────────────────────────────── */

    /* ── "See What Fits Here" header above the project-tile grid ─────────
       The header is the user's invitation to play with the tiles, each
       button expands into a placed preview of that project on the
       lot. Animated divider lines flank the title so it reads as a soft
       section break, not a hard heading.
       Hidden once a tile is expanded (the project's own section frame
       takes over) to avoid two competing titles in the same column. */
    .czp-projects-header {
      margin: 18px auto 12px;
      padding: 0 8px;
      width: min(100%, 760px);
      text-align: center;
      position: relative;   /* anchor for the help popup */
      /* opacity-only entrance (no transform). A non-none transform on this
         element would create a containing block for fixed-positioned
         descendants and trap the mobile help-popup, so we use opacity. */
      animation: czpProjectsHeaderRise 540ms ease-out 200ms both;
    }
    .czp-projects-header__title {
      margin: 0;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 14px;
      font-family: 'Sora', system-ui, sans-serif;
      font-size: 17px;
      font-weight: 700;
      letter-spacing: 0.01em;
      color: #0f172a;
      line-height: 1.2;
      vertical-align: middle;
    }
    .czp-projects-header__title::before,
    .czp-projects-header__title::after {
      content: '';
      display: block;
      flex: 0 0 auto;
      width: clamp(24px, 8vw, 56px);
      height: 1px;
      background: linear-gradient(90deg, transparent 0%, rgba(200, 16, 46, 0.55) 50%, transparent 100%);
    }
    @keyframes czpProjectsHeaderRise {
      0%   { opacity: 0; }
      100% { opacity: 1; }
    }
    /* Nurture paragraph, populated by the Zoned insight engine
       (apps/api/public/js/zoned-insights.js) once the catalogue tile set
       is known. Lives inside .czp-projects-header so the divider / help
       trigger sit visually together with the synthesis line. */
    .czp-projects-header__nurture {
      margin: 8px auto 0;
      padding: 0 6px;
      max-width: 620px;
      font-family: 'Sora', system-ui, sans-serif;
      font-size: 13.5px;
      line-height: 1.5;
      color: #475569;
      font-weight: 400;
      letter-spacing: 0.01em;
      text-align: center;
      animation: czpProjectsHeaderRise 540ms ease-out 320ms both;
    }
    .czp-projects-header__nurture[hidden] { display: none; }

    /* "?" help trigger beside the title, visually identical to the lot-
       preview ".czp-lot-popup-trigger" so the two helper buttons read as
       siblings. Bounces continuously until the user opens it once, then
       settles. */
    .czp-projects-help-trigger {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      vertical-align: middle;
      margin-left: 8px;
      width: 24px;
      height: 24px;
      padding: 0;
      border: 1.5px solid #c8102e;
      border-radius: 50%;
      background: #ffffff;
      color: #c8102e;
      font-size: 13px;
      font-weight: 700;
      font-family: 'Sora', system-ui, sans-serif;
      line-height: 1;
      cursor: pointer;
      box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
      transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
      animation: czpLotPopupBounce 1.6s ease-in-out infinite;
    }
    .czp-projects-help-trigger:hover {
      background: #fef2f2;
      box-shadow: 0 4px 10px rgba(200, 16, 46, 0.18);
      animation-play-state: paused;
    }
    .czp-projects-help-trigger[aria-expanded="true"],
    .czp-projects-help-trigger[data-bounced="false"] {
      animation: none;
    }
    .czp-projects-help-trigger[aria-expanded="true"] {
      background: #c8102e;
      color: #ffffff;
    }
    .czp-projects-help-trigger:focus-visible {
      outline: 2px solid rgba(200, 16, 46, 0.55);
      outline-offset: 2px;
    }
    @media (prefers-reduced-motion: reduce) {
      .czp-projects-help-trigger { animation: none; }
    }

    /* Help popup, desktop default. Anchored to the bouncing "?" trigger
       and slid out to the upper-right so it never lands on the project-
       tile grid below (which would otherwise paint over it). The arrow
       tail points back-left at the trigger. The trigger itself is the
       positioning anchor, we do this with the popup as a sibling and
       absolute coords measured from the .czp-projects-header container,
       since the trigger is inline-flexed beside the title.
       Mobile override below converts this to a centered modal so it
       doesn't blow off the right edge of a narrow screen. */
    .czp-projects-help-popup {
      position: absolute;
      /* Anchor to the right edge of the header so the popup always lands
         in the upper-right area without spilling past the page. We don't
         use a left-side anchor because the trigger position varies with
         the title width, and a left-anchored popup easily exceeds the
         viewport on narrow screens. Bottom-anchored so the popup grows
         UPWARD relative to the trigger row. No arrow, it's a clean box. */
      right: 0;
      bottom: calc(100% - 18px);
      z-index: 6;
      width: min(340px, calc(100vw - 32px));
      padding: 14px 38px 14px 16px;
      background: #ffffff;
      border: 2px solid #c8102e;
      border-radius: 12px;
      box-shadow: 0 12px 28px rgba(200, 16, 46, 0.18), 0 1px 3px rgba(15, 23, 42, 0.06);
      color: #1f2937;
      text-align: left;
    }
    .czp-projects-help-popup[hidden] { display: none; }
    .czp-projects-help-popup__title {
      margin: 0;
      color: #0f172a;
      font-size: 14px;
      line-height: 1.4;
    }
    .czp-projects-help-popup__body {
      margin: 4px 0 0;
      color: #475569;
      font-size: 12.5px;
      line-height: 1.5;
      text-wrap: pretty;
    }
    .czp-projects-help-popup__body strong {
      color: #0f172a;
    }
    .czp-projects-help-popup__close {
      position: absolute;
      top: 6px;
      right: 6px;
      width: 26px;
      height: 26px;
      padding: 0;
      border: 0;
      background: transparent;
      color: #64748b;
      font-size: 20px;
      line-height: 1;
      cursor: pointer;
      border-radius: 6px;
      transition: background 0.15s ease, color 0.15s ease;
    }
    .czp-projects-help-popup__close:hover {
      background: rgba(200, 16, 46, 0.08);
      color: #c8102e;
    }
    .czp-projects-help-popup__close:focus-visible {
      outline: 2px solid rgba(200, 16, 46, 0.5);
      outline-offset: 2px;
    }
    /* Hide the header once the tile-grid is expanded into a project view
, the section frame supplies its own heading, no need for two. */
    .czp-tile-grid.has-expanded ~ .czp-projects-header,
    body:has(.czp-tile-grid.has-expanded) .czp-projects-header {
      display: none;
    }

    /* ── Cool frame around the project-tile grid ────────────────────────
       Subtle gradient backdrop + soft red-tinted halo border that hints at
       the brand colour without competing with the photo-backed tile imagery.
       The grid's own gap stays at 3px (tiles read as a tight collage); the
       frame adds breathing room around the collage, not between tiles. */
    .czp-tile-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 3px;
      margin-bottom: 4px;
      padding: 8px;
      border-radius: 18px;
      background:
        radial-gradient(120% 80% at 0% 0%, rgba(200, 16, 46, 0.05), transparent 60%),
        radial-gradient(120% 80% at 100% 100%, rgba(99, 102, 241, 0.04), transparent 60%),
        linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
      border: 1px solid rgba(15, 23, 42, 0.07);
      box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.04),
        0 12px 32px -22px rgba(200, 16, 46, 0.18),
        inset 0 0 0 1px rgba(255, 255, 255, 0.6);
    }
    /* When a tile expands, drop the frame styling so the expansion doesn't
       sit inside a smaller container. The grid takes over its own framing
       (handled by the existing has-expanded rules below). */
    .czp-tile-grid.has-expanded {
      padding: 0;
      background: none;
      border-color: transparent;
      box-shadow: none;
    }

    /* Mobile: tighten the header + frame so they don't waste vertical space
       on small screens. Keep the same visual idea (centered title, soft
       frame) just at compact dimensions. */
    @media (max-width: 640px) {
      .czp-projects-header {
        margin: 12px auto 8px;
        padding: 0 4px;
      }
      .czp-projects-header__title {
        font-size: 14.5px;
        gap: 10px;
      }
      .czp-projects-header__title::before,
      .czp-projects-header__title::after {
        width: clamp(18px, 6vw, 36px);
      }
      .czp-projects-help-trigger {
        width: 22px;
        height: 22px;
        font-size: 12px;
        margin-left: 6px;
      }
      /* Mobile: convert the popup into a centered viewport modal so it's
         never cut off by the right edge of a narrow screen and never sits
         under the project-tile grid below. Position is fixed on the
         viewport (not the header), the title arrow tail is hidden, and a
         dim backdrop is layered behind it via ::after on body. */
      .czp-projects-help-popup {
        position: fixed;
        top: 50%;
        left: 50%;
        bottom: auto;
        right: auto;
        transform: translate(-50%, -50%);
        width: min(320px, calc(100vw - 24px));
        padding: 16px 38px 16px 16px;
        z-index: 100;
      }
      .czp-projects-help-popup::before {
        display: none; /* no arrow on the centered modal */
      }
      /* Dim backdrop while the mobile popup is open. Targets the body
         only when the popup is visible (i.e. not [hidden]). */
      body:has(.czp-projects-help-popup:not([hidden]))::after {
        content: "";
        position: fixed;
        inset: 0;
        background: rgba(15, 23, 42, 0.45);
        z-index: 99;
        pointer-events: none;
      }
      .czp-projects-help-popup__title { font-size: 13px; }
      .czp-projects-help-popup__body { font-size: 11.5px; }
      .czp-tile-grid:not(.has-expanded) {
        padding: 6px;
        border-radius: 14px;
      }
      /* On mobile the previous 2-column tile grid squeezed each tile down
         to ~150px wide, which forced the "+X% / Home Value Increase /
         $$$$ Cost" upside stack into the same horizontal band as the
         project title (e.g. "Multi-Unit"), the two text columns then
         visually clipped into each other. Switch to a single full-width
         column on mobile so every tile gets the room to read cleanly. */
      .czp-tile-grid:not(.has-expanded) {
        grid-template-columns: 1fr;
        gap: 6px;
      }
      .czp-tile {
        min-height: clamp(120px, 28vw, 160px);
      }
      /* With the tile now full-width, the title can use ~60% of the row
         and the upside stack still has plenty of room on the right.
         Bumping the title font a touch keeps it legible at the bigger
         tile size. */
      .czp-tile-title {
        right: 42%;
        font-size: clamp(14px, 4.2vw, 18px);
      }
      .czp-tile-upside-stack {
        width: 40%;
        max-width: 40%;
      }
    }

    /* ── Project tile (photo-backed, matches ADU model card quality) ── */
    .czp-tile {
      position: relative;
      min-height: clamp(100px, 16vw, 130px);
      border-radius: 6px;
      border: none;
      overflow: hidden;
      cursor: pointer;
      background-color: #0f172a;
      background-position: center center;
      background-size: cover;
      background-repeat: no-repeat;
      box-shadow: none;
      transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
      -webkit-tap-highlight-color: transparent;
    }

    .czp-tile:hover {
      opacity: 0.88;
    }

    /* Dark gradient overlay, strengthened 2026-05-15 to keep text legible
       over busy photo backgrounds (Nielsen Norman text-over-image guidance).
       Steeper transition + deeper bottom so the title + value stack both
       sit on a near-opaque base. */
    .czp-tile::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(
        180deg,
        rgba(15, 23, 42, 0.12) 0%,
        rgba(15, 23, 42, 0.42) 45%,
        rgba(2, 6, 23, 0.92) 100%
      );
      pointer-events: none;
    }

    /* Icon: hidden on tile face, shown only in expanded headers */
    .czp-tile-icon { display: none; }

    /* Title, matches ADU .adu-model-button-label. Right-edge stops at 50%
       so the project name (left half) doesn't visually collide with the
       upside stack (right half) on qualified tiles. */
    .czp-tile-title {
      position: absolute;
      left: 12px; right: 50%; bottom: 24px; z-index: 1;
      color: #fff;
      font-size: clamp(13px, 3.5vw, 17px);
      font-weight: 800;
      letter-spacing: 0.01em;
      line-height: 1.15;
      text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
    }
    /* Restricted tiles have no upside stack, let the title use the full
       width so longer names ("Garden Suite / Coach Home") don't wrap. */
    .czp-tile.tile-restricted .czp-tile-title { right: 12px; }

    /* Legacy badge row, kept for back-compat with any tile path still
       emitting this structure. Qualified tiles now use the status-row +
       upside-stack layout below. */
    .czp-tile-badge {
      position: absolute;
      left: 12px; right: 12px; bottom: 6px; z-index: 1;
      display: flex; align-items: flex-end; justify-content: space-between;
      gap: 8px;
      color: #f8fafc;
      text-shadow: 0 2px 8px rgba(0, 0, 0, 0.42);
    }

    /* Status row, "✓ Qualified" anchored bottom-left under the title,
       on its own line so it never tangles with the right-side value stack. */
    .czp-tile-status-row {
      position: absolute;
      left: 12px;
      bottom: 6px;
      z-index: 1;
      color: #f8fafc;
      text-shadow: 0 2px 8px rgba(0, 0, 0, 0.42);
    }
    .czp-tile-status {
      font-size: 9px; font-weight: 700; line-height: 1.15;
      letter-spacing: 0.02em;
    }
    .czp-tile.tile-allowed .czp-tile-status { color: #f8fafc; }
    .czp-tile.tile-restricted .czp-tile-status-row { display: none; }

    /* Upside stack, primary value signal at bottom-right. Big % first,
       then upside tier, cost tier, micro label, optional rebuild-cost
       subtitle. Right-aligned column anchored to the bottom-right. */
    .czp-tile-upside-stack {
      position: absolute;
      right: 10px;
      bottom: 8px;
      width: 48%;
      max-width: 48%;
      z-index: 2;
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 2px;
      color: #f8fafc;
      text-align: right;
      text-shadow: 0 2px 8px rgba(0, 0, 0, 0.42);
      pointer-events: none;
    }
    .czp-tile.tile-restricted .czp-tile-upside-stack { display: none; }

    /* Big %, the primary visual element after the project title. Green
       (gain/positive). Sized to dominate the bottom-right region without
       overflowing on narrow tiles. */
    .czp-tile-pct-big {
      font-size: clamp(22px, 5vw, 30px);
      font-weight: 900;
      line-height: 1;
      letter-spacing: -0.02em;
      color: #86efac;
      text-shadow: 0 2px 12px rgba(0, 0, 0, 0.55), 0 0 1px rgba(0, 0, 0, 0.4);
      margin-bottom: 0;
    }

    /* Value-meaning label, sits directly under the big % and tells the
       homeowner what the number means in plain English: "Home Value
       Increase" for value-driving projects, "Home Value Impact" for
       lifestyle tiles (pool, deck). Larger and more prominent than the
       old "Est. upside" caption because this IS the meaning, not a
       caption to it. */
    .czp-tile-value-meaning {
      font-size: 11.5px;
      font-weight: 700;
      line-height: 1.1;
      letter-spacing: 0.01em;
      color: #f8fafc;
      margin-top: 1px;
      margin-bottom: 3px;
      white-space: nowrap;
    }
    .czp-tile-value-meaning--lifestyle {
      color: #cbd5e1;
    }

    /* Legacy pct-label, retained for back-compat with any tile path that
       still emits it. The new tile face uses .czp-tile-value-meaning. */
    .czp-tile-pct-label {
      font-size: 9.5px;
      font-weight: 600;
      line-height: 1;
      letter-spacing: 0.02em;
      color: rgba(134, 239, 172, 0.85);
      text-transform: none;
      margin-bottom: 3px;
      white-space: nowrap;
    }

    /* Upside tier, Title Case ("High Upside", "Rebuild Potential", etc).
       Derived from the visible % so label and badge always agree
       directionally. Removed text-transform: uppercase so the JS-supplied
       title-case string renders as written. */
    .czp-tile-upside-tier {
      font-size: 11px;
      font-weight: 800;
      line-height: 1.15;
      letter-spacing: 0.02em;
      color: #f8fafc;
      white-space: nowrap;
    }
    .czp-tile-upside-tier--lifestyle,
    .czp-tile-upside-tier--small-boost { color: #cbd5e1; }

    /* Cost tier, "$$$$ Cost" short form. Neutral by default, independent
       of upside. Slightly smaller than the tier so the eye reads %→tier→cost
       in descending hierarchy. */
    .czp-tile-cost-tier {
      font-size: 10.5px;
      font-weight: 700;
      line-height: 1.15;
      letter-spacing: 0.02em;
      color: #cbd5e1;
      white-space: nowrap;
    }

    /* Micro label, retained for legacy paths that may still render it
       (expanded card content, lead pipeline copy). The default tile face
       no longer emits this element per UX refinement 2026-05-15. */
    .czp-tile-micro {
      font-size: 9.5px;
      font-weight: 500;
      line-height: 1.25;
      color: rgba(248, 250, 252, 0.78);
      letter-spacing: 0.01em;
      max-width: 100%;
    }

    /* Tile subtitle, Custom Home rebuild-cost warning. Sits inside the
       upside stack as the final element, amber so it reads as a "watch
       out" without clashing with the green %. */
    .czp-tile-subtitle {
      color: rgba(251, 191, 36, 0.95);
      font-size: 9px;
      font-weight: 700;
      line-height: 1.25;
      letter-spacing: 0.02em;
      max-width: 100%;
    }
    .czp-tile.tile-restricted .czp-tile-subtitle { display: none; }

    /* Fit badge, legacy, retained for any tile path still passing fitText. */
    .czp-tile-fit {
      font-size: 14px; font-weight: 800;
      letter-spacing: 0.04em;
      color: #86efac; text-transform: uppercase;
      text-align: right;
    }

    /* Restricted tiles read identically to qualified tiles, same opacity,
       same cursor, and the only signal that they're not pre-qualified is
       the absence of the "✓ Qualified!" badge (the badge span is only
       rendered on tile-allowed tiles, see project-tile builder). The
       previous opacity:0.7 dim was making restricted tiles look broken /
       disabled, which scared users off perfectly clickable options. */
    .czp-tile.tile-restricted {
      cursor: pointer;
    }
    .czp-tile.tile-restricted .czp-tile-status {
      display: none;
    }

    /* Selected tile, green ring to show active project */
    .czp-tile.is-tile-selected {
      box-shadow: inset 0 0 0 3px #16a34a;
      opacity: 1;
    }

    /* ── Tile expand ──
       CSS-only visual containment. Section frames stay in their original
       DOM positions (below the grid) but are styled to flow seamlessly
       from the expanded tile above. No DOM reparenting needed. */
    .czp-tile {
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* Grid: collapse to single column, hide other tiles */
    .czp-tile-grid.has-expanded {
      display: block;
      margin-bottom: 0;
    }
    .czp-tile-grid.has-expanded .czp-tile:not(.is-tile-expanded) {
      display: none;
    }

    /* Expanded tile, hidden when a section frame takes over as the content view.
       For project types without a section frame (basement, garage, deck, pool),
       the expanded tile stays visible and shows its inline .czp-tile-content
       (which holds the recommendation text). */
    .czp-tile-grid.has-expanded.has-visible-frame .czp-tile.is-tile-expanded {
      display: none !important;
    }
    /* Frame-less expansion: full-width inline card with recommendation content */
    .czp-tile-grid.has-expanded:not(.has-visible-frame) .czp-tile.is-tile-expanded {
      grid-column: 1 / -1;
      min-height: 280px;
      padding: 24px 28px;
      background: #ffffff !important;
      background-image: none !important;
      color: #0f172a;
      display: flex;
      flex-direction: column;
      gap: 10px;
      box-shadow: 0 10px 28px rgba(15,23,42,0.12);
      border: 1px solid #e2e8f0;
      border-radius: 14px;
      transform-origin: center top;
      animation: tileExpandFadeIn 0.42s cubic-bezier(0.2, 0.8, 0.25, 1.04) both;
    }
    /* Zoom-in pop for the opening animation (applies to frame-less expand + section frames) */
    @keyframes tileExpandFadeIn {
      0%   { opacity: 0; transform: scale(0.86); }
      60%  { opacity: 1; transform: scale(1.03); }
      100% { opacity: 1; transform: scale(1); }
    }
    /* Same pop-in for section frames that take over on tile expansion
       (ADU, Multiplex, Custom Home, Addition). Section-frames live at a
       different DOM depth than the grid (grid is nested in .zoning-info-panel;
       frames are siblings of that panel), so :has() sibling selectors don't
       reach them, JS applies .czp-is-opening to the visible frame directly. */
    .section-frame.czp-is-opening {
      transform-origin: center top;
      animation: tileExpandFadeIn 0.42s cubic-bezier(0.2, 0.8, 0.25, 1.04) both;
    }

    /* ── Zoom-out when returning to all projects ──
       Triggered by JS adding .czp-is-closing before the cleanup. */
    @keyframes czpTileZoomOut {
      0%   { opacity: 1; transform: scale(1); }
      100% { opacity: 0; transform: scale(0.88); }
    }
    .czp-tile-grid.czp-is-closing:not(.has-visible-frame) .czp-tile.is-tile-expanded,
    .czp-tile.is-tile-expanded.czp-is-closing {
      animation: czpTileZoomOut 0.24s cubic-bezier(0.45, 0, 0.8, 0.2) both !important;
      transform-origin: center top;
    }
    /* Section frame zooms out, JS adds .czp-is-closing to the visible frame */
    .section-frame.czp-is-closing {
      animation: czpTileZoomOut 0.24s cubic-bezier(0.45, 0, 0.8, 0.2) both !important;
      transform-origin: center top;
    }

    /* ── No-blink override for section frames that wrap a live map iframe ──
       The default `tileExpandFadeIn` animation starts at opacity:0 + scale(0.86)
       and takes 420ms to settle. When the frame contains an already-rendered
       map iframe, the opacity:0 start is a visible BLINK and the scale
       transform forces the iframe's tile pane to re-rasterize mid-animation.
       Skip the animation on these frames, the map's own loading overlay
       handles any genuine loading state, so the containing frame can simply
       appear instantly. All the map-containing tabs (coach, addition,
       multiplex, custom homes) wrap their iframe in `.draw-siteplan-embed`. */
    .section-frame.czp-is-opening:has(.draw-siteplan-embed),
    .section-frame.czp-is-closing:has(.draw-siteplan-embed) {
      animation: none !important;
      transform: none !important;
      opacity: 1 !important;
    }

    /* Belt & suspenders: the iframe itself never fades or scales, even if an
       ancestor somehow still tries to animate it. Prevents the tile content
       from re-rasterizing when a parent transform is applied. */
    iframe.draw-siteplan-iframe {
      opacity: 1 !important;
      transform: none;
      animation-name: none !important;
    }

    /* ── Tiles pop back in once the grid is restored ──
       Triggered by JS adding .czp-just-opened for ~600ms after close. */
    @keyframes czpGridTilePopIn {
      0%   { opacity: 0; transform: scale(0.82) translateY(6px); }
      65%  { opacity: 1; transform: scale(1.03) translateY(0); }
      100% { opacity: 1; transform: scale(1) translateY(0); }
    }
    .czp-tile-grid.czp-just-opened .czp-tile {
      animation: czpGridTilePopIn 0.48s cubic-bezier(0.2, 0.8, 0.25, 1.05) both;
    }
    .czp-tile-grid.czp-just-opened .czp-tile:nth-child(1)  { animation-delay: 0ms;   }
    .czp-tile-grid.czp-just-opened .czp-tile:nth-child(2)  { animation-delay: 30ms;  }
    .czp-tile-grid.czp-just-opened .czp-tile:nth-child(3)  { animation-delay: 60ms;  }
    .czp-tile-grid.czp-just-opened .czp-tile:nth-child(4)  { animation-delay: 90ms;  }
    .czp-tile-grid.czp-just-opened .czp-tile:nth-child(5)  { animation-delay: 120ms; }
    .czp-tile-grid.czp-just-opened .czp-tile:nth-child(6)  { animation-delay: 150ms; }
    .czp-tile-grid.czp-just-opened .czp-tile:nth-child(7)  { animation-delay: 180ms; }
    .czp-tile-grid.czp-just-opened .czp-tile:nth-child(8)  { animation-delay: 210ms; }
    .czp-tile-grid.czp-just-opened .czp-tile:nth-child(9)  { animation-delay: 240ms; }
    .czp-tile-grid.czp-just-opened .czp-tile:nth-child(n+10) { animation-delay: 270ms; }
    @media (prefers-reduced-motion: reduce) {
      .czp-tile-grid.czp-just-opened .czp-tile,
      .czp-tile-grid.has-expanded:not(.has-visible-frame) .czp-tile.is-tile-expanded,
      .section-frame.czp-is-opening,
      .section-frame.czp-is-closing,
      .czp-tile-grid.czp-is-closing .czp-tile.is-tile-expanded {
        animation: none !important;
      }
    }

    /* ── Snap-pulse: visual confirmation that the scroll has landed ──
       Subtle maple-red accent ring that blooms outward from the anchor
       element immediately after scrollActiveTabHeaderIntoView() settles.
       520ms total, ease-out-quart, the same curve as the tween itself
       so the handoff feels continuous. Never triggered on reduced-motion.
       Uses box-shadow (not transform) so it composites onto the section
       frame without nudging any children or forcing the map iframe to
       re-rasterize. */
    @keyframes snapPulseAnchor {
      0%   { box-shadow: 0 0 0 0 rgba(200, 16, 46, 0.28); }
      55%  { box-shadow: 0 0 0 5px rgba(200, 16, 46, 0.10); }
      100% { box-shadow: 0 0 0 11px rgba(200, 16, 46, 0); }
    }
    .js-snap-pulse {
      animation: snapPulseAnchor 520ms cubic-bezier(0.165, 0.84, 0.44, 1) both;
    }
    @media (prefers-reduced-motion: reduce) {
      .js-snap-pulse { animation: none !important; }
    }
    .czp-tile-grid.has-expanded:not(.has-visible-frame) .czp-tile.is-tile-expanded::after,
    .czp-tile-grid.has-expanded:not(.has-visible-frame) .czp-tile.is-tile-expanded::before {
      display: none !important;
    }
    .czp-tile-grid.has-expanded:not(.has-visible-frame) .czp-tile.is-tile-expanded > .czp-tile-title,
    .czp-tile-grid.has-expanded:not(.has-visible-frame) .czp-tile.is-tile-expanded > .czp-tile-badge {
      display: none;
    }
    .czp-tile-grid.has-expanded:not(.has-visible-frame) .czp-tile.is-tile-expanded .czp-tile-inline-header {
      display: flex !important;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 4px;
    }
    .czp-tile-grid.has-expanded:not(.has-visible-frame) .czp-tile.is-tile-expanded .czp-tile-inline-header .czp-tile-title {
      position: static !important;
      left: auto !important;
      right: auto !important;
      bottom: auto !important;
      color: #0f172a !important;
      font-size: 20px;
      font-weight: 800;
      text-shadow: none !important;
    }
    .czp-tile-grid.has-expanded:not(.has-visible-frame) .czp-tile.is-tile-expanded .czp-tile-back-btn {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      color: #c8102e;
      font-weight: 700;
      font-size: 13px;
      cursor: pointer;
      background: rgba(200,16,46,0.06);
      border: 1px solid rgba(200,16,46,0.15);
      border-radius: 8px;
      padding: 6px 14px;
      margin: 0;
    }
    .czp-tile-grid.has-expanded:not(.has-visible-frame) .czp-tile.is-tile-expanded .czp-tile-back-btn:hover {
      background: rgba(200,16,46,0.12);
      border-color: rgba(200,16,46,0.3);
    }
    .czp-tile-grid.has-expanded:not(.has-visible-frame) .czp-tile.is-tile-expanded .czp-tile-content {
      display: block !important;
      color: #334155;
    }
    .czp-tile-grid.has-expanded:not(.has-visible-frame) .czp-tile.is-tile-expanded .pcard-headline {
      color: #c8102e !important;
      font-size: 11px !important;
      font-weight: 800 !important;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      margin: 0 0 6px !important;
    }
    .czp-tile-grid.has-expanded:not(.has-visible-frame) .czp-tile.is-tile-expanded .pcard-message {
      color: #334155 !important;
      font-size: 14px !important;
      line-height: 1.6 !important;
      margin: 0 0 14px !important;
    }
    .czp-tile-grid.has-expanded:not(.has-visible-frame) .czp-tile.is-tile-expanded .pcard-cta {
      align-self: flex-start;
      margin-top: 4px;
    }

    /* ── Section frames below the expanded grid, seamless visual flow ──
       These are siblings of .czp-tile-grid, not children.
       Uses :has() since section-frames precede the grid in DOM order. */
    :has(> .czp-tile-grid.has-expanded) > .section-frame {
      border-radius: 14px;
      margin-top: 0;
    }

    /* Map embed inside expanded view, extend to fill and blur-fade at bottom */
    :has(> .czp-tile-grid.has-expanded) > .section-frame .draw-siteplan-embed {
      position: relative;
      border: none;
      border-radius: 0 0 14px 14px;
      box-shadow: none;
      margin-bottom: 0;
    }
    :has(> .czp-tile-grid.has-expanded) > .section-frame .draw-siteplan-iframe {
      height: clamp(450px, 65vh, 800px);
    }
    :has(> .czp-tile-grid.has-expanded) > .section-frame .draw-siteplan-embed::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 100px;
      background: linear-gradient(to bottom,
        transparent 0%,
        rgba(248, 250, 252, 0.4) 40%,
        rgba(248, 250, 252, 0.85) 70%,
        rgba(248, 250, 252, 1) 100%);
      backdrop-filter: blur(4px);
      -webkit-backdrop-filter: blur(4px);
      pointer-events: none;
      z-index: 5;
      border-radius: 0 0 10px 10px;
    }

    /* Keep the "All projects" back button visible in section intros when expanded */

    /* Tabs with no section frames (basement, garage, deck, pool), full rounded corners */
    .czp-tile-grid.has-expanded:not(.has-visible-frame) .czp-tile.is-tile-expanded {
      border-radius: 10px;
    }

    /* HARD LOCK: When grid is in tile-select mode (no tile expanded),
       force-hide ALL section frames regardless of inline styles.
       Only .has-expanded removes this lock.
       Uses :has() since section-frames precede the grid in DOM order
       (~ only selects later siblings). */
    :has(> .czp-tile-grid.czp-frames-locked:not(.has-expanded)) > .section-frame {
      display: none !important;
    }

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

    /* ── Photo & tinted backgrounds ──
       Photo tiles: background-image set inline via JS
       Fallback tiles: parliament-bg with brand-tinted gradient overlay
       (same technique as .adu-model-button--draw-own) */
    .czp-tile.tile-bg-adu         { background-image: url('/marketing/tiles/adu.jpg'); }
    .czp-tile.tile-bg-custom-home { background-image: url('/custom-home-grok-aerial.png'); }
    .czp-tile.tile-bg-multiplex   { background-image: url('/marketing/tiles/multiplex.jpg'); }
    .czp-tile.tile-bg-basement    { background-image: linear-gradient(165deg, rgba(49,46,129,0.82), rgba(99,102,241,0.68)), url('/parliament-bg.png'); }
    .czp-tile.tile-bg-addition    { background-image: url('/marketing/tiles/addition.jpg'); }
    .czp-tile.tile-bg-garage      { background-image: linear-gradient(165deg, rgba(30,58,95,0.82), rgba(59,130,246,0.68)), url('/parliament-bg.png'); }
    .czp-tile.tile-bg-deck        { background-image: linear-gradient(165deg, rgba(6,78,59,0.82), rgba(5,150,105,0.68)), url('/parliament-bg.png'); }
    .czp-tile.tile-bg-pool        { background-image: linear-gradient(165deg, rgba(22,78,99,0.82), rgba(6,182,212,0.68)), url('/parliament-bg.png'); }
    .czp-tile.tile-bg-notes       { background-image: linear-gradient(165deg, rgba(30,41,59,0.85), rgba(71,85,105,0.72)), url('/parliament-bg.png'); border-color: #334155; }

    /* ── Recommended badge ── */
    .czp-tile-recommended {
      display: none;
      position: absolute; top: 12px; right: 12px; z-index: 2;
      padding: 3px 8px; border-radius: 999px;
      font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px;
      background: rgba(255,255,255,0.18); backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      color: #fde68a; border: 1px solid rgba(253,230,138,0.3);
    }
    .czp-tile.is-recommended .czp-tile-recommended { display: block; }

    /* ── Property data sheet (refreshed) ── */
    .czp-datasheet[hidden] { display: none !important; }
    .czp-datasheet {
      grid-column: 1 / -1;
      display: grid;
      grid-template-columns: 1fr 1fr;
      column-gap: 1px;
      row-gap: 1px;
      margin: 0 0 14px;
      border-radius: 14px;
      border: 1px solid #e2e8f0;
      overflow: hidden;
      /* Background shows through column/row gaps as hairline dividers */
      background: #e5ebf3;
      box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 6px 16px rgba(15, 23, 42, 0.035);
    }
    .czp-datasheet .ds-cell {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 10px;
      padding: 10px 16px;
      background: #fff;
      transition: background-color 0.15s ease;
    }
    .czp-datasheet .ds-cell:hover {
      background: #fbfcfe;
    }
    .czp-datasheet .ds-key {
      font-size: 11px;
      font-weight: 500;
      color: #64748b;
      white-space: nowrap;
      letter-spacing: 0;
      line-height: 1.3;
    }
    .czp-datasheet .ds-val,
    .czp-datasheet .zoning-stat-value {
      font-size: 13.5px;
      font-weight: 700;
      color: #0f172a;
      text-align: right;
      white-space: nowrap;
      letter-spacing: -0.01em;
      font-variant-numeric: tabular-nums;
      line-height: 1.3;
    }
    .czp-datasheet .ds-val.v-green { color: #0f172a; }
    .czp-datasheet .ds-val.v-accent { color: #0f172a; }
    /* Dynamic color states applied by JS (className reassigned to zoning-stat-value + modifier) */
    .czp-datasheet .zoning-stat-value.highlight { color: #0f172a; }
    .czp-datasheet .zoning-stat-value.warning { color: #d97706; }
    .czp-datasheet .zoning-stat-value.accent { color: #c8102e; }
    .czp-datasheet .zoning-stat-value.units { color: #0f172a; }
    .czp-datasheet .ds-val .ds-sub {
      font-size: 10.5px;
      font-weight: 500;
      color: #94a3b8;
      margin-left: 5px;
      letter-spacing: 0;
    }
    /* Full-width row, centered, soft gradient band */
    .czp-datasheet .ds-full-row {
      grid-column: 1 / -1;
      justify-content: center;
      text-align: center;
      gap: 12px;
      background: linear-gradient(180deg, #fafbfd 0%, #f4f7fb 100%);
    }
    .czp-datasheet .ds-full-row .ds-key {
      font-size: 10.5px;
      text-transform: uppercase;
      letter-spacing: 0.09em;
      color: #94a3b8;
      font-weight: 600;
    }
    /* Section header, subtle gradient band with maple accent bar */
    .czp-datasheet .ds-header {
      grid-column: 1 / -1;
      padding: 9px 16px 8px;
      font-size: 10px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.12em;
      color: #64748b;
      background: linear-gradient(180deg, #f7f9fc 0%, #eef2f7 100%);
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .czp-datasheet .ds-header::before {
      content: '';
      width: 3px;
      height: 11px;
      border-radius: 2px;
      background: linear-gradient(180deg, #d4172f 0%, #b80d24 100%);
      display: inline-block;
      flex-shrink: 0;
    }
    /* Footer, Email + unit toggle row */
    .czp-datasheet .ds-footer {
      grid-column: 1 / -1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 8px 12px;
      background: linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%);
      gap: 8px;
    }
    .czp-datasheet .ds-footer:empty { display: none; }
    /* Unit toggle, pill button */
    .czp-datasheet .ds-toggle {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 11px;
      font-weight: 600;
      color: #475569;
      background: #fff;
      border: 1px solid #d7dde6;
      cursor: pointer;
      padding: 5px 12px 5px 10px;
      border-radius: 999px;
      transition: all 0.15s ease;
      box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
      letter-spacing: 0.01em;
      font-variant-numeric: tabular-nums;
      margin-left: auto;
    }
    .czp-datasheet .ds-toggle::before {
      content: '';
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: #94a3b8;
      transition: background 0.15s ease;
    }
    .czp-datasheet .ds-toggle:hover {
      background: #f8fafc;
      border-color: #94a3b8;
      color: #0f172a;
      box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
    }
    .czp-datasheet .ds-toggle:hover::before {
      background: #3b82f6;
    }
    .czp-datasheet .ds-toggle:active {
      transform: translateY(0.5px);
    }

    /* ── Restricted projects summary ── */
    .czp-restricted-summary {
      margin: 6px 0 0;
      font-size: 11px; font-weight: 500;
      color: #94a3b8; line-height: 1.5;
    }
    .czp-restricted-summary .rsum-names { color: #64748b; font-weight: 600; }

    /* Tile content & inline header: hidden by default (used by info-compact detail mode) */
    .czp-tile-content { display: none; }
    .czp-tile-inline-header { display: none; }

    /* Back-to-grid button */
    .czp-grid-back-btn {
      display: none; align-items: center; gap: 6px;
      margin: 8px 0 12px; padding: 8px 14px;
      border: 1px solid #e2e8f0; border-radius: 10px; background: #fff;
      font-size: 12px; font-weight: 700; color: #475569; cursor: pointer;
    }
    .czp-grid-back-btn:hover { background: #f8fafc; border-color: #cbd5e1; }
    .czp-grid-back-btn.is-visible { display: inline-flex; }

    /* Nurture glow, disabled (was too distracting) */

    .czp-card.czp-zone-header {
      background: transparent;
      border: none;
      padding: 0;
      margin-bottom: 12px;
      justify-content: flex-start;
      align-items: center;
    }

    .czp-zone-header {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    /* Maple-red badge with subtle inner shine and soft drop shadow */
    .czp-zone-badge {
      flex-shrink: 0;
      background: linear-gradient(135deg, #e61b3a 0%, #c8102e 50%, #a50a24 100%);
      color: #fff;
      font-weight: 800;
      font-size: 13px;
      letter-spacing: 0.3px;
      padding: 7px 13px;
      border-radius: 9px;
      line-height: 1.15;
      white-space: nowrap;
      box-shadow:
        0 1px 2px rgba(164, 10, 36, 0.35),
        0 2px 6px rgba(200, 16, 46, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        inset 0 -1px 0 rgba(0, 0, 0, 0.12);
      text-shadow: 0 1px 0 rgba(0, 0, 0, 0.15);
      font-variant-numeric: tabular-nums;
    }

    .czp-zone-details {
      flex: 1;
      min-width: 0;
    }

    .czp-zone-name {
      font-size: 15px;
      font-weight: 700;
      color: #0f172a;
      margin-bottom: 0;
      letter-spacing: -0.01em;
      line-height: 1.35;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .czp-zone-meaning {
      display: none;
    }

    .czp-lot-stats {
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
      margin-bottom: 0;
    }

    .czp-limits-stats {
      grid-template-columns: repeat(4, 1fr);
      gap: 10px;
      margin-bottom: 0;
    }

    .czp-setbacks-strip {
      margin-top: 14px;
      padding-top: 14px;
      border-top: 1px solid #f1f5f9;
    }

    .czp-unit-toggle {
      display: block;
      width: 100%;
      margin-top: 10px;
      padding: 6px 12px;
      font-size: 11px;
      font-weight: 600;
      color: #64748b;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 6px;
      cursor: pointer;
      transition: background 0.15s, color 0.15s;
    }
    .czp-unit-toggle:hover {
      background: #f1f5f9;
      color: #475569;
    }

    /* Email report, refined pill with blue gradient */
    .czp-email-report-btn {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      margin: 0;
      padding: 5px 12px 5px 10px;
      font-size: 11px;
      font-weight: 600;
      color: #1d4ed8;
      background: linear-gradient(180deg, #eff6ff 0%, #dbeafe 100%);
      border: 1px solid #bfdbfe;
      border-radius: 999px;
      cursor: pointer;
      transition: all 0.15s ease;
      letter-spacing: 0.01em;
      box-shadow: 0 1px 2px rgba(29, 78, 216, 0.08);
    }
    .czp-email-report-btn::before {
      content: '';
      width: 12px;
      height: 12px;
      background-color: currentColor;
      -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='5' width='18' height='14' rx='2'/><path d='M3 7l9 6 9-6'/></svg>");
              mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='5' width='18' height='14' rx='2'/><path d='M3 7l9 6 9-6'/></svg>");
      -webkit-mask-repeat: no-repeat;
              mask-repeat: no-repeat;
      -webkit-mask-size: contain;
              mask-size: contain;
      -webkit-mask-position: center;
              mask-position: center;
      flex-shrink: 0;
    }
    .czp-email-report-btn:hover {
      background: linear-gradient(180deg, #dbeafe 0%, #bfdbfe 100%);
      border-color: #93c5fd;
      color: #1e40af;
      text-decoration: none;
      box-shadow: 0 2px 5px rgba(29, 78, 216, 0.14);
    }
    .czp-email-report-btn:active {
      transform: translateY(0.5px);
    }
    .czp-email-report-btn:disabled {
      opacity: 0.5;
      cursor: not-allowed;
      text-decoration: none;
      box-shadow: none;
    }
    .czp-email-report-btn.sent {
      color: #047857;
      background: linear-gradient(180deg, #ecfdf5 0%, #d1fae5 100%);
      border-color: #a7f3d0;
      cursor: default;
      text-decoration: none;
      box-shadow: 0 1px 2px rgba(4, 120, 87, 0.08);
    }
    .czp-email-report-btn.sent::before {
      -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
              mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
    }

    .czp-permissions {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-bottom: 14px;
    }

    .czp-permissions:empty {
      display: none;
    }

    .czp-perm-tag {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      font-size: 12px;
      font-weight: 600;
      padding: 4px 10px;
      border-radius: 20px;
      line-height: 1.3;
    }

    .czp-perm-tag.allowed {
      background: rgba(34, 197, 94, 0.1);
      color: #16a34a;
    }

    .czp-perm-tag.restricted {
      background: rgba(245, 158, 11, 0.1);
      color: #d97706;
    }

    .czp-overlay-card .zoning-bullets {
      margin: 0;
    }

    @media (max-width: 640px) {
      .czp-card {
        padding: 14px 16px;
        border-radius: 12px;
        margin-bottom: 10px;
      }
      .czp-tile-grid { gap: 8px; }
      .czp-tile { min-height: clamp(120px, 20vw, 150px); border-radius: 12px; }
      .czp-tile-title { left: 12px; right: 12px; bottom: 26px; }
      .czp-tile-badge { left: 12px; right: 12px; bottom: 8px; }
      .czp-datasheet {
        grid-template-columns: 1fr;
      }
      .czp-datasheet .ds-cell { padding: 8px 13px; }
      .czp-datasheet .ds-val,
      .czp-datasheet .zoning-stat-value { font-size: 12.5px; }
      .czp-datasheet .ds-key { font-size: 10.5px; }
      .czp-datasheet .ds-header { padding: 8px 13px 7px; }
      .czp-datasheet .ds-footer { padding: 7px 10px; }
      .czp-zone-header {
        flex-direction: row;
        align-items: center;
        gap: 10px;
      }
      .czp-lot-stats {
        grid-template-columns: repeat(3, 1fr);
      }
      .czp-limits-stats {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    .build-viability-card {
      border-radius: 0;
      border: none;
      background: transparent;
      padding: 0;
      margin-bottom: 14px;
    }

    .build-viability-card.viable {
      border: none;
      background: transparent;
    }

    .build-viability-card.not-viable {
      border: none;
      background: transparent;
    }

    .build-viability-card.pending {
      border: none;
      background: transparent;
    }

    .build-viability-status {
      font-size: 15px;
      font-weight: 700;
      color: #0f172a;
      margin-bottom: 4px;
    }

    .build-viability-meta {
      font-size: 12px;
      color: #475569;
      line-height: 1.35;
    }

    .build-viability-model-list {
      margin-top: 8px;
      display: grid;
      gap: 4px;
      font-size: 12px;
      color: #334155;
      line-height: 1.35;
    }

    .build-viability-model-list .model-row {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      align-items: baseline;
    }

    .build-viability-model-list .model-name {
      font-weight: 700;
      color: #0f172a;
    }

    .build-viability-model-list .model-state {
      font-weight: 600;
    }

    .build-viability-model-list .model-state.viable {
      color: #166534;
    }

    .build-viability-model-list .model-state.not-viable {
      color: #991b1b;
    }

    .build-viability-model-list .model-state.pending {
      color: #92400e;
    }

    .zoning-contractor-actions {
      display: none !important;
    }

    .zoning-contractor-actions .contractor-book-btn,
    .zoning-contractor-actions .contractor-website-link {
      width: 100%;
      justify-content: center;
      text-decoration: none;
    }
    
    @keyframes panelSlideIn {
      from { opacity: 0; transform: translateY(-10px); }
      to { opacity: 1; transform: translateY(0); }
    }

    @keyframes reportSlideIn {
      0% {
        opacity: 0;
        transform: translateY(72px) scale(0.9);
        box-shadow: 0 18px 56px rgba(2, 6, 23, 0.2);
      }
      55% {
        opacity: 1;
        transform: translateY(-14px) scale(1.02);
        box-shadow: 0 26px 72px rgba(2, 6, 23, 0.24);
      }
      78% {
        transform: translateY(6px) scale(0.996);
        box-shadow: 0 16px 48px rgba(2, 6, 23, 0.16);
      }
      100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        box-shadow: 0 10px 30px rgba(15, 23, 42, 0.12);
      }
    }
    
    .zoning-header {
      display: flex;
      align-items: center;
      gap: 14px;
      margin-bottom: 20px;
      padding-bottom: 16px;
      border-bottom: 1px solid #e2e8f0;
    }
    
    .zone-badge {
      background: linear-gradient(135deg, var(--accent-red) 0%, #b91c1c 100%);
      color: white;
      font-weight: 700;
      font-size: 20px;
      padding: 12px 18px;
      border-radius: 12px;
      letter-spacing: 0.5px;
      box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3);
    }
    
    .zone-title {
      flex: 1;
    }
    
    .zone-title h3 {
      font-size: 18px;
      font-weight: 600;
      color: var(--chat-text-primary);
      margin: 0 0 4px 0;
    }
    
    .zone-title p {
      font-size: 13px;
      color: var(--chat-text-secondary);
      margin: 0;
    }
    
    /* Address + zone header inside Your Lot panel */
    .lot-address-header {
      display: none !important;
      margin-bottom: 0;
    }
    .lot-address-row {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 10px;
    }
    .lot-address-info {
      display: flex;
      flex-direction: column;
      gap: 2px;
      min-width: 0;
      flex: 1;
    }
    .lot-address-text {
      font-size: 1.05rem;
      font-weight: 700;
      color: var(--text-primary);
      line-height: 1.3;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .lot-zone-text {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin-top: 6px;
      font-size: 0.75rem;
      color: var(--accent-red);
      font-weight: 600;
      letter-spacing: 0.3px;
    }
    /* lot-new-address-btn removed */

    .zoning-section-title {
      font-size: 11px;
      font-weight: 600;
      color: #64748b;
      text-transform: uppercase;
      letter-spacing: 1px;
      margin-bottom: 10px;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    
    .zoning-section-title::after {
      content: '';
      flex: 1;
      height: 1px;
      background: #e2e8f0;
    }
    
    /* Lot card embedded in chat messages */
    .chat-lot-card {
      background: #f8f9fa;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 16px;
      margin-bottom: 14px;
    }
    .chat-lot-card .zoning-section-title {
      margin-top: 0;
    }
    .chat-lot-card .setbacks-panel {
      margin-bottom: 0;
    }
    
    .zoning-stats {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 10px;
      margin-bottom: 18px;
    }
    
    .zoning-stat {
      background: transparent;
      border: none;
      border-radius: 0;
      padding: 4px 0;
      text-align: center;
      transition: all 0.2s ease;
    }
    
    .zoning-stat:hover {
      background: transparent;
      border-color: transparent;
    }
    
    .zoning-stat-label {
      font-size: 10px;
      color: #64748b;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      margin-bottom: 6px;
    }
    
    .zoning-stat-value {
      font-size: 18px;
      font-weight: 700;
      color: var(--chat-text-primary);
    }
    /* Content-aware placeholder for any not-yet-loaded stat value. Inline
       shimmer bar shaped like the text it will eventually replace, not a
       generic spinner. Works inside .zoning-stat-value, .ds-val, and any
       other container that wraps a numeric stat. */
    .stat-placeholder {
      display: inline-block;
      width: 3.2em;
      height: 0.95em;
      vertical-align: -0.12em;
      border-radius: 4px;
      background: linear-gradient(90deg,
        rgba(148, 163, 184, 0.18) 0%,
        rgba(148, 163, 184, 0.38) 50%,
        rgba(148, 163, 184, 0.18) 100%);
      background-size: 200% 100%;
      animation: zoned-skel-shimmer 1.4s ease-in-out infinite;
    }
    @keyframes zoned-skel-shimmer {
      0%   { background-position: 200% 0; }
      100% { background-position: -200% 0; }
    }

    /* Content-aware skeleton overlay for the zoning info panel, shown
       between the moment the user clicks Get Zoned and the moment real
       /check + map data BOTH land. Mimics the panel's vertical rhythm
       (address bar + "pick another address" button, zone-code chip + zone
       description, lot diagram rectangle, Development Capacity stat rows,
       footer). Stays mounted as an opaque overlay so half-rendered panel
       content underneath never leaks through. Removed by
       _removeZonedPanelSkeleton() once activeProjectContext is fully
       populated (zone + lotArea + lotWidth + buildable + setbacks). */
    .zoning-info-panel.is-skel-loading {
      position: relative;
      min-height: 520px;
      overflow: hidden;
    }
    .zoned-panel-skeleton {
      position: absolute;
      inset: 0;
      z-index: 12;
      background: #ffffff;
      display: flex;
      flex-direction: column;
      gap: 16px;
      padding: 20px 18px;
      overflow: hidden;
    }
    .zoned-panel-skeleton__row {
      display: flex;
      align-items: center;
      gap: 14px;
    }
    .zoned-panel-skeleton__row--between { justify-content: space-between; }
    .zoned-panel-skeleton__bar {
      height: 14px;
      border-radius: 4px;
      background: linear-gradient(90deg,
        rgba(148, 163, 184, 0.18) 0%,
        rgba(148, 163, 184, 0.38) 50%,
        rgba(148, 163, 184, 0.18) 100%);
      background-size: 200% 100%;
      animation: zoned-skel-shimmer 1.4s ease-in-out infinite;
    }
    .zoned-panel-skeleton__bar--xl { height: 22px; width: 55%; }
    .zoned-panel-skeleton__bar--lg { height: 18px; width: 68%; }
    .zoned-panel-skeleton__bar--md { height: 14px; width: 40%; }
    .zoned-panel-skeleton__bar--sm { height: 14px; width: 22%; }
    .zoned-panel-skeleton__bar--xs { height: 12px; width: 14%; }
    .zoned-panel-skeleton__chip {
      flex: 0 0 auto;
      width: 56px;
      height: 30px;
      border-radius: 14px;
      background: linear-gradient(90deg,
        rgba(200, 16, 46, 0.22) 0%,
        rgba(200, 16, 46, 0.45) 50%,
        rgba(200, 16, 46, 0.22) 100%);
      background-size: 200% 100%;
      animation: zoned-skel-shimmer 1.4s ease-in-out infinite;
    }
    .zoned-panel-skeleton__diagram {
      width: 100%;
      aspect-ratio: 16 / 10;
      border-radius: 12px;
      background: linear-gradient(90deg,
        rgba(148, 163, 184, 0.14) 0%,
        rgba(148, 163, 184, 0.32) 50%,
        rgba(148, 163, 184, 0.14) 100%);
      background-size: 200% 100%;
      animation: zoned-skel-shimmer 1.4s ease-in-out infinite;
    }
    .zoned-panel-skeleton__pill {
      flex: 0 0 auto;
      width: 120px;
      height: 28px;
      border-radius: 8px;
      background: linear-gradient(90deg,
        rgba(148, 163, 184, 0.18) 0%,
        rgba(148, 163, 184, 0.38) 50%,
        rgba(148, 163, 184, 0.18) 100%);
      background-size: 200% 100%;
      animation: zoned-skel-shimmer 1.4s ease-in-out infinite;
    }
    @media (prefers-reduced-motion: reduce) {
      .stat-placeholder,
      .zoned-panel-skeleton__bar,
      .zoned-panel-skeleton__chip,
      .zoned-panel-skeleton__diagram,
      .zoned-panel-skeleton__pill {
        animation: none;
      }
    }
    
    .zoning-stat-value.highlight {
      color: #0f172a;
    }

    .zoning-stat-value.warning {
      color: #f59e0b;
    }

    .zoning-stat-value.accent {
      color: var(--accent-red);
    }

    .zoning-stat-value.units {
      color: #0f172a;
    }
    
    .zoning-stat.income-stat {
      grid-column: 1 / -1;
      background: linear-gradient(135deg, rgba(34, 197, 94, 0.08), rgba(34, 197, 94, 0.02));
      border-color: rgba(34, 197, 94, 0.15);
    }
    .zoning-stat.income-stat:hover {
      background: linear-gradient(135deg, rgba(34, 197, 94, 0.12), rgba(34, 197, 94, 0.04));
      border-color: rgba(34, 197, 94, 0.25);
    }
    .zoning-stat.income-stat .zoning-stat-value {
      color: #22c55e;
      font-size: 22px;
    }
    .zoning-stat.income-stat .zoning-stat-sublabel {
      font-size: 10px;
      color: #64748b;
      margin-top: 2px;
    }

    /* ── Multiplex Deal Setup (above cards) ──────────────── */
    .multiplex-deal-setup {
      display: none;
      background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
      border: 1px solid #dbe5f1;
      border-top: 3px solid var(--accent, #c8102e);
      border-radius: 14px;
      padding: 20px 18px;
      margin-bottom: 14px;
      box-shadow: 0 4px 16px rgba(15, 23, 42, 0.05);
    }
    .multiplex-deal-setup-intro {
      margin: 0 0 14px;
      font-size: 13px;
      line-height: 1.5;
      color: #64748b;
    }
    .multiplex-deal-setup-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      margin-bottom: 12px;
    }
    .multiplex-deal-setup-field {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }
    .multiplex-deal-setup-label {
      font-size: 11px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: #475569;
    }
    .multiplex-deal-setup-input {
      width: 100%;
      box-sizing: border-box;
      height: 40px;
      border: 1px solid #cbd5e1;
      border-radius: 8px;
      padding: 0 10px;
      font-size: 15px;
      font-weight: 600;
      color: #0f172a;
      background: #fff;
      transition: border-color 0.15s;
    }
    .multiplex-deal-setup-input:focus {
      outline: none;
      border-color: #c8102e;
      box-shadow: 0 0 0 2px rgba(200, 16, 46, 0.12);
    }
    .multiplex-deal-setup-input-row {
      display: flex;
      gap: 6px;
    }
    .multiplex-deal-setup-input-row .multiplex-deal-setup-input {
      flex: 1;
    }
    .multiplex-deal-setup-auto-btn {
      height: 40px;
      padding: 0 10px;
      border: 1px solid #cbd5e1;
      border-radius: 8px;
      background: #f8fafc;
      font-size: 11px;
      font-weight: 600;
      color: #64748b;
      cursor: pointer;
      white-space: nowrap;
      transition: background 0.15s;
    }
    .multiplex-deal-setup-auto-btn:hover { background: #f1f5f9; }
    .multiplex-deal-setup-row {
      display: flex;
      flex-direction: column;
      gap: 6px;
      margin-bottom: 12px;
    }
    .multiplex-deal-setup-presets {
      display: flex;
      gap: 6px;
    }
    .multiplex-deal-preset-btn {
      flex: 1;
      height: 36px;
      border: 1px solid #cbd5e1;
      border-radius: 8px;
      background: #fff;
      font-size: 13px;
      font-weight: 600;
      color: #334155;
      cursor: pointer;
      transition: all 0.15s;
    }
    .multiplex-deal-preset-btn:hover { background: #f8fafc; border-color: #94a3b8; }
    .multiplex-deal-preset-btn.active {
      background: #0f172a;
      color: #fff;
      border-color: #0f172a;
    }
    .multiplex-deal-setup-tabs {
      display: flex;
      gap: 4px;
      flex-wrap: wrap;
    }
    .multiplex-deal-tab {
      flex: 1;
      min-width: 0;
      height: 36px;
      border: 1px solid #cbd5e1;
      border-radius: 8px;
      background: #fff;
      font-size: 13px;
      font-weight: 600;
      color: #334155;
      cursor: pointer;
      transition: all 0.15s;
      padding: 0 6px;
    }
    .multiplex-deal-tab:hover { background: #f8fafc; border-color: #94a3b8; }
    .multiplex-deal-tab.active {
      background: #c8102e;
      color: #fff;
      border-color: #c8102e;
    }
    .multiplex-deal-tab.disabled {
      opacity: 0.4;
      cursor: not-allowed;
    }
    .multiplex-deal-summary-btn {
      width: 100%;
      height: 40px;
      border: none;
      border-radius: 8px;
      background: #0f172a;
      color: #fff;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      transition: background 0.15s;
    }
    .multiplex-deal-summary-btn:hover { background: #1e293b; }
    .multiplex-deal-setup-hint {
      margin: 0 0 12px;
      font-size: 12px;
      color: #94a3b8;
      text-align: center;
    }
    .whatfits-card--multiplex.is-deal-active {
      border-color: #c8102e !important;
      box-shadow: 0 0 0 2px rgba(200, 16, 46, 0.25), 0 4px 12px rgba(200, 16, 46, 0.1);
    }
    @media (max-width: 480px) {
      .multiplex-deal-setup-grid { grid-template-columns: 1fr; }
      .multiplex-deal-setup { padding: 16px 14px; }
    }

    .multifamily-finance-card {
      background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
      border: 1px solid #dbe5f1;
      border-top: 3px solid var(--accent, #c8102e);
      border-radius: 14px;
      padding: 28px 24px;
      margin-bottom: 18px;
      box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
    }

    .multifamily-finance-title {
      margin: 0 0 6px;
      font-family: 'Sora', sans-serif;
      font-size: 17px;
      font-weight: 700;
      color: #0f172a;
      letter-spacing: -0.01em;
    }

    .multifamily-finance-subtitle {
      margin: 0 0 20px;
      font-size: 12.5px;
      color: #475569;
      line-height: 1.5;
      text-align: left;
    }

    .multifamily-email-summary-row {
      display: flex;
      align-items: center;
      gap: 12px;
      margin: 0 0 18px;
    }
    .multifamily-email-summary-row .multifamily-preset-buttons {
      display: flex;
      gap: 4px;
      margin-right: auto;
    }
    .multifamily-email-summary-row .multifamily-preset-btn {
      font-size: 11px;
      padding: 5px 10px;
    }

    .multifamily-email-summary-btn {
      border: 1px solid #cbd5e1;
      background: #ffffff;
      color: #0f172a;
      border-radius: 9px;
      padding: 10px 14px;
      font-size: 12px;
      font-weight: 700;
      touch-action: manipulation;
      -webkit-tap-highlight-color: transparent;
      line-height: 1.2;
      cursor: pointer;
      transition: background 0.15s ease, border-color 0.15s ease, transform 0.08s ease;
    }

    .multifamily-email-summary-btn:hover {
      border-color: #94a3b8;
      background: #f8fafc;
    }

    .multifamily-email-summary-btn:disabled {
      opacity: 0.65;
      cursor: not-allowed;
      transform: none;
    }

    .multifamily-mode-toggle {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 6px;
      margin-bottom: 20px;
      padding: 5px;
      background: #f8fafc;
      border: 1px solid #dbe5f1;
      border-radius: 10px;
    }

    .multifamily-mode-btn {
      border: none;
      border-radius: 8px;
      padding: 10px 12px;
      touch-action: manipulation;
      -webkit-tap-highlight-color: transparent;
      background: transparent;
      color: #475569;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.01em;
      cursor: pointer;
      transition: background 0.15s, color 0.15s;
      font-family: inherit;
    }

    .multifamily-mode-btn.active {
      background: linear-gradient(135deg, #c8102e 0%, #a00d24 100%);
      color: #ffffff;
    }

    .multifamily-simple-panel {
      margin-bottom: 18px;
      border: 1px solid #e2e8f0;
      border-radius: 10px;
      overflow: hidden;
      background: #ffffff;
    }

    .multifamily-simple-header {
      margin: 0;
      padding: 12px 14px;
      background: #f8fafc;
      border-bottom: 1px solid #e2e8f0;
      font-size: 10px;
      text-transform: uppercase;
      letter-spacing: 0.45px;
      color: #64748b;
      font-weight: 700;
    }

    .multifamily-simple-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 0;
    }

    .multifamily-simple-sources-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 0;
      border-top: 1px solid #e2e8f0;
      background: #f8fafc;
    }

    .multifamily-simple-sources-item {
      padding: 14px 14px;
      border-right: 1px solid #e2e8f0;
      border-bottom: 1px solid #e2e8f0;
    }

    .multifamily-simple-sources-item:nth-child(2n) {
      border-right: none;
    }

    .multifamily-simple-sources-item:nth-last-child(-n+2) {
      border-bottom: none;
    }

    .multifamily-simple-item {
      padding: 14px 14px;
      border-bottom: 1px solid #e2e8f0;
      border-right: 1px solid #e2e8f0;
    }

    .multifamily-simple-item:nth-child(2n) {
      border-right: none;
    }

    .multifamily-simple-item:nth-last-child(-n+2) {
      border-bottom: none;
    }

    .multifamily-simple-label {
      display: block;
      font-size: 10px;
      text-transform: uppercase;
      letter-spacing: 0.4px;
      color: #64748b;
      margin-bottom: 6px;
      font-weight: 700;
    }

    .multifamily-simple-value {
      font-family: 'Sora', sans-serif;
      font-size: 18px;
      font-weight: 700;
      color: #0f172a;
      line-height: 1.2;
    }

    .multifamily-simple-value.good {
      color: #16a34a;
    }

    .multifamily-simple-value.warn {
      color: #d97706;
    }

    .multifamily-conversion-controls {
      margin-bottom: 20px;
    }

    .multifamily-conversion-label {
      display: block;
      margin-bottom: 10px;
      font-size: 10px;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: #64748b;
      font-weight: 700;
      text-align: left;
    }

    .multifamily-conversion-tabs {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 0;
      border: 1px solid #dbe5f1;
      border-radius: 10px;
      overflow: hidden;
      position: relative;
      z-index: 2;
    }

    .multifamily-conversion-tab {
      padding: 11px 8px;
      font-size: 11.5px;
      font-weight: 600;
      touch-action: manipulation;
      -webkit-tap-highlight-color: transparent;
      text-align: center;
      color: #475569;
      background: #ffffff;
      border: none;
      border-right: 1px solid #dbe5f1;
      cursor: pointer;
      transition: all 0.15s ease;
      font-family: inherit;
    }

    .multifamily-conversion-tab.standard-tab:last-child {
      border-right: none;
    }

    .multifamily-conversion-tab.max-units-tab {
      grid-column: 1 / -1;
      border-right: none;
      border-top: 1px solid #dbe5f1;
      font-weight: 700;
      color: #9f1239;
      background: linear-gradient(180deg, #fff7f9 0%, #ffffff 100%);
    }

    .multifamily-conversion-tab:hover {
      background: #fef2f2;
      color: var(--accent, #c8102e);
    }

    .multifamily-conversion-tab.active {
      background: linear-gradient(135deg, #c8102e 0%, #a00d24 100%);
      color: #ffffff;
      font-weight: 700;
    }

    .multifamily-conversion-tab.disabled,
    .multifamily-conversion-tab:disabled {
      background: #f8fafc;
      color: #94a3b8;
      cursor: not-allowed;
      opacity: 0.72;
      filter: grayscale(0.45) blur(0.35px);
      pointer-events: none;
    }

    .multifamily-conversion-tab.disabled:hover,
    .multifamily-conversion-tab:disabled:hover {
      background: #f8fafc;
      color: #94a3b8;
    }

    .multifamily-conversion-select {
      display: none;
    }

    .multifamily-conversion-hint {
      margin: 10px 0 0;
      font-size: 11px;
      color: #64748b;
      line-height: 1.4;
    }

    .multifamily-current-value-controls {
      margin: 10px 0 18px;
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 10px;
      align-items: end;
    }

    .multifamily-current-value-secondary {
      margin: -2px 0 14px;
    }

    .multifamily-current-value-input {
      width: 100%;
      border: 1px solid #dbe5f1;
      border-radius: 10px;
      background-color: #ffffff;
      font-size: 13px;
      padding: 11px 14px;
      color: #0f172a;
      font-weight: 600;
      transition: border-color 0.15s, box-shadow 0.15s;
    }

    .multifamily-current-value-input:focus {
      outline: none;
      border-color: var(--accent, #c8102e);
      box-shadow: 0 0 0 3px var(--accent-dim, rgba(200, 16, 46, 0.10));
    }

    .multifamily-current-value-reset {
      border: 1px solid #cbd5e1;
      border-radius: 10px;
      background: #f8fafc;
      color: #334155;
      font-size: 11px;
      font-weight: 700;
      touch-action: manipulation;
      -webkit-tap-highlight-color: transparent;
      text-transform: uppercase;
      letter-spacing: 0.4px;
      padding: 11px 14px;
      cursor: pointer;
      transition: background 0.15s, border-color 0.15s;
    }

    .multifamily-current-value-reset:hover {
      background: #f1f5f9;
      border-color: #94a3b8;
    }

    .multifamily-current-value-hint {
      margin: 0 0 20px;
      font-size: 13px;
      font-weight: 700;
      color: #334155;
      line-height: 1.45;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .multifamily-finance-kpis {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 0;
      margin-bottom: 22px;
      background: linear-gradient(135deg, #c8102e 0%, #a00d24 100%);
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 4px 16px rgba(200, 16, 46, 0.18);
    }

    .multifamily-finance-kpi {
      padding: 18px 12px;
      text-align: center;
      border-right: 1px solid rgba(255, 255, 255, 0.15);
      border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    }

    .multifamily-finance-kpi:nth-child(3n) {
      border-right: none;
    }

    .multifamily-finance-kpi:nth-last-child(-n+3) {
      border-bottom: none;
    }

    .multifamily-finance-kpi-label {
      font-size: 9.5px;
      color: rgba(255, 255, 255, 0.72);
      text-transform: uppercase;
      letter-spacing: 0.5px;
      margin-bottom: 7px;
      font-weight: 600;
    }

    .multifamily-finance-kpi-value {
      font-family: 'Sora', sans-serif;
      font-size: 20px;
      line-height: 1.15;
      font-weight: 800;
      color: #ffffff;
    }

    .multifamily-finance-kpi-value.positive {
      color: #86efac;
    }

    .multifamily-finance-kpi-value.warning {
      color: #fcd34d;
    }

    .multifamily-finance-kpi-value.units {
      color: #bfdbfe;
    }

    .multifamily-finance-kpi-value.highlight {
      color: #86efac;
    }

    .multifamily-finance-kpi-value.bad {
      color: #fecaca;
    }

    .multifamily-finance-kpi-value.status-text {
      font-size: 14px;
      letter-spacing: 0.02em;
    }

    .multifamily-section-title {
      margin: 24px 0 14px;
      padding-left: 10px;
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: #0f172a;
      font-weight: 700;
      border-left: 3px solid var(--accent, #c8102e);
    }

    .multifamily-preset-toolbar {
      border: 1px solid #e2e8f0;
      border-radius: 10px;
      background: #f8fafc;
      padding: 14px;
      margin: 0 0 18px;
    }

    .multifamily-preset-label {
      display: block;
      font-size: 10px;
      text-transform: uppercase;
      letter-spacing: 0.45px;
      color: #64748b;
      margin-bottom: 7px;
      font-weight: 700;
    }

    .multifamily-preset-buttons {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-bottom: 10px;
    }

    .multifamily-preset-btn {
      border: 1px solid #cbd5e1;
      background: #ffffff;
      color: #334155;
      touch-action: manipulation;
      -webkit-tap-highlight-color: transparent;
      padding: 8px 12px;
      border-radius: 8px;
      font-size: 11px;
      font-weight: 700;
      cursor: pointer;
      font-family: inherit;
      transition: border-color 0.12s ease, color 0.12s ease, background 0.12s ease;
    }

    .multifamily-preset-btn:hover {
      border-color: #94a3b8;
      background: #f8fafc;
    }

    .multifamily-preset-btn.active {
      border-color: #c8102e;
      color: #ffffff;
      background: linear-gradient(135deg, #c8102e 0%, #a00d24 100%);
    }

    .multifamily-preset-status {
      margin: 0 0 4px;
      font-size: 11px;
      color: #64748b;
      line-height: 1.4;
    }

    .multifamily-source-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px;
      margin-top: 12px;
      margin-bottom: 14px;
    }

    .multifamily-source-item {
      border: 1px solid #dbe5f1;
      border-radius: 8px;
      background: #f8fafc;
      padding: 10px 10px;
      display: grid;
      gap: 5px;
    }

    .multifamily-source-item-label {
      font-size: 10px;
      color: #64748b;
      text-transform: uppercase;
      letter-spacing: 0.4px;
      font-weight: 700;
      line-height: 1.15;
    }

    .multifamily-source-item-value {
      font-size: 11px;
      color: #0f172a;
      font-weight: 600;
      line-height: 1.25;
    }

    .multifamily-driver-summary {
      margin: 0 0 16px;
      font-size: 11px;
      line-height: 1.45;
      color: #334155;
      padding: 12px 14px;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      background: #f8fafc;
    }

    .multifamily-assumptions-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 12px;
      margin-bottom: 18px;
    }

    .multifamily-assumption-item {
      display: grid;
      gap: 7px;
      justify-items: start;
      text-align: left;
    }

    .multifamily-assumption-label {
      font-size: 10px;
      color: #64748b;
      text-transform: uppercase;
      letter-spacing: 0.4px;
      font-weight: 700;
      text-align: left;
    }

    .multifamily-assumption-input {
      border: 1px solid #dbe5f1;
      border-radius: 8px;
      padding: 10px 12px;
      font-size: 12.5px;
      color: #0f172a;
      font-weight: 600;
      background: #ffffff;
      transition: border-color 0.15s, box-shadow 0.15s;
    }

    .multifamily-assumption-input:focus {
      outline: none;
      border-color: var(--accent, #c8102e);
      box-shadow: 0 0 0 3px var(--accent-dim, rgba(200, 16, 46, 0.10));
    }

    .multifamily-advanced-toggle {
      display: flex;
      align-items: center;
      gap: 8px;
      width: 100%;
      padding: 12px 16px;
      touch-action: manipulation;
      -webkit-tap-highlight-color: transparent;
      margin-bottom: 16px;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 10px;
      color: #475569;
      font-size: 12px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.15s ease;
      font-family: inherit;
    }

    .multifamily-advanced-toggle:hover {
      background: #f1f5f9;
      border-color: #cbd5e1;
      color: #334155;
    }

    .multifamily-advanced-toggle .toggle-chevron {
      transition: transform 0.2s ease;
      font-size: 14px;
      line-height: 1;
    }

    .multifamily-advanced-toggle.expanded .toggle-chevron {
      transform: rotate(90deg);
    }

    .multifamily-mini-table {
      width: 100%;
      border-collapse: collapse;
      border: 1px solid #e2e8f0;
      border-radius: 10px;
      overflow: hidden;
      background: #ffffff;
      margin-bottom: 12px;
    }

    .multifamily-mini-table th,
    .multifamily-mini-table td {
      padding: 8px 10px;
      border-bottom: 1px solid #e2e8f0;
      font-size: 12px;
      line-height: 1.4;
      color: #334155;
      text-align: left;
      vertical-align: top;
    }

    .multifamily-mini-table th {
      background: #f8fafc;
      font-size: 10px;
      text-transform: uppercase;
      letter-spacing: 0.45px;
      color: #64748b;
      font-weight: 700;
    }

    .multifamily-mini-table tbody tr:nth-child(even) {
      background: #fafbfc;
    }

    .multifamily-mini-table td:last-child {
      font-weight: 700;
      color: #0f172a;
      white-space: nowrap;
    }

    .multifamily-mini-table tr:last-child td {
      border-bottom: none;
    }

    .multifamily-mini-table td.val-positive {
      color: #16a34a;
    }

    .multifamily-mini-table td.val-negative {
      color: #dc2626;
    }

    .multifamily-sensitivity-grid {
      width: 100%;
      border-collapse: collapse;
      border: 1px solid #e2e8f0;
      border-radius: 10px;
      overflow: hidden;
      background: #ffffff;
      margin-bottom: 12px;
    }

    .multifamily-sensitivity-grid th,
    .multifamily-sensitivity-grid td {
      padding: 10px 8px;
      border-bottom: 1px solid #e2e8f0;
      border-right: 1px solid #e2e8f0;
      text-align: center;
      vertical-align: middle;
      font-size: 11.5px;
      color: #334155;
    }

    .multifamily-sensitivity-grid th:last-child,
    .multifamily-sensitivity-grid td:last-child {
      border-right: none;
    }

    .multifamily-sensitivity-grid tr:last-child td {
      border-bottom: none;
    }

    .multifamily-sensitivity-grid th {
      background: #f8fafc;
      font-size: 10px;
      text-transform: uppercase;
      letter-spacing: 0.45px;
      color: #64748b;
      font-weight: 700;
    }

    .multifamily-sensitivity-grid td.sens-good {
      background: rgba(34, 197, 94, 0.08);
    }

    .multifamily-sensitivity-grid td.sens-warn {
      background: rgba(245, 158, 11, 0.08);
    }

    .multifamily-sensitivity-grid td.sens-bad {
      background: rgba(220, 38, 38, 0.06);
    }

    .multifamily-sens-profit {
      display: block;
      font-weight: 700;
      color: #0f172a;
    }

    .multifamily-sens-dscr {
      display: block;
      font-size: 10px;
      color: #64748b;
      margin-top: 2px;
    }

    .multifamily-stress-strip {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 8px;
      margin: 0 0 12px;
    }

    .multifamily-stress-item {
      border: 1px solid #dbe5f1;
      border-radius: 10px;
      background: #f8fafc;
      padding: 8px 10px;
      display: grid;
      gap: 3px;
    }

    .multifamily-stress-label {
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.45px;
      text-transform: uppercase;
      color: #64748b;
    }

    .multifamily-stress-value {
      font-family: 'Sora', sans-serif;
      font-size: 16px;
      font-weight: 700;
      color: #0f172a;
    }

    .multifamily-finance-benefits {
      margin: 0;
      padding-left: 18px;
      display: grid;
      gap: 6px;
      color: #1e293b;
      font-size: 12.5px;
      line-height: 1.45;
      text-align: left;
      direction: ltr;
      list-style-position: outside;
      justify-items: start;
    }

    .multifamily-finance-benefits li {
      text-align: left;
    }

    .multifamily-finance-note {
      margin: 10px 0 0;
      font-size: 11px;
      color: #94a3b8;
      line-height: 1.45;
    }

    .multifamily-cta-banner {
      position: absolute;
      left: 14px;
      right: 14px;
      bottom: 14px;
      z-index: 3;
      margin: 0;
      padding: 0;
      background: transparent;
      border: 0;
      border-radius: 0;
      text-align: center;
      pointer-events: none;
    }

    #multifamilyView .multifamily-cta-banner {
      left: 14px;
      right: 14px;
      bottom: 14px;
    }

    .multifamily-cta-text {
      margin: 0 0 12px;
      font-size: 14px;
      font-weight: 600;
      color: #111827;
      text-shadow: 0 1px 2px rgba(255, 255, 255, 0.75);
      line-height: 1.45;
    }

    .multifamily-cta-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 11px 24px;
      background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
      color: #ffffff;
      font-size: 13px;
      font-weight: 700;
      border: none;
      border-radius: 0;
      cursor: pointer;
      transition: transform 0.12s, box-shadow 0.15s;
      font-family: inherit;
      letter-spacing: 0.01em;
      pointer-events: auto;
    }

    .multifamily-cta-btn:hover {
      transform: translateY(-1px);
      box-shadow: 0 4px 14px rgba(22, 163, 74, 0.32);
    }

    /* Nurture glow for Generate Permit Plan buttons */
    body.cta-nurture-permit-plan .multifamily-cta-btn,
    body.cta-nurture-permit-plan .options-generate-permit-btn,
    body.cta-nurture-permit-plan #readyToBuildBtn,
    body.cta-nurture-permit-plan .ottawa-project-cta-btn.cta-siteplan {
      animation: nurtureGlowPermitPlan 2s ease-in-out infinite;
    }
    @keyframes nurtureGlowPermitPlan {
      0%, 100% { box-shadow: 0 4px 14px rgba(22, 163, 74, 0.32); transform: scale(1); }
      50% { box-shadow: 0 0 20px rgba(22, 163, 74, 0.6), 0 0 40px rgba(22, 163, 74, 0.25); transform: scale(1.03); }
    }
    
    /* Setbacks Grid */
    .setbacks-panel {
      margin-bottom: 18px;
    }
    
    .setbacks-visual {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 8px;
    }
    
    .setback-box {
      background: transparent;
      border: none;
      border-radius: 0;
      padding: 4px 0;
      text-align: center;
    }
    
    .setback-box-label {
      font-size: 10px;
      color: #64748b;
      text-transform: uppercase;
      letter-spacing: 0.3px;
      margin-bottom: 4px;
    }
    
    .setback-box-value {
      font-size: 16px;
      font-weight: 700;
      color: #3b82f6;
    }
    
    /* Building Requirements */
    .requirements-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 10px;
      margin-bottom: 18px;
    }
    
    .requirement-item {
      display: flex;
      align-items: center;
      gap: 10px;
      background: transparent;
      border-radius: 0;
      padding: 0;
    }
    
    .requirement-icon {
      width: 18px;
      height: 18px;
      border-radius: 0;
      background: transparent;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }
    
    .requirement-icon svg {
      width: 14px;
      height: 14px;
      color: #64748b;
    }
    
    .requirement-content {
      flex: 1;
      min-width: 0;
    }
    
    .requirement-label {
      font-size: 11px;
      color: #64748b;
    }
    
    .requirement-value {
      font-size: 15px;
      font-weight: 600;
      color: #1a1a2e;
    }
    
    .zoning-eligibility {
      padding-top: 16px;
      border-top: 1px solid #e2e8f0;
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }
    
    .eligibility-tag {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 12px;
      padding: 8px 12px;
      border-radius: 20px;
      background: rgba(34, 197, 94, 0.12);
      color: #22c55e;
      border: 1px solid rgba(34, 197, 94, 0.25);
      font-weight: 500;
    }
    
    .eligibility-tag.not-eligible {
      background: rgba(239, 68, 68, 0.12);
      color: #ef4444;
      border-color: rgba(239, 68, 68, 0.25);
    }
    
    .eligibility-tag.info {
      background: rgba(59, 130, 246, 0.12);
      color: #60a5fa;
      border-color: rgba(59, 130, 246, 0.25);
    }
    
    .eligibility-tag svg {
      width: 14px;
      height: 14px;
    }

    @media (max-width: 500px) {
      .zoning-stats {
        grid-template-columns: repeat(2, 1fr);
      }

      .multifamily-finance-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .multifamily-finance-kpi {
        padding: 14px 9px;
      }

      .multifamily-finance-kpi-label {
        font-size: 8.5px;
      }

      .multifamily-finance-kpi-value {
        font-size: 16px;
      }

      .multifamily-assumptions-grid {
        grid-template-columns: repeat(2, 1fr);
      }

      .multifamily-source-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .multifamily-conversion-tabs {
        grid-template-columns: repeat(2, 1fr);
      }

      .multifamily-conversion-tab.standard-tab:nth-child(2) {
        border-right: none;
      }

      .multifamily-conversion-tab.standard-tab:nth-child(1),
      .multifamily-conversion-tab.standard-tab:nth-child(2) {
        border-bottom: 1px solid #dbe5f1;
      }

      .multifamily-conversion-tab.max-units-tab {
        grid-column: 1 / -1;
      }

      .multifamily-simple-grid {
        grid-template-columns: 1fr;
      }

      .multifamily-simple-item {
        border-right: none;
      }

      .multifamily-simple-item:nth-last-child(-n+2) {
        border-bottom: 1px solid #e2e8f0;
      }

      .multifamily-simple-item:last-child {
        border-bottom: none;
      }

      .multifamily-simple-sources-grid {
        grid-template-columns: 1fr;
      }

      .multifamily-simple-sources-item {
        border-right: none;
      }

      .multifamily-simple-sources-item:nth-last-child(-n+2) {
        border-bottom: 1px solid #e2e8f0;
      }

      .multifamily-simple-sources-item:last-child {
        border-bottom: none;
      }

      .multifamily-stress-strip {
        grid-template-columns: 1fr;
      }

      .zoning-square-grid {
        grid-template-columns: 1fr;
      }

      .setbacks-visual {
        grid-template-columns: repeat(2, 1fr);
      }

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

      .multifamily-sensitivity-grid th,
      .multifamily-sensitivity-grid td {
        padding: 7px 5px;
        font-size: 10px;
      }

      .multifamily-sensitivity-grid th {
        font-size: 8.5px;
      }

      .multifamily-preset-buttons {
        gap: 5px;
      }

      .multifamily-preset-btn {
        padding: 6px 8px;
        font-size: 10px;
      }

      .multifamily-email-summary-btn {
        width: 100%;
        min-height: 40px;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .multifamily-email-summary-row {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
      }

      .multifamily-email-summary-row .multifamily-preset-buttons {
        width: 100%;
        margin-right: 0;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }

      .multifamily-email-summary-row .multifamily-preset-btn {
        font-size: 10px;
        padding: 7px 6px;
        min-height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
      }

      .multifamily-current-value-controls {
        grid-template-columns: 1fr;
      }

      .multifamily-current-value-reset {
        width: 100%;
        min-height: 40px;
      }

      .multifamily-conversion-tab,
      .multifamily-mode-btn {
        min-height: 40px;
      }

      .multifamily-cta-banner {
        left: 10px;
        right: 10px;
        bottom: 10px;
        padding: 0;
      }

      .options-envelope-cta {
        bottom: 20px;
      }

      .multifamily-cta-text {
        font-size: 13px;
      }

      .czp-card {
        padding: 12px 14px;
        border-radius: 10px;
        margin-bottom: 10px;
      }

      .czp-zone-header {
        flex-direction: column;
        gap: 10px;
      }

      .czp-lot-stats {
        grid-template-columns: repeat(3, 1fr);
        gap: 6px;
      }

      .czp-limits-stats {
        grid-template-columns: repeat(2, 1fr);
        gap: 6px;
      }

      .czp-setbacks-strip .setbacks-visual {
        grid-template-columns: repeat(2, 1fr);
      }

      .czp-perm-tag {
        font-size: 11px;
        padding: 3px 8px;
      }

      .qualified-projects-intro {
        font-size: 12px;
      }

      .qualified-projects-list {
        font-size: 12px;
      }

      .qualified-projects-list .project-card {
        max-width: 100%;
        overflow: hidden;
      }

      .qualified-projects-list .project-card-title {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }

    @media (max-width: 400px) {
      .zoning-stats {
        grid-template-columns: 1fr;
      }

      .zoning-header {
        flex-wrap: wrap;
      }

      .multifamily-finance-kpis {
        grid-template-columns: repeat(2, 1fr);
      }

      .multifamily-finance-kpi-label {
        font-size: 8px;
        letter-spacing: 0.3px;
      }

      .multifamily-finance-kpi-value {
        font-size: 14px;
      }

      .czp-lot-stats,
      .czp-limits-stats {
        grid-template-columns: repeat(2, 1fr);
      }

      .czp-setbacks-strip .setbacks-visual {
        grid-template-columns: 1fr 1fr;
        gap: 6px;
      }

      .multifamily-assumptions-grid {
        grid-template-columns: 1fr;
      }

      .multifamily-source-grid {
        grid-template-columns: 1fr;
      }

    }

    /* Chat CTA - shown on form page */
    .chat-cta {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      margin-top: 4px;
      margin-bottom: 4px;
      padding: 8px;
      cursor: pointer;
      transition: transform 0.2s ease, opacity 0.2s ease;
    }
    
    .chat-cta:hover {
      transform: scale(1.02);
    }
    
    .chat-cta:active {
      transform: scale(0.98);
    }
    
    .chat-cta .chat-cta-arrow {
      animation: bounce 2s ease-in-out infinite;
    }
    
    .chat-cta-text {
      font-size: 13px;
      color: var(--chat-text-secondary);
      text-align: center;
    }
    
    .chat-cta-arrow {
      width: 24px;
      height: 24px;
      color: var(--accent-red);
    }
    
    @keyframes bounce {
      0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
      }
      40% {
        transform: translateY(-8px);
      }
      60% {
        transform: translateY(-4px);
      }
    }
    
    .chat-cta.hidden {
      display: none;
    }

    /* Message bubbles */
    .message {
      display: flex;
      gap: 12px;
    }

    .message.user {
      justify-content: flex-end;
    }
    
    .message.user .message-content {
      max-width: 80%;
    }

    .message-avatar {
      display: none;
    }

    .message-content {
      max-width: 100%;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .message-text {
      padding: 12px 16px;
      border-radius: 16px;
      font-size: 14px;
      line-height: 1.6;
    }

    .message.assistant .message-text {
      background: transparent;
      padding: 8px 0;
      color: var(--chat-text);
    }

    .message.user .message-text {
      background: var(--accent);
      color: white;
      border-bottom-right-radius: 4px;
    }

    .message-text p {
      margin: 0 0 8px 0;
    }
    .message-text p:last-child {
      margin-bottom: 0;
    }
    .message-text strong {
      font-weight: 600;
      color: inherit;
    }
    .message-text em {
      font-style: italic;
    }
    .message-text ul {
      margin: 8px 0;
      padding-left: 20px;
    }
    .message-text li {
      margin: 4px 0;
    }

    /* Chat CTA Button */
    .chat-cta-btn {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin-top: 16px;
      padding: 12px 24px;
      background: linear-gradient(135deg, #c8102e 0%, #a00d24 100%);
      color: white;
      border: none;
      border-radius: 8px;
      font-size: 14px;
      font-weight: 600;
      text-decoration: none;
      cursor: pointer;
      transition: all 0.2s ease;
      box-shadow: 0 4px 12px rgba(200, 16, 46, 0.3);
    }

    .chat-cta-btn:hover {
      background: linear-gradient(135deg, #e01235 0%, #c8102e 100%);
      transform: translateY(-2px);
      box-shadow: 0 6px 16px rgba(200, 16, 46, 0.4);
    }

    .chat-cta-btn svg {
      width: 18px;
      height: 18px;
    }

    .chat-cta-btn svg.spin {
      animation: spin 1s linear infinite;
    }

    @keyframes spin {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }

    .chat-cta-btn:disabled {
      opacity: 0.7;
      cursor: wait;
    }

    /* CTA button group (primary + secondary side by side) */
    .chat-cta-group {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 16px;
    }

    .chat-cta-group .chat-cta-btn {
      margin-top: 0;
    }

    /* Secondary CTA button (outline style) */
    .chat-cta-btn.secondary {
      background: transparent;
      color: var(--accent-red, #c8102e);
      border: 1.5px solid var(--accent-red, #c8102e);
      box-shadow: none;
    }

    .chat-cta-btn.secondary:hover {
      background: rgba(200, 16, 46, 0.08);
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(200, 16, 46, 0.15);
    }

    /* Ottawa floating bubble conversion funnel */
    .ottawa-bubble-launcher {
      position: fixed;
      right: 20px;
      bottom: 18px;
      bottom: max(18px, calc(env(safe-area-inset-bottom, 0px) + 18px));
      z-index: 9999;
      display: none;
      align-items: center;
      justify-content: center;
      width: 44px;
      height: 44px;
      border: 1px solid rgba(148, 163, 184, 0.5);
      border-radius: 50%;
      padding: 0;
      background: rgba(100, 116, 139, 0.45);
      color: #0f172a;
      cursor: pointer;
      box-shadow: 0 4px 12px rgba(15, 23, 42, 0.2);
      transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
    }

    .ottawa-bubble-launcher.visible {
      display: flex;
    }

    /* When CTA footer is visible, float chat launcher above it */
    body.cta-overlay-visible .ottawa-bubble-launcher {
      bottom: calc(70px + env(safe-area-inset-bottom, 0px) + 18px);
    }

    body.cta-overlay-visible .ottawa-bubble-panel {
      bottom: calc(70px + 44px + env(safe-area-inset-bottom, 0px) + 16px);
    }

    .ottawa-bubble-launcher:hover {
      transform: translateY(-1px);
      background: rgba(100, 116, 139, 0.6);
      border-color: rgba(148, 163, 184, 0.65);
    }

    .ottawa-bubble-launcher-icon {
      width: 22px;
      height: 22px;
    }

    .ottawa-bubble-panel {
      position: fixed;
      right: 20px;
      left: 20px;
      bottom: 74px;
      width: auto;
      max-width: 368px;
      margin-left: auto;
      max-height: min(68vh, 560px);
      z-index: 10000;
      display: none;
      border-radius: 16px;
      border: 1px solid rgba(12, 18, 30, 0.12);
      background: #fff;
      box-shadow: 0 16px 42px rgba(12, 18, 30, 0.28);
      overflow: hidden;
    }

    .ottawa-bubble-panel.open {
      display: block;
    }

    .ottawa-bubble-panel-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 12px 14px;
      background: #111827;
      color: #fff;
    }

    .ottawa-bubble-panel-title {
      font-size: 13px;
      font-weight: 600;
    }

    .ottawa-bubble-close {
      border: none;
      background: transparent;
      color: rgba(255, 255, 255, 0.84);
      font-size: 20px;
      line-height: 1;
      cursor: pointer;
      padding: 0 4px;
    }

    .ottawa-bubble-panel-body {
      padding: 14px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
    }

    .ottawa-bubble-chatlog {
      background: #fff;
      border: 1px solid rgba(148, 163, 184, 0.32);
      border-radius: 14px;
      padding: 10px;
      display: grid;
      gap: 8px;
      max-height: 240px;
      overflow-y: auto;
    }

    .ottawa-bubble-chat-msg {
      border-radius: 10px;
      padding: 8px 10px;
      font-size: 12px;
      line-height: 1.45;
      white-space: pre-line;
    }

    .ottawa-bubble-chat-msg.assistant {
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      color: #0f172a;
    }

    .ottawa-bubble-chat-msg.user {
      background: rgba(200, 16, 46, 0.08);
      border: 1px solid rgba(200, 16, 46, 0.22);
      color: #7f1d1d;
      justify-self: end;
      max-width: 92%;
    }

    .ottawa-bubble-chat-composer {
      display: flex;
      gap: 8px;
      align-items: flex-end;
    }

    .ottawa-bubble-chat-input {
      flex: 1;
      min-height: 42px;
      max-height: 100px;
      resize: vertical;
      border: 1px solid #cbd5e1;
      border-radius: 10px;
      padding: 9px 10px;
      font-size: 12px;
      font-family: inherit;
      line-height: 1.35;
      color: #0f172a;
      background: #fff;
    }

    .ottawa-bubble-chat-send {
      border: none;
      border-radius: 10px;
      min-width: 74px;
      height: 42px;
      padding: 0 12px;
      font-size: 12px;
      font-weight: 700;
      color: #fff;
      background: linear-gradient(135deg, #c8102e 0%, #a00d24 100%);
      cursor: pointer;
    }

    .ottawa-bubble-chat-send:disabled {
      opacity: 0.55;
      cursor: default;
    }

    @media (max-width: 768px) {
      .mobile-embed-expand-gate.is-ready {
        display: flex;
      }

      .mobile-embed-fullscreen-shell {
        padding: max(8px, env(safe-area-inset-top, 8px)) 8px max(8px, env(safe-area-inset-bottom, 8px));
      }

      .mobile-embed-fullscreen-panel {
        border-radius: 18px;
      }

      .mobile-embed-fullscreen-header {
        padding: 14px 14px 10px;
      }

      .mobile-embed-expanded-target {
        border-radius: 18px;
      }

      .mobile-embed-fullscreen-chrome {
        padding: 14px 14px 10px;
      }

      .ottawa-project-cta-overlay {
        padding: 10px 12px;
        padding-bottom: max(10px, env(safe-area-inset-bottom, 10px));
      }

      .ottawa-project-cta-content.cta-guide-inline {
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
      }

      .ottawa-project-cta-content.cta-guide-inline .ottawa-project-cta-guide {
        text-align: center;
        flex: 0 0 auto;
        width: auto;
        max-width: 100%;
      }

      .ottawa-project-cta-btn {
        padding: 11px 18px;
        font-size: 13px;
        min-width: unset;
        min-height: 44px;
      }

      .ottawa-project-cta-back-btn {
        padding: 11px 14px;
        font-size: 13px;
        min-height: 44px;
      }

      .czp-datasheet .ds-toggle {
        padding: 11px 16px 11px 14px;
        font-size: 12px;
        min-height: 44px;
      }

      .czp-email-report-btn {
        min-height: 44px;
      }

      .ottawa-project-cta-guide {
        padding: 7px 12px;
        font-size: 11px;
      }

      .ottawa-project-cta-buttons {
        width: auto;
        flex: 0 0 auto;
      }

      .ottawa-project-cta-content.cta-guide-inline .ottawa-project-cta-btn,
      .ottawa-project-cta-buttons .ottawa-project-cta-btn {
        flex: 0 0 auto;
        width: auto;
        min-width: unset;
      }

      .ottawa-bubble-launcher {
        right: 12px;
        bottom: 17px;
        bottom: max(17px, calc(env(safe-area-inset-bottom, 0px) + 17px));
      }

      body.cta-overlay-visible .ottawa-bubble-launcher {
        bottom: calc(70px + env(safe-area-inset-bottom, 0px) + 18px);
      }

      body.cta-overlay-visible .ottawa-bubble-panel {
        bottom: calc(70px + 44px + env(safe-area-inset-bottom, 0px) + 16px);
      }

      .ottawa-bubble-panel {
        right: 12px;
        left: 12px;
        bottom: 64px;
        width: auto;
        max-width: 360px;
        max-height: 64vh;
      }
    }

    /* Map embed */
    .message-map-window {
      width: 100%;
      max-width: 500px;
      border-radius: 12px;
      overflow: hidden;
      border: 1px solid var(--chat-border);
      background: var(--chat-bg-secondary);
      position: relative;
    }

    .map-window-header {
      padding: 10px 14px;
      background: var(--chat-bg-tertiary);
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid var(--chat-border);
    }

    .map-window-address {
      font-weight: 600;
      font-size: 13px;
      color: var(--chat-text);
    }

    .map-window-zone {
      font-size: 11px;
      background: var(--accent);
      padding: 3px 8px;
      border-radius: 4px;
      color: white;
      font-weight: 500;
    }

    .map-window-iframe {
      width: 100%;
      height: 350px;
      border: none;
      display: block;
    }

    .map-window-footer {
      padding: 10px 14px;
      background: var(--chat-bg-tertiary);
      border-top: 1px solid var(--chat-border);
      display: flex;
      justify-content: flex-end;
    }

    .map-window-expand {
      padding: 8px 14px;
      background: var(--accent);
      border: none;
      border-radius: 6px;
      color: white;
      font-size: 12px;
      font-weight: 500;
      cursor: pointer;
      transition: background 0.15s;
    }

    .map-window-expand:hover {
      background: var(--accent-hover);
    }

    /* Typing indicator */
    .typing-indicator {
      display: flex;
      gap: 4px;
      padding: 12px 16px;
      background: var(--chat-bg-secondary);
      border-radius: 16px;
      border-bottom-left-radius: 4px;
      width: fit-content;
    }

    .typing-indicator span {
      width: 8px;
      height: 8px;
      background: var(--chat-text-muted);
      border-radius: 50%;
      animation: typing 1.4s infinite;
    }

    .typing-indicator span:nth-child(2) { animation-delay: 0.2s; }
    .typing-indicator span:nth-child(3) { animation-delay: 0.4s; }

    @keyframes typing {
      0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
      30% { transform: translateY(-4px); opacity: 1; }
    }

    /* Input area, always visible above the map */
    .chat-input-area {
      flex-shrink: 0;
      padding: 16px;
      position: relative;
      z-index: 300; /* Above footer-map-container (250) */
      transition: opacity 0.25s ease, filter 0.25s ease;
    }
    
    /* Blur/fade effect at top of input area - blends into chat above */
    .chat-input-area::before {
      content: '';
      position: absolute;
      top: -40px;
      left: 0;
      right: 0;
      height: 40px;
      background: linear-gradient(to bottom, transparent 0%, var(--chat-bg) 100%);
      pointer-events: none;
      z-index: 1;
    }


    .chat-input-area.loading {
      opacity: 0.6;
      pointer-events: none;
    }

    /* Applied while full chat loader is visible so the bottom frame matches blur state */
    .chat-input-area.loading-blurred {
      opacity: 0.6;
      filter: blur(4px);
      pointer-events: none;
    }

    .chat-input-area.loading .chat-input {
      background: var(--chat-bg-secondary);
      cursor: not-allowed;
    }

    .input-container {
      max-width: 100%;
      margin: 0;
    }

    .address-input-row {
      margin-bottom: 8px;
      display: flex;
      gap: 8px;
      align-items: center;
      position: relative;
    }

    .address-suggestions {
      display: none;
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      z-index: 1000;
      background: var(--chat-bg);
      border: 1px solid var(--chat-border);
      border-radius: 0 0 12px 12px;
      max-height: 220px;
      overflow-y: auto;
      box-shadow: 0 4px 12px rgba(0,0,0,0.15);
      margin-top: -2px;
    }

    .address-suggestion-item {
      padding: 10px 16px;
      cursor: pointer;
      font-size: 14px;
      border-bottom: 1px solid var(--chat-border);
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 8px;
    }

    .address-suggestion-item:last-child {
      border-bottom: none;
    }

    .address-suggestion-item:hover,
    .address-suggestion-item.highlighted {
      background: var(--chat-bg-secondary);
    }

    .address-suggestion-text {
      flex: 1;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .address-suggestion-city {
      font-size: 11px;
      color: var(--chat-text-muted);
      text-transform: capitalize;
      flex-shrink: 0;
      background: var(--chat-bg-tertiary);
      padding: 2px 6px;
      border-radius: 4px;
    }

    /* Google Places Autocomplete styling */
    .pac-container {
      background: #fff !important;
      border: 1.5px solid #cbd5e1 !important;
      border-top: 2.5px solid #e11d48 !important;
      border-radius: 0 0 14px 14px !important;
      box-shadow: 0 8px 24px rgba(0,0,0,0.12), 0 2px 6px rgba(0,0,0,0.06) !important;
      font-family: 'Source Sans 3', 'Source Sans Pro', system-ui, sans-serif !important;
      margin-top: -2px !important;
      z-index: 10000 !important;
      padding: 4px 0 !important;
    }

    .pac-item {
      padding: 12px 18px !important;
      border-top: 1px solid #f1f5f9 !important;
      color: #1e293b !important;
      font-size: 15px !important;
      cursor: pointer !important;
      line-height: 1.45 !important;
      transition: background 0.12s ease !important;
    }

    .pac-item:first-child {
      border-top: none !important;
    }

    .pac-item:hover,
    .pac-item-selected {
      background: #f8fafc !important;
    }

    .pac-item-query {
      color: #0f172a !important;
      font-size: 15px !important;
    }

    .pac-matched {
      font-weight: 700 !important;
      color: #0f172a !important;
    }

    .pac-icon {
      display: none !important;
    }

    .pac-logo::after {
      display: none !important;
    }

    /* Address field resolving state */
    .form-input.addr-resolving {
      opacity: 0.7;
      pointer-events: none;
    }

    .address-input {
      flex: 1;
      padding: 12px 16px;
      background: var(--chat-bg-secondary);
      border: 1px solid var(--chat-border);
      border-radius: 12px;
      font-size: 14px;
      color: var(--chat-text);
      font-family: inherit;
    }

    .address-input::placeholder {
      color: var(--chat-text-muted);
    }

    .address-input:focus {
      outline: none;
      border-color: var(--accent);
    }

    .address-search-btn {
      width: 44px;
      height: 44px;
      background: var(--accent);
      border: none;
      border-radius: 12px;
      color: white;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.15s, transform 0.1s;
      flex-shrink: 0;
    }

    .address-search-btn:hover {
      background: var(--accent-hover);
    }

    .address-search-btn:active {
      transform: scale(0.95);
    }

    .address-search-btn:disabled {
      background: var(--chat-bg-tertiary);
      cursor: not-allowed;
    }

    .address-search-btn svg {
      width: 20px;
      height: 20px;
    }

    .address-status {
      font-size: 12px;
      margin-top: 6px;
      transition: all 0.2s ease;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
    }

    .address-status:empty {
      display: none;
    }

    .address-status.checking {
      color: var(--text-muted);
    }

    .address-status.found {
      color: #22c55e;
    }

    .address-status.error {
      color: #ef4444;
    }

    /* Full-screen Address Loading Overlay (skeleton) */
    .address-loading-overlay {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(255, 255, 255, 0.96);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      display: none;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      padding-top: 80px;
      overflow-y: auto;
      z-index: 10010;
    }

    .address-loading-overlay.visible {
      display: flex;
      pointer-events: auto;
    }

    @keyframes trace-leaf-full {
      0% {
        stroke-dashoffset: 1;
        opacity: 0.4;
      }
      50% {
        stroke-dashoffset: 0;
        opacity: 1;
      }
      100% {
        stroke-dashoffset: -1;
        opacity: 0.4;
      }
    }

    @keyframes pulse-loader-text {
      0%, 100% { opacity: 0.6; }
      50% { opacity: 1; }
    }

    /* ===== SKELETON LOADING (inside address overlay) ===== */
    @keyframes skeleton-shimmer {
      0% { background-position: -200% 0; }
      100% { background-position: 200% 0; }
    }

    .skeleton-block {
      background: linear-gradient(90deg, #e2e8f0 25%, #f1f5f9 50%, #e2e8f0 75%);
      background-size: 200% 100%;
      animation: skeleton-shimmer 1.5s ease-in-out infinite;
      border-radius: 6px;
    }

    .skeleton-results {
      width: 100%;
      max-width: min(100% - 32px, 600px);
      padding: 24px 0;
      display: flex;
      flex-direction: column;
      gap: 14px;
    }

    .skeleton-zone-header {
      display: flex;
      align-items: center;
      gap: 16px;
      padding: 0;
      margin-bottom: 2px;
    }
    .skeleton-zone-badge { width: 80px; height: 44px; border-radius: 8px; }
    .skeleton-zone-details { flex: 1; display: flex; flex-direction: column; gap: 8px; }
    .skeleton-zone-name { width: 55%; height: 18px; }
    .skeleton-zone-meaning { width: 80%; height: 14px; }
    .skeleton-intro { width: 100%; height: 14px; border-radius: 4px; }

    .skeleton-card {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 14px;
      padding: 22px 24px;
    }
    .skeleton-card-label { width: 90px; height: 11px; margin-bottom: 16px; }
    .skeleton-stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 16px; }
    .skeleton-stat { display: flex; flex-direction: column; gap: 8px; }
    .skeleton-stat-label { width: 75%; height: 11px; }
    .skeleton-stat-value { width: 55%; height: 22px; }

    .skeleton-setbacks { margin-top: 18px; padding-top: 18px; border-top: 1px solid #f1f5f9; }
    .skeleton-setbacks-label { width: 130px; height: 11px; margin-bottom: 12px; }
    .skeleton-setbacks-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
    .skeleton-setback-box { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 6px; background: #f8fafc; border-radius: 8px; }
    .skeleton-setback-label { width: 36px; height: 10px; }
    .skeleton-setback-value { width: 28px; height: 16px; }

    .skeleton-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
    .skeleton-tag { width: 100px; height: 36px; border-radius: 20px; }
    .skeleton-tag:nth-child(2) { width: 125px; }
    .skeleton-tag:nth-child(3) { width: 85px; }
    .skeleton-tag:nth-child(4) { width: 115px; }

    /* ===== CHAT LOADING OVERLAY ===== */
    /* Blurred overlay with maple leaf that sits over .chat-messages */
    .chat-loading-overlay {
      position: fixed;
      inset: 0;
      background: rgba(255, 255, 255, 0.7);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
      display: none;
      place-items: center;
      z-index: 10011;
      opacity: 0;
      transition: opacity 0.3s ease;
      pointer-events: none;
      touch-action: none;
    }
    .chat-loading-overlay.visible {
      display: grid;
      opacity: 1;
      pointer-events: auto;
    }
    .chat-loading-overlay.visible.is-exiting {
      animation: chatLoaderOverlayExit 1.1s ease-in forwards;
    }
    .chat-loading-overlay .loader-maple {
      width: 56px;
      height: 56px;
      filter: drop-shadow(0 2px 12px rgba(200, 16, 46, 0.35));
      animation: maple-loader-pulse 1.2s ease-in-out infinite;
    }
    .chat-loading-overlay.visible.is-exiting .loader-maple {
      animation: chatLoaderIconExit 1.1s cubic-bezier(0.18, 0.95, 0.24, 1) forwards;
    }
    .chat-loading-overlay .loader-maple .leaf-bg {
      fill: rgba(200, 16, 46, 0.15);
    }
    .chat-loading-overlay .loader-maple .leaf-stroke {
      fill: none;
      stroke: #c8102e;
      stroke-width: 120;
      stroke-linecap: round;
      stroke-linejoin: round;
      stroke-dasharray: 1;
      stroke-dashoffset: 1;
      animation: trace-leaf-full 2s ease-in-out infinite;
    }
    .chat-loading-overlay .chat-loader-text {
      position: fixed;
      top: calc(50vh + 44px);
      left: 50%;
      transform: translateX(-50%);
      font-size: 14px;
      font-weight: 500;
      color: #1a1a2e;
      animation: pulse-loader-text 1.5s ease-in-out infinite;
    }
    .chat-loading-overlay.visible.is-exiting .chat-loader-text {
      animation: chatLoaderTextExit 0.5s ease-out forwards;
    }

    @keyframes chatLoaderOverlayExit {
      from { opacity: 1; }
      to { opacity: 0; }
    }

    @keyframes chatLoaderIconExit {
      0% {
        opacity: 0.35;
        transform: scale(1);
        filter: drop-shadow(0 2px 12px rgba(200, 16, 46, 0.35));
      }
      38% {
        opacity: 1;
        transform: scale(2.9);
        filter: drop-shadow(0 20px 64px rgba(200, 16, 46, 0.85));
      }
      100% {
        opacity: 0;
        transform: scale(4.6);
        filter: drop-shadow(0 0 0 rgba(200, 16, 46, 0));
      }
    }

    @keyframes chatLoaderTextExit {
      from { opacity: 1; transform: translateY(0); }
      to { opacity: 0; transform: translateY(-8px); }
    }

    @keyframes maple-loader-pulse {
      0%, 100% { transform: scale(1); opacity: 0.78; }
      50% { transform: scale(1.12); opacity: 1; }
    }

    /* Block scroll and clicks during form/report loading - no scrolling until property info is loaded */
    body.chat-loading-active,
    body.address-loading-active {
      overflow: hidden !important;
      touch-action: none !important;
      overscroll-behavior: none !important;
    }
    html.chat-loading-active,
    html.address-loading-active {
      overflow: hidden !important;
      touch-action: none !important;
      overscroll-behavior: none !important;
    }
    body.chat-loading-active .chat-panel,
    body.chat-loading-active .chat-messages,
    body.chat-loading-active .chat-container,
    body.chat-loading-active .main-layout,
    body.address-loading-active .chat-panel,
    body.address-loading-active .chat-messages,
    body.address-loading-active .chat-container,
    body.address-loading-active .main-layout {
      overflow: hidden !important;
      touch-action: none;
      overscroll-behavior: none;
    }

    body.report-interaction-locked {
      overflow: hidden;
      touch-action: none;
      overscroll-behavior: none;
    }

    body.report-interaction-locked::after {
      content: '';
      position: fixed;
      inset: 0;
      z-index: 9998;
      background: transparent;
      pointer-events: auto;
    }

    /* Keep the resolved address hidden until report loading is complete */
    body.chat-loading-active .welcome-title.report-address-title {
      opacity: 0;
    }

    body.qualify-reveal-map-only {
      overflow: hidden !important;
      touch-action: none;
      overscroll-behavior: none;
    }
    body.qualify-reveal-map-only .chat-input-area,
    body.qualify-reveal-map-only .zoning-options-back-btn,
    body.qualify-reveal-map-only #zoningInfoPanel {
      display: none !important;
    }

    body.qualify-reveal-map-only #welcomeState > * {
      display: none !important;
    }

    body.qualify-reveal-map-only #welcomeState .section-frame {
      display: none !important;
    }

    body.qualify-reveal-map-only #sectionFrameHomes,
    body.qualify-reveal-map-only #sectionFrameAddition,
    body.qualify-reveal-map-only #sectionFrameMultiplex,
    body.qualify-reveal-map-only #sectionFrameCustomHomes {
      display: none !important;
    }

    body.qualify-reveal-map-only #welcomeState #sectionFrameEnvelope {
      display: block !important;
      width: min(100%, 760px);
      margin: 0 auto;
      padding: 0;
      background: transparent;
      border: none;
      box-shadow: none;
    }

    body.qualify-reveal-map-only #welcomeState #sectionFrameEnvelope .section-frame-title,
    body.qualify-reveal-map-only #welcomeState #sectionFrameEnvelope .options-envelope-cta,
    body.qualify-reveal-map-only #welcomeState #sectionFrameEnvelope .options-template-showcase-slot {
      display: none !important;
    }

    body.qualify-reveal-map-only #welcomeState #sectionFrameEnvelope .options-envelope-embed--coach {
      display: block !important;
      margin: 0;
    }
    body.qualify-reveal-map-only #welcomeState #sectionFrameEnvelope .options-envelope-embed--addition {
      display: none !important;
    }

    .report-confetti-canvas {
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: 10009;
      opacity: 0;
      transition: opacity 0.15s ease;
    }

    .report-confetti-canvas.visible {
      opacity: 1;
    }

    .qualify-reveal {
      /* "You've been ZONED!" overlay permanently disabled.
         Belt-and-suspenders: even if any JS adds .visible, this stays hidden. */
      display: none !important;
      position: fixed;
      inset: 0;
      align-items: center;
      justify-content: center;
      pointer-events: none;
      z-index: 10012;
      opacity: 0;
      transition: opacity 260ms ease-out;
    }

    .qualify-reveal.visible {
      display: none !important;
      opacity: 0;
    }

    .qualify-reveal.is-fading {
      opacity: 0;
    }

    .qualify-reveal-text {
      font-family: 'Sora', sans-serif;
      font-size: clamp(34px, 6vw, 72px);
      font-weight: 800;
      letter-spacing: -0.03em;
      color: #c8102e;
      text-shadow: 0 8px 28px rgba(200, 16, 46, 0.2);
      transform: translate3d(-120vw, 0, 0) scale(0.94);
      opacity: 0;
      will-change: transform, opacity;
      backface-visibility: hidden;
    }

    .qualify-reveal.visible .qualify-reveal-text {
      animation: qualifyRevealInOut 24s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    }

    @keyframes qualifyRevealInOut {
      0% {
        opacity: 0;
        transform: translate3d(-120vw, 0, 0) scale(0.94);
        animation-timing-function: cubic-bezier(0.22, 0.85, 0.24, 1);
      }
      0.8% {
        opacity: 1;
        transform: translate3d(0vw, 0, 0) scale(1.01);
        animation-timing-function: linear;
      }
      98% {
        opacity: 1;
        transform: translate3d(72vw, 0, 0) scale(1);
      }
      100% {
        opacity: 0;
        transform: translate3d(72vw, 0, 0) scale(1);
      }
    }

    .woo-reveal {
      position: fixed;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      pointer-events: none;
      z-index: 10013;
      opacity: 0;
      transition: opacity 200ms ease-out;
    }

    .woo-reveal.visible {
      opacity: 1;
    }

    .woo-reveal-text {
      font-family: 'Sora', sans-serif;
      font-size: clamp(34px, 6vw, 72px);
      font-weight: 800;
      letter-spacing: -0.03em;
      color: #c8102e;
      text-shadow: 0 8px 28px rgba(200, 16, 46, 0.2);
      transform: translate3d(-120vw, 0, 0) scale(0.94);
      opacity: 0;
      will-change: transform, opacity;
      backface-visibility: hidden;
    }

    .woo-reveal.visible .woo-reveal-text {
      animation: wooRevealFly 2.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    }

    @keyframes wooRevealFly {
      0% {
        opacity: 0;
        transform: translate3d(-120vw, 0, 0) scale(0.94);
        animation-timing-function: cubic-bezier(0.22, 0.85, 0.24, 1);
      }
      2% {
        opacity: 1;
        transform: translate3d(0vw, 0, 0) scale(1.01);
        animation-timing-function: linear;
      }
      98% {
        opacity: 1;
        transform: translate3d(72vw, 0, 0) scale(1);
      }
      100% {
        opacity: 0;
        transform: translate3d(72vw, 0, 0) scale(1);
      }
    }

    /* Ottawa fixed bottom action bar */
    @keyframes ctaSlideUp {
      from { transform: translateY(100%); opacity: 0; }
      to   { transform: translateY(0);    opacity: 1; }
    }

    .ottawa-project-cta-overlay {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 9998;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 16px 20px;
      padding-bottom: max(16px, env(safe-area-inset-bottom, 16px));
      pointer-events: none;
      background: transparent;
      border-top: 0;
    }

    /* When a project tile is expanded, force the CTA bar visible.
       No JS timer or deferred handler can override !important. */
    body:has(.czp-tile-grid.has-expanded) .ottawa-project-cta-overlay {
      display: flex !important;
      opacity: 1 !important;
      transform: translateY(0) !important;
      animation: none !important;
    }

    .ottawa-project-cta-overlay.visible {
      display: flex;
    }

    /* Hide every fixed-position page chrome element while the Scenario
       Optimizer modal is open. Their z-indexes (9997/9998) sit above
       the modal (2500) and otherwise cover the wizard. The body gets
       the `mplx-wizard-open` class on _openMplxWizard(). */
    body.mplx-wizard-open .ottawa-project-cta-overlay,
    body.mplx-wizard-open .ottawa-bubble-launcher,
    body.mplx-wizard-open .ottawa-bubble-panel,
    body.mplx-wizard-open .property-report-back-host {
      display: none !important;
    }

    .ottawa-project-cta-content {
      pointer-events: auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
      max-width: 420px;
      width: 100%;
    }

    .ottawa-project-cta-content.cta-guide-inline {
      flex-direction: row;
      align-items: center;
      justify-content: center;
      gap: 10px;
      flex-wrap: nowrap;
    }

    .ottawa-project-cta-content.cta-guide-inline .ottawa-project-cta-guide {
      text-align: left;
      flex: 0 0 auto;
      min-width: auto;
      white-space: nowrap;
    }

    .ottawa-project-cta-content.cta-guide-inline .ottawa-project-cta-btn {
      flex: 1 1 auto;
      min-width: 120px;
    }

    .ottawa-project-cta-buttons {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      gap: 12px;
      flex-wrap: wrap;
      width: 100%;
    }

    .ottawa-project-cta-buttons .ottawa-project-cta-btn {
      flex: 1 1 auto;
      min-width: 140px;
    }

    .ottawa-project-cta-content.cta-dual-buttons .ottawa-project-cta-buttons {
      flex-direction: row;
      gap: 12px;
    }

    @media (max-width: 480px) {
      .ottawa-project-cta-buttons .ottawa-project-cta-btn {
        min-width: 70px;
      }
    }

    @keyframes ctaGuideGlow {
      0%, 100% {
        box-shadow: 0 0 8px rgba(34, 197, 94, 0.35);
        opacity: 1;
      }
      50% {
        box-shadow: 0 0 16px rgba(34, 197, 94, 0.55), 0 0 24px rgba(34, 197, 94, 0.25);
        opacity: 0.98;
      }
    }

    .ottawa-project-cta-guide {
      display: none !important;
    }

    .ottawa-project-cta-guide::after {
      content: none;
    }

    .ottawa-project-cta-guide:hover:not(:empty) {
      color: rgba(255, 255, 255, 1);
      background: rgba(34, 197, 94, 0.12);
      border-color: rgba(34, 197, 94, 0.5);
      box-shadow: 0 0 12px rgba(34, 197, 94, 0.4);
    }

    .ottawa-project-cta-guide:empty {
      display: none;
    }

    .ottawa-project-cta-btn {
      padding: 16px 36px;
      min-height: 56px;
      min-width: 220px;
      border-radius: 999px;
      font-size: 15px;
      font-weight: 700;
      letter-spacing: 0.02em;
      color: #fff;
      background: linear-gradient(135deg, #c8102e 0%, #a70f27 100%);
      box-shadow:
        0 6px 18px rgba(200, 16, 46, 0.32),
        0 2px 6px rgba(200, 16, 46, 0.18);
      border: 0;
      cursor: pointer;
      transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
      white-space: nowrap;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }

    .ottawa-project-cta-btn:hover {
      transform: translateY(-1px) scale(1.01);
      filter: brightness(1.04);
      box-shadow:
        0 10px 28px rgba(200, 16, 46, 0.42),
        0 0 0 4px rgba(200, 16, 46, 0.10);
    }

    .ottawa-project-cta-btn:focus-visible {
      outline: 3px solid rgba(200, 16, 46, 0.55);
      outline-offset: 3px;
    }

    /* Subtle nurturing pulse on the primary "Start this project" button.
       Excludes .cta-siteplan, which has its own green nurture glow. */
    #ottawaProjectCtaBtn:not(.cta-siteplan) {
      animation: nurtureGlowStart 2.8s ease-in-out infinite;
    }
    @keyframes nurtureGlowStart {
      0%, 100% {
        box-shadow:
          0 6px 18px rgba(200, 16, 46, 0.32),
          0 0 0 0 rgba(200, 16, 46, 0);
        transform: scale(1);
      }
      50% {
        box-shadow:
          0 8px 24px rgba(200, 16, 46, 0.45),
          0 0 28px rgba(200, 16, 46, 0.30);
        transform: scale(1.025);
      }
    }
    @media (prefers-reduced-motion: reduce) {
      #ottawaProjectCtaBtn:not(.cta-siteplan) {
        animation: none;
      }
    }

    .ottawa-project-cta-back-btn {
      padding: 8px 14px;
      border-radius: 0;
      font-size: 12px;
      font-weight: 600;
      letter-spacing: 0.01em;
      color: #cbd5e1;
      background: rgba(148, 163, 184, 0.12);
      border: 1px solid rgba(148, 163, 184, 0.25);
      cursor: pointer;
      transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
      white-space: nowrap;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      flex-shrink: 0;
    }
    .ottawa-project-cta-back-btn:hover {
      color: #fff;
      background: rgba(148, 163, 184, 0.2);
      border-color: rgba(148, 163, 184, 0.4);
    }
    .ottawa-project-cta-back-btn svg {
      flex-shrink: 0;
    }

    /* When the "Back" button is hosted inside the lot header (top of the
       report panel, next to the address), strip the fixed-position chrome
       and style it to mirror "Restart" on the right side of the header so
       the row reads as a symmetric address bar. */
    #lotHeaderBackSlot .ottawa-project-cta-back-btn {
      padding: 6px 10px;
      min-height: 0;
      font-size: 13px;
      font-weight: 500;
      letter-spacing: normal;
      text-transform: none;
      color: #475569;
      background: #fff;
      border: 1px solid #cbd5e1;
      border-radius: 6px;
      box-shadow: none;
      -webkit-backdrop-filter: none;
      backdrop-filter: none;
      transform: none;
      gap: 6px;
    }
    #lotHeaderBackSlot .ottawa-project-cta-back-btn:hover {
      color: #0f172a;
      background: #f8fafc;
      border-color: #94a3b8;
      box-shadow: none;
      transform: none;
    }
    #lotHeaderBackSlot .ottawa-project-cta-back-btn svg {
      width: 13px;
      height: 13px;
      stroke-width: 2.25;
    }
    /* Mobile: shrink both buttons and on the very narrowest screens drop
       the text labels so the address title stays readable. The chevron
       and refresh icons keep the button purpose clear without the words. */
    @media (max-width: 480px) {
      #lotHeader {
        gap: 6px !important;
        padding: 10px 12px !important;
      }
      #lotHeaderBackSlot .ottawa-project-cta-back-btn,
      #lotHeaderPickAnother {
        padding: 6px 9px !important;
        font-size: 12px !important;
        gap: 4px !important;
      }
      #lotHeader .lot-header-title {
        font-size: 15px !important;
      }
    }
    /* "Enter new address" is wider than the old "Restart", on phones/small
       tablets drop the label to the refresh icon (the aria-label + title keep
       it discoverable) so it never crowds or clips the centered address. */
    @media (max-width: 560px) {
      #lotHeaderPickAnother .lot-header-restart-label {
        display: none;
      }
      #lotHeaderPickAnother {
        padding: 7px 9px !important;
      }
    }
    @media (max-width: 380px) {
      #lotHeaderBackSlot .ottawa-project-cta-back-btn {
        font-size: 0 !important;
        padding: 7px 8px !important;
      }
      #lotHeaderPickAnother {
        padding: 7px 8px !important;
      }
    }

    /* Property report: relocated "Other projects" back button. Sits at the
       top-left of the centered content area (max-width matches
       .zoning-info-panel.visible at 1080px) so the button aligns with the
       zone badge column instead of pinning to the viewport edge. Stays
       fixed under the site header so it remains reachable while scrolling,
       but uses a flex row that hugs the content's left edge, not a full
       sticky header bar. */
    .property-report-back-host {
      position: fixed;
      top: calc(var(--site-header-height, 72px) + 12px);
      left: 50%;
      transform: translateX(-50%);
      width: min(100% - 40px, 1080px);
      display: flex;
      justify-content: flex-start;
      z-index: 9997;
      pointer-events: none;
    }
    .property-report-back-host .ottawa-project-cta-back-btn {
      pointer-events: auto;
      padding: 10px 16px 10px 12px;
      min-height: 44px;
      border-radius: 999px;
      font-size: 13px;
      font-weight: 600;
      letter-spacing: 0.01em;
      color: #475569;
      background: rgba(255, 255, 255, 0.92);
      border: 1px solid rgba(148, 163, 184, 0.45);
      box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
      gap: 6px;
      transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
    }
    .property-report-back-host .ottawa-project-cta-back-btn:hover {
      color: #0f172a;
      background: #fff;
      border-color: #94a3b8;
      box-shadow: 0 4px 12px rgba(15, 23, 42, 0.10);
      transform: translateY(-1px);
    }
    .property-report-back-host .ottawa-project-cta-back-btn:focus-visible {
      outline: 2px solid #c8102e;
      outline-offset: 2px;
    }
    .property-report-back-host .ottawa-project-cta-back-btn svg {
      width: 16px;
      height: 16px;
      stroke-width: 2.25;
    }
    @media (max-width: 768px) {
      .property-report-back-host {
        top: calc(var(--site-header-height, 58px) + 8px);
        /* left/transform/width inherited from the base rule keep the host
           aligned with the centered content column on mobile too. */
      }
      .property-report-back-host .ottawa-project-cta-back-btn {
        padding: 9px 14px 9px 10px;
        font-size: 12px;
        min-height: 40px;
      }
    }

    .ottawa-project-cta-btn.cta-siteplan {
      background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
      box-shadow: 0 2px 10px rgba(34, 197, 94, 0.28);
    }

    .ottawa-project-cta-btn.cta-siteplan:hover {
      box-shadow: 0 4px 16px rgba(34, 197, 94, 0.38);
    }

    @media (max-width: 768px) {
      .ottawa-project-cta-content.cta-guide-inline .ottawa-project-cta-guide {
        flex: 0 0 auto;
        width: auto;
        max-width: 100%;
      }

      .ottawa-project-cta-buttons {
        width: auto;
        flex: 0 0 auto;
      }

      .ottawa-project-cta-content.cta-guide-inline .ottawa-project-cta-btn,
      .ottawa-project-cta-buttons .ottawa-project-cta-btn {
        flex: 0 0 auto;
        width: auto;
        min-width: unset;
      }
    }

    /* Pre-contractor intent (Start this project), matches /ottawa card + chip aesthetic */
    body.ottawa-start-intent-open {
      overflow: hidden;
    }

    .ottawa-start-intent-modal {
      position: fixed;
      inset: 0;
      z-index: 10050;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 20px;
      padding-bottom: max(20px, env(safe-area-inset-bottom, 20px));
      box-sizing: border-box;
    }

    .ottawa-start-intent-modal.is-open {
      display: flex;
    }

    .ottawa-start-intent-backdrop {
      position: absolute;
      inset: 0;
      background: rgba(15, 23, 42, 0.48);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
    }

    .ottawa-start-intent-panel {
      position: relative;
      width: 100%;
      max-width: 420px;
      max-height: min(90vh, 640px);
      overflow: auto;
      margin: 0;
      padding: 24px 22px 22px;
      border-radius: 16px;
      background: #ffffff;
      border: 1px solid rgba(226, 232, 240, 0.95);
      box-shadow:
        0 4px 6px -1px rgba(15, 23, 42, 0.06),
        0 20px 50px -12px rgba(15, 23, 42, 0.18);
      font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
      animation: ottawaIntentPanelIn 0.28s ease;
    }

    @keyframes ottawaIntentPanelIn {
      from {
        opacity: 0;
        transform: translateY(10px) scale(0.98);
      }
      to {
        opacity: 1;
        transform: translateY(0) scale(1);
      }
    }

    .ottawa-start-intent-close {
      position: absolute;
      top: 10px;
      right: 10px;
      width: 36px;
      height: 36px;
      border: none;
      border-radius: 10px;
      background: transparent;
      color: #64748b;
      font-size: 24px;
      line-height: 1;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.15s ease, color 0.15s ease;
    }

    .ottawa-start-intent-close:hover {
      background: #f1f5f9;
      color: #0f172a;
    }

    .ottawa-start-intent-heading {
      margin: 0 32px 18px 0;
      font-size: 1.25rem;
      font-weight: 700;
      letter-spacing: -0.02em;
      color: #1a1a2e;
      line-height: 1.25;
    }

    .ottawa-start-intent-options {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .ottawa-start-intent-option {
      display: block;
      width: 100%;
      box-sizing: border-box;
      padding: 14px 16px;
      border-radius: 12px;
      border: 1px solid #e2e8f0;
      background: #f8fafc;
      font: inherit;
      font-size: 15px;
      font-weight: 600;
      color: #1a1a2e;
      text-align: center;
      cursor: pointer;
      transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
    }

    .ottawa-start-intent-option:hover {
      border-color: #cbd5e1;
      background: #f1f5f9;
      transform: translateY(-1px);
      box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
    }

    .ottawa-start-intent-option:focus-visible {
      outline: none;
      border-color: #c8102e;
      box-shadow: 0 0 0 3px rgba(200, 16, 46, 0.12);
    }

    @media (max-width: 480px) {
      .ottawa-start-intent-panel {
        padding: 20px 16px 18px;
      }

      .ottawa-start-intent-heading {
        font-size: 1.1rem;
      }

      .ottawa-start-intent-option {
        font-size: 14px;
        padding: 12px 14px;
      }
    }

    /* ── Contractor Picker Modal ─────────────────────────────────────── */
    .contractor-picker-modal {
      position: fixed; inset: 0; z-index: 10060;
      display: none; align-items: center; justify-content: center;
    }
    .contractor-picker-modal.is-open {
      display: flex;
    }
    .contractor-picker-backdrop {
      position: absolute; inset: 0;
      background: rgba(15, 23, 42, 0.55);
      backdrop-filter: blur(4px);
    }
    .contractor-picker-panel {
      position: relative; z-index: 1;
      width: min(92vw, 520px);
      max-height: 85vh;
      overflow-y: auto;
      background: #fff;
      border-radius: 18px;
      padding: 28px 24px 20px;
      box-shadow: 0 20px 60px rgba(0,0,0,0.18);
      animation: contractorPickerIn 0.25s ease-out;
    }
    @keyframes contractorPickerIn {
      from { opacity: 0; transform: translateY(12px) scale(0.97); }
      to { opacity: 1; transform: translateY(0) scale(1); }
    }
    .contractor-picker-close {
      position: absolute; top: 14px; right: 16px;
      background: none; border: none; font-size: 22px; color: #94a3b8;
      cursor: pointer; line-height: 1; padding: 4px;
    }
    .contractor-picker-close:hover { color: #0f172a; }
    .contractor-picker-heading {
      font-size: 1.25rem; font-weight: 700; color: #0f172a;
      margin: 0 0 6px; text-align: center;
    }
    .contractor-picker-subtitle {
      font-size: 13px; color: #64748b; text-align: center;
      margin: 0 0 16px; line-height: 1.4;
    }
    .contractor-picker-random {
      display: block; width: 100%;
      padding: 12px 16px; margin-bottom: 16px;
      border: 2px solid #c8102e; border-radius: 12px;
      background: #fff; color: #c8102e;
      font-size: 15px; font-weight: 700;
      cursor: pointer;
      transition: background 0.15s, color 0.15s, transform 0.15s;
    }
    .contractor-picker-random:hover {
      background: #c8102e; color: #fff;
      transform: translateY(-1px);
    }
    .contractor-picker-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 12px;
    }
    @media (max-width: 400px) {
      .contractor-picker-grid { grid-template-columns: 1fr; }
    }
    .contractor-picker-card {
      display: flex; flex-direction: column;
      align-items: center; justify-content: center;
      gap: 8px;
      padding: 16px 12px;
      border: 1.5px solid #e2e8f0;
      border-radius: 14px;
      background: #fff;
      cursor: pointer;
      transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
    }
    .contractor-picker-card:hover {
      border-color: #c8102e;
      box-shadow: 0 6px 20px rgba(200, 16, 46, 0.10);
      transform: translateY(-2px);
    }
    .contractor-picker-card img {
      max-width: 120px; max-height: 56px;
      object-fit: contain;
    }
    .contractor-picker-card-name {
      font-size: 12px; font-weight: 600; color: #0f172a;
      text-align: center; line-height: 1.2;
    }
    /* Text-only fallback when a paying contractor has no logo asset. */
    .contractor-picker-card-text {
      font-family: inherit;
      min-height: 90px;
      align-self: stretch;
      appearance: none;
    }
    .contractor-picker-card-text .contractor-picker-card-name {
      font-size: 14px; font-weight: 700; color: #0f172a;
    }
    /* When the logo image fails to load, drop the empty img slot so the
       remaining text label is centered. */
    .contractor-picker-card.no-logo { padding-top: 22px; padding-bottom: 22px; }
    .contractor-picker-card.no-logo .contractor-picker-card-name { font-size: 14px; font-weight: 700; }
    .contractor-picker-loading {
      grid-column: 1 / -1;
      text-align: center; padding: 24px;
      font-size: 13px; color: #94a3b8;
    }

    .chat-input-wrapper {
      display: flex;
      gap: 8px;
      background: var(--chat-bg-secondary);
      border: 1px solid var(--chat-border);
      border-radius: 24px;
      padding: 8px 8px 8px 20px;
      align-items: flex-end;
      transition: opacity 0.3s ease, transform 0.3s ease;
    }

    /* Hidden in welcome-centered mode until address is validated */
    .chat-container.welcome-centered .chat-input-wrapper {
      opacity: 0;
      transform: translateY(20px);
      pointer-events: none;
    }
    
    /* Show when address is validated (banner visible) */
    .chat-container.welcome-centered.address-ready .chat-input-wrapper {
      opacity: 1;
      transform: translateY(0);
      pointer-events: auto;
    }

    .chat-input-wrapper:focus-within {
      border-color: var(--accent);
    }

    .chat-disclaimer {
      text-align: center;
      font-size: 11px;
      color: #94a3b8;
      margin-top: 3px;
      line-height: 1.3;
    }

    .chat-input {
      flex: 1;
      background: transparent;
      border: none;
      color: var(--chat-text);
      font-size: 14px;
      resize: none;
      min-height: 24px;
      max-height: 120px;
      line-height: 1.5;
      font-family: inherit;
      padding: 4px 0;
    }

    .chat-input::placeholder {
      color: var(--chat-text-muted);
    }

    .chat-input:focus {
      outline: none;
    }

    .chat-submit {
      width: 36px;
      height: 36px;
      background: var(--accent);
      border: none;
      border-radius: 50%;
      color: white;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.15s;
      flex-shrink: 0;
    }

    .chat-submit:hover:not(:disabled) {
      background: var(--accent-hover);
    }

    .chat-submit:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }

    .chat-submit svg {
      width: 16px;
      height: 16px;
    }

    /* Quick Action Buttons (ChatGPT style) */
    .quick-actions {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 12px;
      margin-top: 32px;
      padding: 0 16px;
      max-width: 400px;
      margin-left: auto;
      margin-right: auto;
    }

    .quick-action-btn {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 14px 16px;
      background: var(--chat-bg-secondary);
      border: 1px solid var(--chat-border);
      border-radius: 16px;
      color: var(--chat-text);
      font-size: 13px;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.15s ease;
      text-align: left;
    }

    .quick-action-btn:hover {
      background: var(--chat-bg-tertiary);
      border-color: var(--accent);
    }

    .quick-action-btn:active {
      transform: scale(0.98);
    }

    .quick-action-btn svg {
      width: 20px;
      height: 20px;
      flex-shrink: 0;
      opacity: 0.7;
    }

    .quick-action-btn span {
      flex: 1;
    }

    .zoning-actions-grid {
      display: none;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
      width: min(100%, 760px);
      margin: 14px auto 12px;
    }

    .zoning-actions-grid.persistent-post-submit-nav {
      margin: 14px auto 6px;
      padding-top: 6px;
      border-top: 1px solid #e2e8f0;
    }

    .adu-model-buttons-intro.persistent-post-submit-custom-home {
      margin: 8px auto 8px;
      padding-top: 4px;
      border-top: 1px solid #e2e8f0;
      width: min(100%, 760px);
    }

    .adu-model-buttons-grid.persistent-post-submit-custom-home {
      margin: 6px auto 14px;
      width: min(100%, 760px);
    }

    .adu-model-buttons-grid {
      display: none;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 16px;
      width: min(100%, 760px);
      margin: 6px auto 18px;
    }

    .adu-model-buttons-intro {
      display: none;
      width: min(100%, 760px);
      margin: 2px auto 8px;
      text-align: center;
      font-size: 16px;
      font-weight: 700;
      color: #0f172a;
      letter-spacing: 0.01em;
    }

    .options-intro-text {
      display: none;
      width: min(100%, 760px);
      margin: 2px auto 8px;
      text-align: center;
      font-size: 16px;
      font-weight: 700;
      color: #0f172a;
      letter-spacing: 0.01em;
    }

    /* ── Themed Section Frames ── */
    .section-frame {
      position: relative;
      width: min(100%, 760px);
      margin: 0 auto 18px;
      padding: 16px 18px 18px;
      border-radius: 14px;
      border: 1px solid #e8dfd4;
      background: #ffffff;
      box-shadow: 0 1px 3px rgba(30,41,59,0.04), 0 4px 16px rgba(30,41,59,0.04);
      overflow: hidden;
    }

    .section-frame::before {
      display: none;
    }

    .section-frame-title {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin: 0 0 14px;
      font-size: 14px;
      font-weight: 800;
      color: #0f172a;
      letter-spacing: 0.01em;
    }

    .section-frame-title--legacy {
      position: absolute;
      top: -13px;
      left: 24px;
      display: inline-flex;
      align-items: center;
      gap: 7px;
      padding: 5px 16px 5px 12px;
      border-radius: 8px;
      font-size: 12.5px;
      font-weight: 800;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      line-height: 1.3;
      z-index: 2;
      white-space: nowrap;
    }

    .section-frame-title svg {
      width: 15px;
      height: 15px;
      flex-shrink: 0;
    }

    .section-frame > *:not(.section-frame-title) {
      position: relative;
      z-index: 1;
    }

    /* Nurturing project block, closing pcard that appears at the bottom of
       the Coach Homes, Home Addition, Multiplex, and Custom Homes frames.
       Restyled to match the Basement Apartment expanded-tile pcard:
       clean white card with a red accent border, red qualification
       headline, red "Talk to a Contractor" CTA. Replaces the previous
       beige/orange gradient that read like a different surface from the
       rest of the site.
       The fade-up animation mirrors the basement tile's expand transition
       (same easing + duration window) so the block lands with the same
       feel when the user opens a project tab. */
    .czp-nurture {
      margin: 18px 0 4px;
      padding: 20px 22px;
      border-radius: 16px;
      background: #ffffff;
      border: 1px solid rgba(200, 16, 46, 0.22);
      color: #334155;
      font-size: 14.5px;
      line-height: 1.65;
      text-wrap: pretty;
      box-shadow: 0 1px 2px rgba(15,23,42,0.03), 0 10px 24px -16px rgba(200,16,46,0.18);
      animation: czpNurtureRise 620ms cubic-bezier(0.22, 1, 0.36, 1) 260ms both;
    }
    /* Red qualification headline that mirrors the basement tile's
       "✓ YOU QUALIFY FOR A SECONDARY SUITE" treatment. Sections that don't
       supply a headline element keep the lead paragraph as the visual
       opener. */
    .czp-nurture-eyebrow {
      margin: 0 0 10px;
      font-size: 11px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.7px;
      color: #b91c1c;
    }
    .czp-nurture-lead {
      margin: 0 0 10px;
      color: #0f172a;
      font-size: 15px;
      line-height: 1.6;
    }
    .czp-nurture-lead strong {
      color: #0f172a;
    }
    .czp-nurture-body {
      margin: 0 0 14px;
      color: #334155;
    }
    .czp-nurture-body strong {
      color: #c8102e;
    }
    .czp-nurture-heading {
      margin: 0 0 8px;
      color: #0f172a;
      font-weight: 700;
      font-size: 13px;
      letter-spacing: 0.02em;
      text-transform: uppercase;
    }
    .czp-nurture-list {
      margin: 0;
      padding-left: 22px;
      display: flex;
      flex-direction: column;
      gap: 6px;
      color: #334155;
    }
    .czp-nurture-list li {
      line-height: 1.55;
    }
    .czp-nurture-list strong {
      color: #c8102e;
    }
    @keyframes czpNurtureRise {
      0%   { opacity: 0; transform: translateY(12px) scale(0.98); }
      100% { opacity: 1; transform: translateY(0)    scale(1); }
    }
    @media (prefers-reduced-motion: reduce) {
      .czp-nurture { animation: none; }
    }

    /* ── Section intro (lot context + back link, top of each project view) ── */
    .section-intro {
      margin: 0 0 8px;
      padding: 0;
      font-size: 13px;
      line-height: 1.55;
      color: #475569;
      text-align: left;
    }

    .section-intro:empty {
      display: none;
    }
    .section-intro strong {
      color: #0f172a;
      font-weight: 700;
    }
    .section-intro .si-stat {
      font-weight: 700;
      color: #059669;
    }
    .section-intro .si-stat-caution {
      font-weight: 700;
      color: #d97706;
    }
    .section-intro .si-back {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      color: #c8102e;
      font-weight: 700;
      font-size: 13px;
      cursor: pointer;
      background: rgba(200,16,46,0.06);
      border: 1px solid rgba(200,16,46,0.15);
      border-radius: 8px;
      padding: 6px 14px;
      margin: 0 0 10px 0;
      align-self: flex-end;
      letter-spacing: 0.01em;
      transition: background 0.15s ease, border-color 0.15s ease;
    }
    .section-intro .si-back:hover {
      background: rgba(200,16,46,0.12);
      border-color: rgba(200,16,46,0.3);
      text-decoration: none;
    }
    .section-intro .si-back svg {
      width: 13px;
      height: 13px;
    }

    /* ── Project banner, warm nurturing header inside section intros ── */
    .si-project-header {
      position: relative;
      display: flex;
      flex-direction: column;
      gap: 0;
      margin: -16px -18px 14px;
      padding: 16px 20px 14px;
      background: #ffffff;
      border-radius: 0;
      overflow: hidden;
      border-bottom: 2px solid #c8102e;
    }
    .si-project-header::before {
      display: none;
    }
    .si-project-header::after {
      display: none;
    }
    /* Title row, back button LEFT of title, divider between, title as visual hero.
       Integration principle: back control is muted (ghost chip) so it reads as
       navigation chrome, not a CTA; the thin vertical rule between them creates a
       typographic delimiter so the eye parses "back → current section" naturally. */
    .si-project-title-row {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      gap: 14px;
      margin-bottom: 6px;
      flex-wrap: wrap;
    }
    .si-project-title-row .si-back {
      /* Ghost-chip back button, muted, icon-first, brand-tinted */
      margin: 0;
      padding: 5px 11px 5px 9px;
      background: transparent;
      border: 1px solid transparent;
      border-radius: 8px;
      color: #c8102e;
      font-size: 12.5px;
      font-weight: 700;
      letter-spacing: 0.01em;
      line-height: 1;
      flex-shrink: 0;
      transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
    }
    .si-project-title-row .si-back:hover {
      background: rgba(200,16,46,0.08);
      border-color: rgba(200,16,46,0.15);
      color: #a50e26;
    }
    .si-project-title-row .si-back:active {
      transform: translateX(-1px);
    }
    .si-project-title-row .si-back svg {
      width: 12px;
      height: 12px;
      transition: transform 0.18s ease;
    }
    .si-project-title-row .si-back:hover svg {
      transform: translateX(-2px);  /* subtle slide-left cue */
    }
    /* Thin vertical divider between back chip and title */
    .si-project-title-row .si-project-title {
      font-size: 17px;
      font-weight: 800;
      color: #1e293b;
      letter-spacing: -0.02em;
      line-height: 1.2;
      margin: 0;
      padding-left: 14px;
      border-left: 1px solid rgba(15,23,42,0.12);
    }
    .si-project-title {
      font-size: 17px;
      font-weight: 800;
      color: #1e293b;
      letter-spacing: -0.02em;
      line-height: 1.2;
      margin-bottom: 0;
    }
    /* Small screens: drop the divider so the two pieces stack cleanly */
    @media (max-width: 480px) {
      .si-project-title-row .si-project-title {
        padding-left: 0;
        border-left: 0;
      }
    }
    .si-project-headline {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      font-size: 10px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      color: #c8102e;
      margin-bottom: 5px;
      padding: 4px 10px;
      background: rgba(200,16,46,0.06);
      border: 1px solid rgba(200,16,46,0.12);
      border-radius: 6px;
      width: fit-content;
    }
    .si-project-headline::before {
      content: '\2728';
      font-size: 10px;
    }
    .si-project-message {
      font-size: 13px;
      color: #475569;
      line-height: 1.6;
      max-width: 580px;
    }

    /* --- Frame variants: unified warm container --- */
    .section-frame--tools,
    .section-frame--envelope,
    .section-frame--homes {
      background: #ffffff;
      box-shadow: 0 1px 3px rgba(30,41,59,0.04), 0 4px 16px rgba(30,41,59,0.04);
    }

    #sectionFrameEnvelope {
      display: none !important;
    }
    #sectionFrameMultiplex {
      margin-top: 0;
    }
    /* When a project tile is expanded, the lot-preview SVG card flows
       directly into the project's section frame (Multi-Unit / Garden Suite
       / Custom Home / Home Addition). Default welcome-state row-gap +
       section-frame mt-bottom margins create a visible empty band between
       the SVG and the project content, kill those for the expanded layout
       so the whole project view feels like one continuous panel. Scoped
       via :has(.czp-tile-grid.has-expanded) so the unexpanded grid view
       (which uses the spacing for separation) is unaffected. */
    .welcome-state:has(.czp-tile-grid.has-expanded) {
      row-gap: 0;
    }
    .welcome-state:has(.czp-tile-grid.has-expanded) #czpLotPreviewCard {
      margin-bottom: 0;
    }
    .welcome-state:has(.czp-tile-grid.has-expanded) #czpTileGrid {
      margin-bottom: 0;
    }
    .welcome-state:has(.czp-tile-grid.has-expanded) > .section-frame {
      margin-top: 0;
    }
    /* The standalone showcase slot has a 18px bottom margin by default
       (.options-template-showcase-slot { margin: 0 auto 18px }), kill that
       too in the expanded layout. The slot is normally 0px tall (no
       template selected) but the 18px below it produces a visible band
       between the SVG card and the project section. */
    .welcome-state:has(.czp-tile-grid.has-expanded) #optionsTemplateShowcaseSlot {
      margin: 0 auto;
    }
    .welcome-state:has(.czp-tile-grid.has-expanded) #optionsTemplateShowcaseSlot:empty {
      display: none;
    }
    #sectionFrameMultiplex .draw-siteplan-embed {
      display: none !important;
    }

    .options-build-tabs {
      /* Tabs replaced by qualified-project chips as primary navigation.
         Hidden via !important to override all JS inline style assignments. */
      display: none !important;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      margin: 0 -18px 14px;
      border: none;
      border-radius: 14px 14px 0 0;
      overflow: hidden;
      background: #f1f5f9;
      position: relative;
      z-index: 4;
      border-bottom: 1.5px solid rgba(0,0,0,0.06);
    }

    .section-frame:has(.options-build-tabs) {
      padding-top: 0;
      border-top-left-radius: 14px;
      border-top-right-radius: 14px;
      overflow: hidden;
    }

    .options-build-tab-btn {
      border: 0;
      border-right: 1px solid rgba(0,0,0,0.06);
      background: transparent;
      color: #64748b;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.02em;
      text-transform: uppercase;
      padding: 13px 12px;
      cursor: pointer;
      transition: background 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
      font-family: inherit;
      position: relative;
      touch-action: manipulation;
      -webkit-tap-highlight-color: transparent;
    }

    .options-build-tab-btn:last-child {
      border-right: 0;
    }

    .options-build-tab-btn.active {
      background: #ffffff;
      color: #c8102e;
      font-weight: 800;
      box-shadow: inset 0 -3px 0 #c8102e;
    }

    .options-build-tab-btn:hover:not(.active):not(:disabled) {
      background: rgba(255,255,255,0.6);
      color: #334155;
    }

    .options-build-tabs.loading {
      opacity: 0.94;
    }

    .options-build-tab-btn:disabled,
    .options-build-tab-btn.disabled {
      background: rgba(241, 245, 249, 0.92);
      color: #94a3b8;
      cursor: not-allowed;
      box-shadow: none;
    }

    .options-build-tab-btn.active:disabled,
    .options-build-tab-btn.active.disabled {
      background: rgba(255, 255, 255, 0.94);
      color: #94a3b8;
      box-shadow: inset 0 -3px 0 rgba(148, 163, 184, 0.45);
    }

    .options-build-tab-btn.warming::after {
      content: '';
      position: absolute;
      left: 14px;
      right: 14px;
      bottom: 4px;
      height: 2px;
      border-radius: 999px;
      background: linear-gradient(90deg, rgba(148, 163, 184, 0.15) 0%, rgba(148, 163, 184, 0.7) 50%, rgba(148, 163, 184, 0.15) 100%);
      opacity: 0.9;
      animation: optionsTabWarmPulse 1.2s ease-in-out infinite;
    }

    @keyframes optionsTabWarmPulse {
      0%, 100% { opacity: 0.35; transform: scaleX(0.82); }
      50% { opacity: 0.95; transform: scaleX(1); }
    }

    /* Nurture glow for Coach tab when "Select a coach home" CTA is present */
    body.cta-nurture-adu #optionsBuildTabCoach:not(.active) {
      animation: nurtureGlowTab 2s ease-in-out infinite;
    }
    body.cta-nurture-adu #optionsBuildTabCoach.active {
      animation: nurtureGlowTabActive 2s ease-in-out infinite;
    }
    /* Nurture glow for Multiplex tab when "Go to multiplex development" CTA is present */
    body.cta-nurture-multiplex #optionsBuildTabMultiplex:not(.active) {
      animation: nurtureGlowTab 2s ease-in-out infinite;
    }
    body.cta-nurture-multiplex #optionsBuildTabMultiplex.active {
      animation: nurtureGlowTabActive 2s ease-in-out infinite;
    }
    /* Nurture glow for Custom Homes when custom home CTA is present */
    body.cta-nurture-custom-homes #optionsBuildTabCustomHomes:not(.active) {
      animation: nurtureGlowTab 2s ease-in-out infinite;
    }
    body.cta-nurture-custom-homes #optionsBuildTabCustomHomes.active {
      animation: nurtureGlowTabActive 2s ease-in-out infinite;
    }
    /* Nurture glow for Home Addition tab when "Go to home addition" CTA is present */
    body.cta-nurture-addition #optionsBuildTabAddition:not(.active) {
      animation: nurtureGlowTab 2s ease-in-out infinite;
    }
    body.cta-nurture-addition #optionsBuildTabAddition.active {
      animation: nurtureGlowTabActive 2s ease-in-out infinite;
    }
    @keyframes nurtureGlowTab {
      0%, 100% { box-shadow: none; background: #fff; transform: scale(1); }
      50% { box-shadow: 0 0 22px rgba(200, 16, 46, 0.63), 0 0 50px rgba(200, 16, 46, 0.21); background: #fff5f6; transform: scale(1.03); }
    }
    @keyframes nurtureGlowTabActive {
      0%, 100% { box-shadow: none; transform: scale(1); }
      50% { box-shadow: 0 0 28px rgba(200, 16, 46, 0.77), 0 0 62px rgba(200, 16, 46, 0.28); transform: scale(1.03); }
    }

    /* Nested element overrides inside frames */
    .section-frame .zoning-actions-grid {
      width: 100%;
      margin: 0;
    }

    .section-frame .options-envelope-embed {
      width: 100%;
      margin: 0 0 10px;
    }

    .section-frame .options-envelope-cta {
      width: 100%;
      margin: 0;
    }

    .section-frame .options-template-showcase-slot {
      width: 100%;
      margin-top: 10px;
    }
    /* Standalone slot, matches the section-frame width so the showcase
       reads as a peer of the project frames it sits between. */
    .options-template-showcase-slot {
      width: min(100%, 760px);
      margin: 0 auto 18px;
    }

    .section-frame .adu-model-buttons-grid {
      width: 100%;
      margin: 0;
    }

    /* Home addition tile grid: always visible when its section frame is
       shown. The coach grid is gated by JS that flips display on at
       specific lifecycle points; the addition grid has no equivalent
       gating, so it just inherits visibility from #sectionFrameAddition's
       own display toggle. */
    #additionModelButtonsGrid {
      display: grid;
      margin: 12px 0 18px;
    }

    .post-submit-pop-in {
      animation: postSubmitPopIn 460ms cubic-bezier(0.22, 0.85, 0.24, 1) both;
      animation-delay: var(--pop-delay, 0ms);
      will-change: transform, opacity, filter;
    }

    @keyframes postSubmitPopIn {
      0% {
        opacity: 0;
        transform: translateY(12px) scale(0.96);
        filter: blur(2px);
      }
      100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
      }
    }

    .adu-model-button {
      position: relative;
      min-height: 180px;
      border-radius: 14px;
      border: 1px solid #d7deea;
      overflow: hidden;
      cursor: pointer;
      background-color: #0f172a;
      background-position: center center;
      background-size: cover;
      background-repeat: no-repeat;
      box-shadow: 0 10px 22px rgba(15, 23, 42, 0.12);
      transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
      /* Reset browser <button> defaults so the tile matches the div-based whatfits-card siblings */
      font-family: inherit;
      text-align: left;
      color: inherit;
    }

    /* ADU model button images now come via --whatfits-bg inline CSS variable
       so they can share the .whatfits-card--custom styling (banner, zoom, overlay). */

    .adu-model-button--draw-own {
      background-image:
        linear-gradient(165deg, rgba(8, 15, 30, 0.78) 0%, rgba(15, 23, 42, 0.68) 50%, rgba(30, 41, 59, 0.74) 100%),
        url('/parliament-bg.png');
      background-position: center center;
      background-size: cover;
      background-repeat: no-repeat;
      border: 1px solid #334155;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 16px;
    }

    .adu-model-button--draw-own::after {
      display: none;
    }

    .adu-model-button--draw-own .adu-model-button-label {
      position: static;
      left: auto;
      right: auto;
      bottom: auto;
      text-align: center;
      width: 100%;
      color: #f8fafc;
      font-size: 20px;
      font-weight: 800;
      letter-spacing: 0.01em;
      line-height: 1.25;
      text-shadow: 0 2px 12px rgba(2, 6, 23, 0.85), 0 0 2px rgba(15, 23, 42, 0.9);
    }

    /* Legacy .adu-model-button::after gradient removed, the .whatfits-card--custom::after
       rule now provides the overlay for ADU model buttons that opt into that styling.
       The draw-my-own variant keeps its own background (set inline below). */

    .adu-model-button:not(.whatfits-card--custom):hover {
      transform: translateY(-1px);
      box-shadow: 0 14px 26px rgba(15, 23, 42, 0.18);
      border-color: #c5d0e3;
    }

    /* Contractor logo, pinned to bottom-right of each coach-home tile.
       !important is needed to beat .whatfits-card--custom > * which otherwise
       pulls the badge back into the flex flow as position: relative. */
    .adu-model-ogc-badge {
      position: absolute !important;
      bottom: 10px;
      right: 10px;
      left: auto;
      top: auto;
      width: 32px;
      height: 32px;
      border-radius: 7px;
      background: rgba(255,255,255,0.96);
      padding: 4px;
      z-index: 4;
      box-shadow: 0 2px 8px rgba(0,0,0,0.25);
      object-fit: contain;
      pointer-events: none;
    }

    /* Coach home tile nurture pulse removed, the constant glow + scale on
       every catalogue tile read as anxious / loading. The body class
       cta-nurture-adu is still set elsewhere; we just no longer paint an
       animation on the tiles for it. */

    .adu-model-button-label {
      position: absolute;
      left: 14px;
      right: 14px;
      bottom: 28px;
      z-index: 1;
      color: #ffffff;
      font-size: 22px;
      font-weight: 800;
      letter-spacing: 0.01em;
      line-height: 1.1;
      text-align: left;
      text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
    }

    .adu-model-button-meta {
      position: absolute;
      left: 14px;
      right: 14px;
      bottom: 8px;
      z-index: 1;
      color: #f8fafc;
      text-align: left;
      text-shadow: 0 2px 8px rgba(0, 0, 0, 0.42);
      display: flex;
      flex-direction: row;
      align-items: flex-end;
      justify-content: space-between;
      gap: 10px;
    }

    .adu-model-button-size {
      display: block;
      font-size: 9px;
      font-weight: 600;
      line-height: 1.15;
    }

    .adu-model-button-fit {
      display: block;
      min-height: 18px;
      font-size: 17px;
      font-weight: 800;
      letter-spacing: 0.04em;
      color: #86efac;
      text-transform: uppercase;
      text-align: right;
    }

    .adu-model-draw-own-wrap {
      margin-top: 14px;
      display: flex;
      justify-content: center;
    }

    .adu-model-draw-own-btn {
      border: 1px solid #d1d5db;
      border-radius: 10px;
      background: #ffffff;
      color: #0f172a;
      font-size: 13px;
      font-weight: 700;
      padding: 10px 14px;
      cursor: pointer;
      transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
    }

    .adu-model-draw-own-btn:hover {
      border-color: #94a3b8;
      box-shadow: 0 4px 12px rgba(15, 23, 42, 0.12);
      transform: translateY(-1px);
    }

    /* ── What-Fits Cards (Custom Home + Multiplex) ──────────────────── */
    .whatfits-cards-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      margin-bottom: 14px;
    }
    @media (max-width: 480px) {
      .whatfits-cards-grid { grid-template-columns: 1fr; }
    }

    /* Custom home realtor-style showcase (appears when a template is clicked) */
    .custom-home-showcase {
      margin: 14px 0 10px;
      border-radius: 14px;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      box-shadow: 0 10px 28px rgba(15,23,42,0.10);
      overflow: hidden;
      animation: showcaseFadeIn 0.35s ease-out both;
    }
    @keyframes showcaseFadeIn {
      from { opacity: 0; transform: translateY(6px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    .custom-home-showcase__frame {
      position: relative;
      width: 100%;
      aspect-ratio: 16 / 9;
      overflow: hidden;
      background: #f1f5f9;
    }
    .custom-home-showcase__img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
    .custom-home-showcase__meta {
      padding: 16px 18px 18px;
    }
    .custom-home-showcase__label {
      font-size: 18px;
      font-weight: 800;
      color: #0f172a;
      letter-spacing: -0.01em;
      line-height: 1.2;
    }
    .custom-home-showcase__tagline {
      font-size: 12px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: #c8102e;
      margin-top: 4px;
    }
    .custom-home-showcase__desc {
      font-size: 14px;
      line-height: 1.6;
      color: #334155;
      margin: 10px 0 0;
    }
    .whatfits-card {
      position: relative;
      border-radius: 14px;
      border: 1px solid #e2e8f0;
      background: #fff;
      padding: 14px 14px 12px;
      cursor: pointer;
      transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
    }
    .whatfits-card:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 20px rgba(15,23,42,0.10);
      border-color: #cbd5e1;
    }
    .whatfits-card-title {
      font-size: 14px;
      font-weight: 700;
      color: #0f172a;
      line-height: 1.2;
    }
    .whatfits-card-dims {
      font-size: 12px;
      color: #64748b;
      margin-top: 3px;
      font-weight: 500;
    }
    .whatfits-card-area {
      font-size: 20px;
      font-weight: 800;
      color: #0f172a;
      margin-top: 6px;
      line-height: 1.1;
    }
    .whatfits-card-area small {
      font-size: 12px;
      font-weight: 600;
      color: #64748b;
      display: block;
      margin-top: 2px;
    }
    /* Suppress the fit-status sentence on garden-suite / addition tiles, 
       the long copy ("A garden suite like this would work on your lot.")
       belongs on the post-click detail frame, not on every grid tile. The
       tier badge at the top of the card (FITS / TIGHT / WON'T FIT) already
       carries the same signal in one short word. */
    .whatfits-card--custom .whatfits-card-area { display: none; }
    .whatfits-card-badge {
      position: absolute;
      top: 10px;
      right: 10px;
      font-size: 10px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      padding: 3px 8px;
      border-radius: 6px;
    }
    .whatfits-card-badge--fits {
      background: #dcfce7;
      color: #166534;
    }
    .whatfits-card-badge--tight {
      background: #fef9c3;
      color: #854d0e;
    }
    .whatfits-card-badge--no {
      background: #fee2e2;
      color: #991b1b;
    }
    /* Hard zoning failure, the prebuilt's footprint exceeds the legal cap
       for this lot (drawTestRules.adu.maxAllowedAreaSqM). Deeper red than
       "no" so users see at a glance that this isn't a placement issue, it's
       a regulatory ceiling. */
    .whatfits-card-badge--beyond-legal {
      background: #7f1d1d;
      color: #fff;
      letter-spacing: 0.04em;
    }
    .whatfits-card-place {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      margin-top: 8px;
      font-size: 11px;
      font-weight: 700;
      color: #c8102e;
      letter-spacing: 0.02em;
      text-transform: uppercase;
    }
    /* Won't-fit cards stay dimmed visually so the user knows the model
       doesn't comfortably fit, but clicks are NOT blocked, the user may
       still want to view the showcase, drag the polygon, or run the
       placement to see how close it gets. The previous pointer-events:none
       made these cards feel broken. */
    .whatfits-card.whatfits-card--disabled {
      opacity: 0.62;
    }
    .whatfits-card.whatfits-card--disabled:hover {
      opacity: 0.78;
    }
    /* ── Image-backed custom home cards ─────────────────────────────
       Each card uses its template image as a background; an inner ::before
       holds the image so it can zoom on hover independently of text.
       A dark gradient ::after keeps foreground text readable on any photo. */
    .whatfits-card--custom {
      position: relative;
      overflow: hidden;
      min-height: 180px;
      padding: 14px 14px 14px;
      background: #0f172a;  /* dark fallback while image loads */
      border: 1px solid rgba(15,23,42,0.25);
      color: #ffffff;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
    }
    .whatfits-card--custom::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image: var(--whatfits-bg);
      background-size: cover;
      background-position: center;
      transform: scale(1.01);
      transition: transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1);
      z-index: 0;
    }
    .whatfits-card--custom::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg,
        rgba(15,23,42,0.05) 0%,
        rgba(15,23,42,0.35) 45%,
        rgba(15,23,42,0.82) 100%);
      z-index: 1;
      pointer-events: none;
    }
    .whatfits-card--custom:hover::before {
      transform: scale(1.10);
    }
    /* Inline fit-preview SVG: instant visual of the template rectangle
       centered on the user's buildable envelope, so fit/tight/won't-fit
       is verifiable at a glance against the real lot geometry. Selector
       needs extra specificity to beat `.whatfits-card--custom > *`. */
    .whatfits-card--custom > .whatfits-card-svg-wrap {
      position: absolute;
      top: 38px;
      right: 10px;
      z-index: 3;
      width: 76px;
      height: 76px;
      padding: 4px;
      border-radius: 10px;
      background: rgba(255, 255, 255, 0.88);
      box-shadow: 0 2px 6px rgba(15,23,42,0.18);
      backdrop-filter: blur(3px);
      -webkit-backdrop-filter: blur(3px);
      pointer-events: none;
    }
    .whatfits-card-svg {
      width: 100%;
      height: 100%;
      display: block;
    }
    @media (max-width: 520px) {
      .whatfits-card--custom > .whatfits-card-svg-wrap {
        width: 60px;
        height: 60px;
        top: 34px;
        right: 8px;
      }
    }
    .whatfits-card--custom:hover {
      box-shadow: 0 14px 32px rgba(15,23,42,0.28);
      border-color: rgba(15,23,42,0.4);
    }
    /* Lift all foreground content above the image + overlay */
    .whatfits-card--custom > * {
      position: relative;
      z-index: 2;
    }
    /* Status banner, full-width stripe across the top of the card */
    .whatfits-card--custom .whatfits-card-badge {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      z-index: 3;
      padding: 6px 12px;
      border-radius: 0;
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.12em;
      text-align: center;
      box-shadow: 0 2px 8px rgba(0,0,0,0.18);
    }
    /* Reserve room at the top of the card so content doesn't slide under the banner */
    .whatfits-card--custom {
      padding-top: 34px;
    }
    .whatfits-card--custom .whatfits-card-title {
      color: #ffffff;
      font-size: 16px;
      font-weight: 800;
      letter-spacing: -0.01em;
      text-shadow: 0 1px 3px rgba(0,0,0,0.55);
    }
    .whatfits-card--custom .whatfits-card-dims {
      color: rgba(255,255,255,0.92);
      font-weight: 600;
      text-shadow: 0 1px 2px rgba(0,0,0,0.5);
    }
    .whatfits-card--custom .whatfits-card-area {
      font-size: 12px;
      line-height: 1.4;
      font-weight: 700;
      text-shadow: 0 1px 3px rgba(0,0,0,0.6);
      margin-top: 6px;
    }
    .whatfits-card--custom .whatfits-card-area--fits         { color: #bbf7d0; }
    .whatfits-card--custom .whatfits-card-area--tight        { color: #fde68a; }
    .whatfits-card--custom .whatfits-card-area--no           { color: #fecaca; }
    .whatfits-card--custom .whatfits-card-area--beyond-legal { color: #fecaca; }
    .whatfits-card--custom .whatfits-card-place {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      margin-top: 10px;
      padding: 5px 10px;
      border-radius: 999px;
      background: rgba(200,16,46,0.95);
      color: #ffffff;
      font-weight: 800;
      letter-spacing: 0.04em;
      align-self: flex-start;
      box-shadow: 0 4px 12px rgba(200,16,46,0.35);
    }
    /* Disabled (won't-fit) custom cards get a dimmer look but keep the image */
    .whatfits-card--custom.whatfits-card--disabled::after {
      background: linear-gradient(180deg,
        rgba(15,23,42,0.4) 0%,
        rgba(15,23,42,0.7) 60%,
        rgba(15,23,42,0.85) 100%);
    }
    .whatfits-card--multiplex {
      grid-column: 1 / -1;
    }
    .whatfits-cards-grid:has(.whatfits-card--multiplex) {
      grid-template-columns: 1fr;
    }
    .whatfits-finance-section {
      margin-top: 10px;
      padding-top: 10px;
      border-top: 1px solid #e2e8f0;
    }
    .whatfits-livein-section {
      margin-top: 8px;
      padding-top: 8px;
      border-top: 1px dashed #e2e8f0;
    }
    .whatfits-finance-label {
      font-size: 10px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: #94a3b8;
      margin-bottom: 6px;
    }
    .whatfits-finance-row {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      font-size: 13px;
      line-height: 1.6;
    }
    .whatfits-finance-row span:first-child {
      color: #64748b;
      font-weight: 500;
    }
    .whatfits-finance-row span:last-child {
      color: #0f172a;
      font-weight: 700;
    }
    .whatfits-finance-row--sub {
      font-size: 11px;
      opacity: 0.65;
    }
    .whatfits-finance-row--sub span:last-child {
      font-weight: 500;
    }
    .whatfits-exception-banner {
      grid-column: 1 / -1;
      padding: 10px 14px;
      border-radius: 10px;
      background: #fefce8;
      border: 1px solid #fde68a;
      font-size: 12px;
      color: #854d0e;
      line-height: 1.5;
    }
    .whatfits-adu-banner {
      grid-column: 1 / -1;
      padding: 12px 14px;
      border-radius: 10px;
      background: linear-gradient(135deg, #ecfdf5, #f0fdf4);
      border: 1px solid #86efac;
    }
    .whatfits-adu-banner-title {
      font-size: 13px;
      font-weight: 700;
      color: #166534;
      margin-bottom: 4px;
    }
    .whatfits-adu-banner-body {
      font-size: 12px;
      color: #15803d;
      line-height: 1.5;
    }
    .whatfits-adu-addon {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 8px;
      padding: 8px 10px;
      border-radius: 8px;
      background: #ecfdf5;
      border: 1px solid #bbf7d0;
      font-size: 12px;
      font-weight: 600;
      color: #166534;
    }
    .whatfits-afford-section {
      margin-top: 8px;
      padding: 10px 12px;
      border-radius: 10px;
      background: #f0fdf4;
      border: 1px solid #bbf7d0;
    }
    .whatfits-afford-section .whatfits-finance-label {
      color: #166534;
    }
    .whatfits-card-customize {
      cursor: pointer;
      border-top: 1px solid #e2e8f0;
      padding-top: 8px;
    }
    .whatfits-comparison-banner {
      grid-column: 1 / -1;
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 14px;
      border-radius: 10px;
      background: #f0fdf4;
      border: 1px solid #bbf7d0;
      font-size: 13px;
      color: #166534;
    }
    .whatfits-comparison-icon {
      font-size: 20px;
      line-height: 1;
    }

    /* ══════════════════════════════════════════════════════════════════
       Multiplex Recommendation UI, progressive-disclosure redesign
       ══════════════════════════════════════════════════════════════════ */

    /* ── Fade-in animation ── */
    .mplx-fade-in {
      opacity: 0;
      transform: translateY(14px);
      animation: mplxFadeIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    }
    @keyframes mplxFadeIn {
      to { opacity: 1; transform: translateY(0); }
    }
    .mplx-fade-delay-1 { animation-delay: 0.07s; }
    .mplx-fade-delay-2 { animation-delay: 0.14s; }
    .mplx-fade-delay-3 { animation-delay: 0.21s; }
    .mplx-fade-delay-4 { animation-delay: 0.28s; }

    /* ── Occupancy toggle ── */
    .mplx-occupancy-toggle {
      display: inline-flex;
      border-radius: 10px;
      background: #f1f5f9;
      padding: 3px;
      gap: 2px;
    }
    .mplx-occupancy-toggle__btn {
      padding: 7px 14px;
      border: none;
      border-radius: 8px;
      background: transparent;
      font-size: 12px;
      font-weight: 600;
      color: #64748b;
      cursor: pointer;
      transition: all 0.2s ease;
      white-space: nowrap;
    }
    .mplx-occupancy-toggle__btn:hover {
      color: #0f172a;
    }
    .mplx-occupancy-toggle__btn--active {
      background: #fff;
      color: #0f172a;
      box-shadow: 0 1px 3px rgba(15,23,42,0.08);
    }

    /* ── Hero card ── */
    .mplx-hero {
      position: relative;
      border-radius: 16px;
      background: #fff;
      border: 1px solid #d1fae5;
      border-left: 4px solid #059669;
      padding: 0;
      box-shadow: 0 4px 24px rgba(5,150,105,0.08), 0 1px 3px rgba(15,23,42,0.06);
      transition: box-shadow 0.3s ease;
    }
    .mplx-hero:hover {
      box-shadow: 0 8px 32px rgba(5,150,105,0.12), 0 2px 6px rgba(15,23,42,0.08);
    }
    .mplx-hero__inner {
      padding: 20px 20px 16px;
    }
    .mplx-hero__top-row {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 10px;
      margin-bottom: 4px;
    }
    .mplx-hero__badge {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 4px 10px;
      border-radius: 8px;
      background: #ecfdf5;
      color: #059669;
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      white-space: nowrap;
    }
    .mplx-hero__badge--neutral {
      background: #f1f5f9;
      color: #0f172a;
    }
    .mplx-hero__badge--warn {
      background: #fef3f2;
      color: #b42318;
    }
    .mplx-hero__badge svg {
      width: 13px;
      height: 13px;
      flex-shrink: 0;
    }
    /* When the hero config is negative, tone down the card framing so the
       celebratory "best legal option" accent doesn't fight the actual
       cash-flow warning. Neutral = soft grey edge, warn = amber edge. */
    .mplx-hero.mplx-hero--neutral {
      border-color: #cbd5e1;
      background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    }
    .mplx-hero.mplx-hero--warn {
      border-color: #fca5a5;
      background: linear-gradient(180deg, #ffffff 0%, #fef2f2 100%);
    }
    /* Effective-position note under the hero outcome, explains the
       rent-savings context when the user is "living in 1 unit". */
    .mplx-hero__effective {
      margin: 4px 0 10px;
      padding: 8px 12px;
      border-radius: 8px;
      font-size: 12.5px;
      line-height: 1.4;
      background: #f8fafc;
      color: #475569;
      border: 1px solid #e2e8f0;
    }
    .mplx-hero__effective--positive strong { color: #059669; }
    .mplx-hero__effective--negative strong { color: #b45309; }
    /* Dimmed CTA for non-positive cash-flow states, still clickable,
       but stops being a bright red "go do this" trigger on a loser. */
    .mplx-hero__cta.mplx-hero__cta--muted {
      background: #475569;
      box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12);
    }
    .mplx-hero__cta.mplx-hero__cta--muted:hover {
      background: #334155;
    }
    /* Property Value KPI strip, three-box headline summary placed above
       the cash-flow verdict banner. First box (Property Value Increase)
       is the primary signal: green, dollar increase is the largest
       element, % shown directly under. Second box (After-Project Value)
       is neutral. Third box (Monthly Cash Flow) takes a red/green/amber
       left-border accent based on sign, kept visually distinct from
       the green "value upside" so the homeowner doesn't conflate the two. */
    .mplx-hero__kpi-strip {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 10px;
      margin: 8px 0 12px;
    }
    /* Narrow viewports: drop to 2x2, then 1x4 on phones. */
    @media (max-width: 900px) {
      .mplx-hero__kpi-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }
    @media (max-width: 480px) {
      .mplx-hero__kpi-strip {
        grid-template-columns: 1fr;
        gap: 8px;
      }
    }
    .mplx-hero__kpi {
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 10px 12px;
      min-width: 0;
    }
    .mplx-hero__kpi--value {
      background: #f0fdf4;
      border-color: #bbf7d0;
    }
    .mplx-hero__kpi-label {
      font-size: 10.5px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: #64748b;
      margin-bottom: 6px;
      line-height: 1.2;
    }
    .mplx-hero__kpi--value .mplx-hero__kpi-label { color: #047857; }
    .mplx-hero__kpi-amount {
      font-size: clamp(15px, 2.1vw, 19px);
      font-weight: 800;
      line-height: 1.1;
      color: #059669;
      letter-spacing: -0.01em;
    }
    /* Percentage line is intentionally smaller than the dollar amount so
       the eye lands on $ first ("$3.9M-$6.1M" reads before "+421%").
       Per UX spec: lead with dollar increase, percentage second. */
    .mplx-hero__kpi-pct {
      font-size: 11.5px;
      font-weight: 700;
      color: #047857;
      margin-top: 2px;
    }
    .mplx-hero__kpi-amount-neutral {
      font-size: clamp(14px, 1.9vw, 17px);
      font-weight: 800;
      line-height: 1.1;
      color: #0f172a;
      letter-spacing: -0.01em;
    }
    .mplx-hero__kpi-amount-cash {
      font-size: clamp(12px, 1.7vw, 14px);
      font-weight: 800;
      line-height: 1.2;
      letter-spacing: -0.005em;
    }
    .mplx-hero__kpi-helper {
      font-size: 10.5px;
      color: #94a3b8;
      margin-top: 5px;
      line-height: 1.35;
    }
    /* Progressive-disclosure "Why" block, single plain-English sentence
       that carries the main message above the collapsed lender/risk
       accordion. Average homeowner reads this and decides; serious
       investors expand the accordion below for the full DSCR / break-
       even / levers detail. Neutral grey backdrop so it reads as
       explanation, not warning (the verdict pill above already carries
       the warning colour). */
    .mplx-hero__why {
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 10px 14px;
      margin: 4px 0 8px;
    }
    .mplx-hero__why-header {
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: #64748b;
      margin-bottom: 4px;
    }
    .mplx-hero__why-line {
      font-size: 13px;
      font-weight: 500;
      color: #334155;
      line-height: 1.5;
    }

    /* Insights trigger, same styling as other .mplx-accordion-trigger
       buttons but smaller / softer since this is a secondary action
       ("expand for more detail") rather than the primary detail accordion. */
    .mplx-hero__insights-trigger {
      font-size: 12.5px !important;
      color: #475569 !important;
      margin-top: 2px;
      margin-bottom: 8px;
    }

    /* Insights body, the 3-card grid that now sits behind the accordion.
       Same visual treatment as the previous always-visible row, just
       wrapped in the collapsible container. */
    .mplx-hero__insights {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
      gap: 10px;
      margin-bottom: 4px;
    }
    .mplx-hero__insights-card {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 10px 12px;
    }
    .mplx-hero__insights-card-label {
      font-size: 11px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: #64748b;
      margin-bottom: 4px;
    }
    .mplx-hero__insights-card-text {
      font-size: 12.5px;
      color: #334155;
      line-height: 1.45;
    }

    .mplx-hero__title {
      font-size: 19px;
      font-weight: 800;
      color: #0f172a;
      line-height: 1.25;
      margin: 8px 0 2px;
      font-family: 'Sora', sans-serif;
    }
    .mplx-hero__subtitle {
      font-size: 13px;
      color: #64748b;
      line-height: 1.45;
      margin-bottom: 14px;
    }
    .mplx-hero__outcome-block {
      display: flex;
      align-items: baseline;
      gap: 8px;
      margin-bottom: 16px;
    }
    .mplx-hero__outcome {
      font-size: 32px;
      font-weight: 800;
      line-height: 1;
      font-family: 'Sora', sans-serif;
      letter-spacing: -0.02em;
    }
    .mplx-hero__outcome--positive { color: #059669; }
    .mplx-hero__outcome--negative { color: #dc2626; }
    .mplx-hero__outcome-label {
      font-size: 12px;
      font-weight: 600;
      color: #94a3b8;
      text-transform: uppercase;
      letter-spacing: 0.04em;
    }

    /* ── Engine-inputs footnote ──
       Rendered at the very top of the multiplex panel so sophisticated
       users can see EXACTLY which engine outputs drive the configs below
       (lot area, envelope, max height, unit floor). Also explains why the
       multiplex panel can legitimately show a bigger building than the
       main panel's "Max GFA" for Toronto addresses (multiplex is FSI-
       exempt per 569-2013 s.10.20.40.40). */
    .mplx-engine-note {
      margin: 4px 0 14px;
      padding: 10px 14px;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-left: 3px solid #64748b;
      border-radius: 8px;
      font-size: 12px;
      color: #475569;
      line-height: 1.5;
    }
    .mplx-engine-note__title {
      font-size: 10.5px;
      font-weight: 800;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: #475569;
      margin-bottom: 4px;
    }
    .mplx-engine-note__grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
      gap: 2px 16px;
      margin-bottom: 6px;
      color: #0f172a;
    }
    .mplx-engine-note__grid b { color: #475569; font-weight: 700; }
    .mplx-engine-note__body {
      color: #64748b;
      font-size: 11.5px;
      line-height: 1.45;
    }
    @media (max-width: 640px) {
      .mplx-engine-note__grid { grid-template-columns: 1fr 1fr; }
    }
    /* Blocked state when parcel data is unreliable, make it visually
       distinct from the normal engine-note so users don't assume anything
       below it is real. */
    .mplx-engine-note.mplx-engine-note--blocked {
      border-left-color: #dc2626;
      background: #fef2f2;
      margin: 8px 0;
      padding: 14px 16px;
    }
    .mplx-engine-note.mplx-engine-note--blocked .mplx-engine-note__title {
      color: #b91c1c;
      font-size: 13px;
    }

    /* ── Scenario-optimizer lever strip ──
       Lives ABOVE every multiplex card and applies to all scenarios
       globally. Each lever is a native checkbox styled as a chip; checked
       state uses brand maple-red. Disabled levers stay visible but can
       still be toggled, the chip describes which configs they affect. */
    .mplx-levers {
      margin: 4px 0 16px;
      padding: 14px 16px 10px;
      background: #fafaf7;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      position: relative;
    }
    /* Global variant, more emphasis to read as top-level controls. */
    .mplx-levers--global {
      margin: 8px 0 20px;
      padding: 18px 20px 14px;
      background: linear-gradient(180deg, #ffffff 0%, #fafaf7 100%);
      border: 1px solid #e2e8f0;
      border-left: 4px solid #c8102e;
      border-radius: 14px;
      box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06);
    }
    .mplx-levers__caption {
      font-size: 12px;
      color: #64748b;
      margin: -4px 0 12px;
      line-height: 1.4;
    }
    .mplx-levers__title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 10px;
    }
    .mplx-levers__heading {
      font-family: 'Sora', sans-serif;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: #64748b;
    }
    .mplx-levers__info-btn {
      appearance: none;
      border: 1px solid #e2e8f0;
      background: #ffffff;
      color: #475569;
      font-size: 11px;
      font-weight: 600;
      padding: 3px 10px;
      border-radius: 999px;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 5px;
      transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    }
    .mplx-levers__info-btn:hover,
    .mplx-levers__info-btn[aria-expanded="true"] {
      background: #fef2f2;
      border-color: #fecaca;
      color: #b91c1c;
    }
    .mplx-levers__info-btn svg {
      width: 12px;
      height: 12px;
    }
    .mplx-levers__grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
    }
    @media (max-width: 640px) {
      .mplx-levers__grid { grid-template-columns: 1fr; }
    }
    .mplx-lever {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      padding: 10px 12px;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 10px;
      cursor: pointer;
      transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
      min-height: 50px;
    }
    .mplx-lever:hover {
      border-color: #cbd5e1;
    }
    .mplx-lever input[type="checkbox"] {
      appearance: none;
      -webkit-appearance: none;
      width: 16px;
      height: 16px;
      margin: 3px 0 0;
      flex-shrink: 0;
      border: 1.5px solid #cbd5e1;
      border-radius: 4px;
      background: #ffffff;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      transition: border-color 0.15s ease, background 0.15s ease;
    }
    .mplx-lever input[type="checkbox"]:checked {
      background: #c8102e;
      border-color: #c8102e;
    }
    .mplx-lever input[type="checkbox"]:checked::after {
      content: '';
      width: 4px;
      height: 8px;
      margin-top: -2px;
      border: solid #ffffff;
      border-width: 0 2px 2px 0;
      transform: rotate(45deg);
    }
    .mplx-lever input[type="checkbox"]:focus-visible {
      outline: 2px solid #c8102e;
      outline-offset: 2px;
    }
    .mplx-lever__body {
      flex: 1;
      min-width: 0;
    }
    .mplx-lever__label {
      font-family: 'Sora', sans-serif;
      font-size: 13px;
      font-weight: 600;
      color: #0f172a;
      line-height: 1.25;
      display: block;
    }
    .mplx-lever__delta {
      font-size: 11px;
      font-weight: 700;
      color: #0f766e;
      margin-left: 6px;
      display: inline;
    }
    .mplx-lever__delta--neg { color: #b91c1c; }
    .mplx-lever__chip {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      margin-top: 4px;
      font-size: 10.5px;
      font-weight: 600;
      letter-spacing: 0.02em;
      color: #64748b;
    }
    .mplx-lever__chip--ok { color: #047857; }
    .mplx-lever__chip--warn { color: #b45309; }
    .mplx-lever__chip--disabled { color: #94a3b8; }
    .mplx-lever.is-active {
      background: #fff7f7;
      border-color: #fecaca;
      box-shadow: 0 0 0 1px rgba(200, 16, 46, 0.06);
    }
    .mplx-lever.is-disabled {
      opacity: 0.6;
      cursor: not-allowed;
      background: repeating-linear-gradient(45deg, #ffffff 0, #ffffff 6px, #fafafa 6px, #fafafa 12px);
    }
    .mplx-lever.is-disabled input[type="checkbox"] {
      cursor: not-allowed;
    }
    .mplx-lever__auto-badge {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 2px 8px;
      border-radius: 999px;
      background: #ecfdf5;
      border: 1px solid #a7f3d0;
      color: #047857;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      margin-left: 6px;
      vertical-align: middle;
    }

    /* Info wrapper, relative anchor so the popover appears directly below
       the "What do these mean?" button instead of floating below the whole
       levers block. This eliminates the disjointed gap. */
    .mplx-levers__info-wrap {
      position: relative;
      display: inline-flex;
    }

    /* Popover explaining each lever. Anchored to the info-wrap, appearing
       directly below the trigger button with a caret visually connecting them. */
    .mplx-levers__popover {
      position: absolute;
      top: calc(100% + 10px);
      right: 0;
      width: min(440px, calc(100vw - 24px));
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      box-shadow: 0 20px 40px rgba(15, 23, 42, 0.16);
      padding: 16px 18px;
      z-index: 30;
      display: none;
      /* Slide+fade in when it opens */
      transform-origin: top right;
    }
    .mplx-levers__popover.is-visible {
      display: block;
      animation: mplxPopIn 0.18s cubic-bezier(0.2, 0.8, 0.25, 1.02) both;
    }
    @keyframes mplxPopIn {
      0%   { opacity: 0; transform: translateY(-6px) scale(0.98); }
      100% { opacity: 1; transform: translateY(0) scale(1); }
    }
    /* Caret, a small diamond anchored to the right of the popover, pointing
       up to the info button. Uses two pseudo-rules: one for the border, one
       for the fill, so we get a clean bordered triangle at any zoom level. */
    .mplx-levers__popover::before,
    .mplx-levers__popover::after {
      content: '';
      position: absolute;
      right: 22px;
      width: 12px;
      height: 12px;
      transform: rotate(45deg);
      pointer-events: none;
    }
    .mplx-levers__popover::before {
      top: -7px;
      background: #e2e8f0; /* border colour */
      box-shadow: -1px -1px 3px rgba(15,23,42,0.04);
    }
    .mplx-levers__popover::after {
      top: -6px;
      background: #ffffff; /* inner fill, one pixel below the border */
    }
    @media (prefers-reduced-motion: reduce) {
      .mplx-levers__popover.is-visible { animation: none; }
    }
    .mplx-levers__popover h4 {
      font-family: 'Sora', sans-serif;
      font-size: 13px;
      font-weight: 700;
      color: #0f172a;
      margin: 0 0 4px;
    }
    .mplx-levers__popover p {
      font-size: 12px;
      color: #334155;
      line-height: 1.5;
      margin: 0 0 12px;
    }
    .mplx-levers__popover a {
      color: #c8102e;
      font-weight: 600;
      text-decoration: none;
    }
    .mplx-levers__popover a:hover { text-decoration: underline; }
    .mplx-levers__popover hr {
      border: none;
      border-top: 1px solid #f1f5f9;
      margin: 10px 0;
    }
    .mplx-levers__popover__close {
      position: absolute;
      top: 8px;
      right: 8px;
      appearance: none;
      background: transparent;
      border: none;
      color: #94a3b8;
      cursor: pointer;
      font-size: 18px;
      line-height: 1;
      padding: 4px 8px;
    }
    .mplx-levers__popover__close:hover { color: #0f172a; }

    /* Auto-applied programs shown as permanent badges (non-interactive) */
    .mplx-auto-programs {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-top: 10px;
      padding-top: 10px;
      border-top: 1px dashed #e2e8f0;
    }
    .mplx-auto-program {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 3px 10px;
      background: #ecfdf5;
      border: 1px solid #a7f3d0;
      border-radius: 999px;
      font-size: 11px;
      font-weight: 600;
      color: #047857;
    }

    /* ── Scenario optimizer entry + wizard modal ──────────────────────── */
    /* Replaces the always-visible lever strip + your-specifics accordion.
       The entry block is a single compact row above the hero card; the
       wizard itself is a modal overlay opened by clicking "Tune Scenario". */
    /* The scenario entry is the primary CTA for the multi-unit tab, 
       homeowners need to feel "this is where I take action". The button
       is intentionally large (clear pointer target on mobile, pulses
       gently on hover) and the row has a subtle gradient lift so it
       reads as actionable, not informational. */
    .mplx-scenario-entry {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 14px 20px;
      margin: 0 0 18px;
      padding: 16px 18px;
      background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
      border: 1px solid #cbd5e1;
      border-radius: 12px;
      box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04);
    }
    /* Left half, page-purpose headline + one-line subtitle. Wraps
       below the CTA on narrow viewports thanks to the parent's
       flex-wrap; takes whatever width remains beside the button. */
    .mplx-scenario-entry__intro {
      flex: 1 1 260px;
      min-width: 0;
    }
    .mplx-scenario-entry__title {
      margin: 0 0 2px;
      font-size: 16px;
      font-weight: 700;
      line-height: 1.3;
      color: #0f172a;
    }
    .mplx-scenario-entry__sub {
      margin: 0;
      font-size: 12.5px;
      line-height: 1.4;
      color: #64748b;
    }
    .mplx-scenario-entry__btn {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 14px 22px;
      background: #dc2626;
      color: #fff;
      border: none;
      border-radius: 10px;
      font-size: 15px;
      font-weight: 700;
      letter-spacing: 0.01em;
      cursor: pointer;
      box-shadow: 0 4px 12px rgba(220, 38, 38, 0.30), 0 1px 0 rgba(15, 23, 42, 0.05);
      transition: background 120ms ease, box-shadow 120ms ease;
      /* Periodic bounce to draw the eye every few seconds. The keyframe
         spends most of the cycle at rest so the motion is a heartbeat,
         not a constant jitter. Pauses on hover so the user can click
         a steady target. */
      animation: mplx-cta-bounce 3s ease-in-out 1s infinite;
    }
    .mplx-scenario-entry__btn:hover {
      background: #b91c1c;
      animation-play-state: paused;
      box-shadow: 0 6px 16px rgba(220, 38, 38, 0.40), 0 1px 0 rgba(15, 23, 42, 0.05);
    }
    .mplx-scenario-entry__btn:active {
      animation-play-state: paused;
      box-shadow: 0 2px 6px rgba(220, 38, 38, 0.28);
    }
    .mplx-scenario-entry__btn:focus-visible {
      outline: 3px solid rgba(220, 38, 38, 0.40);
      outline-offset: 2px;
    }
    @keyframes mplx-cta-bounce {
      0%, 70%, 100% { transform: translateY(0); }
      80%          { transform: translateY(-6px); }
      90%          { transform: translateY(-2px); }
    }
    @media (prefers-reduced-motion: reduce) {
      .mplx-scenario-entry__btn { animation: none; }
    }
    .mplx-scenario-entry__btn svg {
      width: 20px;
      height: 20px;
      stroke: currentColor;
      fill: none;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
    /* Sub-label under the CTA copy, homeowners need to know what they
       will get. Lives inside the button so it reads as one action. */
    .mplx-scenario-entry__btn-sub {
      display: block;
      font-size: 11px;
      font-weight: 500;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: rgba(255, 255, 255, 0.85);
      margin-top: 2px;
    }
    .mplx-scenario-entry__btn-stack {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 0;
      line-height: 1.1;
    }
    .mplx-scenario-entry__pill {
      display: inline-flex;
      align-items: center;
      padding: 3px 10px;
      background: #e2e8f0;
      border: 1px solid #cbd5e1;
      border-radius: 999px;
      font-size: 11px;
      font-weight: 600;
      color: #334155;
    }
    .mplx-scenario-entry__autoprograms {
      display: inline-flex;
      flex-wrap: wrap;
      gap: 4px;
      margin-left: auto;
    }
    .mplx-scenario-entry__autoprogram {
      display: inline-flex;
      align-items: center;
      padding: 2px 8px;
      background: #ecfdf5;
      border: 1px solid #a7f3d0;
      border-radius: 999px;
      font-size: 10.5px;
      font-weight: 600;
      color: #047857;
    }

    /* Modal overlay + panel, fixed-position, full-screen tint, centered card */
    .mplx-wizard {
      position: fixed;
      inset: 0;
      /* Above the sticky site header (z-index: 2000) so the modal
         overlay covers the navigation bar instead of being clipped
         under it. */
      z-index: 2500;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 16px;
    }
    .mplx-wizard[hidden] { display: none; }
    .mplx-wizard__overlay {
      position: absolute;
      inset: 0;
      background: rgba(15, 23, 42, 0.55);
      cursor: pointer;
    }
    .mplx-wizard__panel {
      position: relative;
      width: 100%;
      max-width: 620px;
      max-height: calc(100vh - 32px);
      display: flex;
      flex-direction: column;
      background: #fff;
      border-radius: 14px;
      box-shadow: 0 24px 64px rgba(15, 23, 42, 0.35);
      overflow: hidden;
    }
    .mplx-wizard__header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 16px 20px 12px;
      border-bottom: 1px solid #e2e8f0;
    }
    .mplx-wizard__title {
      margin: 0;
      font-size: 16px;
      font-weight: 700;
      color: #0f172a;
    }
    .mplx-wizard__close {
      appearance: none;
      background: transparent;
      border: none;
      color: #64748b;
      font-size: 22px;
      line-height: 1;
      padding: 4px 8px;
      cursor: pointer;
      border-radius: 6px;
    }
    .mplx-wizard__close:hover { background: #f1f5f9; color: #0f172a; }

    .mplx-wizard__progress {
      display: flex;
      gap: 6px;
      padding: 10px 20px 0;
      align-items: center;
    }
    .mplx-wizard__progress-dot {
      flex: 1;
      height: 4px;
      background: #e2e8f0;
      border-radius: 2px;
      transition: background 120ms ease;
    }
    .mplx-wizard__progress-dot.is-complete { background: #94a3b8; }
    .mplx-wizard__progress-dot.is-current { background: #0f172a; }
    .mplx-wizard__progress-label {
      padding: 6px 20px 0;
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      color: #64748b;
    }

    .mplx-wizard__body {
      flex: 1;
      overflow-y: auto;
      padding: 16px 20px 12px;
    }
    .mplx-wizard__step { display: none; }
    .mplx-wizard__step.is-current { display: block; }
    .mplx-wizard__step-title {
      margin: 0 0 6px;
      font-size: 17px;
      font-weight: 700;
      color: #0f172a;
    }
    .mplx-wizard__step-desc {
      margin: 0 0 16px;
      font-size: 13px;
      line-height: 1.5;
      color: #475569;
    }
    /* Inside-step section group: title + intro + content. Sections sit
       flat inside the wizard panel, no nested borders, just a thin
       divider above each subsequent section so the modal doesn't read
       as boxes-inside-a-box. */
    .mplx-wizard__section {
      margin: 0 0 14px;
      padding: 0;
      background: none;
      border: none;
      border-radius: 0;
    }
    .mplx-wizard__section + .mplx-wizard__section {
      margin-top: 14px;
      padding-top: 14px;
      border-top: 1px solid #eef2f6;
    }
    .mplx-wizard__section:last-child { margin-bottom: 0; }
    .mplx-wizard__section-title {
      font-size: 11.5px;
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: #475569;
      margin: 0 0 8px;
    }
    /* The Scenario Optimizer wrapper (mplx-levers--global) doubles as a
       heavy framed card on the property report. Inside the wizard the
       modal panel already provides the frame, so reset all the box
       styling, bg, border, red left-bar, shadow, padding, to keep
       step content flush with the panel walls. */
    .mplx-wizard .mplx-levers,
    .mplx-wizard .mplx-levers--global {
      margin: 0;
      padding: 0;
      background: none;
      border: none;
      border-left: none;
      border-radius: 0;
      box-shadow: none;
    }
    /* The duplicated SCENARIO OPTIMIZER heading inside step 0 is
       redundant with the modal title, keep the "What do these mean?"
       button visible but flush-right, no eyebrow text. */
    .mplx-wizard .mplx-levers__title {
      margin: 0 0 12px;
      justify-content: flex-end;
    }
    .mplx-wizard .mplx-levers__heading { display: none; }
    /* Lever cards inside the wizard sit on the panel background, so use
       a softer border + neutral background instead of the high-contrast
       white-on-grey treatment used on the report page. */
    .mplx-wizard .mplx-lever {
      background: #fafafa;
      border-color: #e5e7eb;
    }
    .mplx-wizard .mplx-lever:hover { border-color: #cbd5e1; }
    .mplx-wizard .mplx-lever.is-active {
      background: #fff7f7;
      border-color: #fecaca;
    }
    .mplx-wizard__section-desc {
      margin: 0 0 10px;
      font-size: 12px;
      line-height: 1.5;
      color: #475569;
    }
    /* Compact lever grid inside the wizard, overrides the tight
       margin / spacing of the main page strip so the same toggles look
       at home in a stacked-section layout. */
    .mplx-wizard__lever-grid {
      grid-template-columns: 1fr;
      gap: 8px;
    }
    .mplx-wizard__field {
      display: flex;
      flex-direction: column;
      gap: 6px;
      margin-bottom: 14px;
    }
    .mplx-wizard__field-label {
      font-size: 13px;
      font-weight: 600;
      color: #0f172a;
    }
    .mplx-wizard__field-note {
      font-size: 11.5px;
      color: #64748b;
      line-height: 1.4;
    }
    .mplx-wizard__input-wrap {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 8px 10px;
      background: #f8fafc;
      border: 1px solid #cbd5e1;
      border-radius: 8px;
      max-width: 280px;
    }
    .mplx-wizard__input-wrap:focus-within {
      border-color: #0f172a;
      background: #fff;
    }
    .mplx-wizard__input-wrap.is-overridden {
      border-color: #dc2626;
      background: #fef2f2;
    }
    .mplx-wizard__input-wrap input {
      flex: 1;
      min-width: 60px;
      border: none;
      background: transparent;
      font-size: 14px;
      font-weight: 500;
      color: #0f172a;
      outline: none;
    }
    .mplx-wizard__input-wrap .mplx-wizard__prefix,
    .mplx-wizard__input-wrap .mplx-wizard__suffix {
      font-size: 12px;
      color: #64748b;
    }

    /* Toggle row, checkbox + label + chip */
    .mplx-wizard__toggle {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      padding: 10px 12px;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      margin-bottom: 8px;
      cursor: pointer;
      transition: border-color 120ms ease, background 120ms ease;
    }
    .mplx-wizard__toggle:hover { border-color: #cbd5e1; }
    .mplx-wizard__toggle.is-active {
      border-color: #0f172a;
      background: #fff;
    }
    .mplx-wizard__toggle.is-disabled {
      opacity: 0.55;
      cursor: not-allowed;
    }
    .mplx-wizard__toggle input[type="checkbox"] {
      flex: 0 0 18px;
      width: 18px;
      height: 18px;
      margin-top: 1px;
      accent-color: #0f172a;
      cursor: pointer;
    }
    .mplx-wizard__toggle.is-disabled input[type="checkbox"] { cursor: not-allowed; }
    .mplx-wizard__toggle-body {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 3px;
    }
    .mplx-wizard__toggle-label {
      font-size: 13px;
      font-weight: 600;
      color: #0f172a;
      line-height: 1.3;
    }
    .mplx-wizard__toggle-chip {
      font-size: 11.5px;
      color: #64748b;
      line-height: 1.4;
    }
    .mplx-wizard__toggle-chip--ok { color: #047857; }
    .mplx-wizard__toggle-chip--warn { color: #b45309; }

    /* Review step, compact summary list */
    .mplx-wizard__review-section {
      margin-bottom: 14px;
    }
    .mplx-wizard__review-section-title {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      color: #64748b;
      margin: 0 0 6px;
    }
    .mplx-wizard__review-row {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      gap: 12px;
      padding: 6px 0;
      border-bottom: 1px dashed #e2e8f0;
      font-size: 13px;
    }
    .mplx-wizard__review-row:last-child { border-bottom: none; }
    .mplx-wizard__review-key { color: #475569; }
    .mplx-wizard__review-val {
      font-weight: 600;
      color: #0f172a;
    }
    .mplx-wizard__review-val--changed {
      color: #dc2626;
    }
    .mplx-wizard__review-empty {
      font-size: 12.5px;
      color: #64748b;
      font-style: italic;
    }

    .mplx-wizard__footer {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 12px 20px;
      border-top: 1px solid #e2e8f0;
      background: #f8fafc;
    }
    .mplx-wizard__footer-spacer { flex: 1; }
    .mplx-wizard__btn {
      appearance: none;
      padding: 8px 14px;
      border-radius: 8px;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      transition: background 120ms ease, border-color 120ms ease;
    }
    .mplx-wizard__btn--secondary {
      background: #fff;
      color: #475569;
      border: 1px solid #cbd5e1;
    }
    .mplx-wizard__btn--secondary:hover {
      background: #f1f5f9;
      border-color: #94a3b8;
    }
    .mplx-wizard__btn--secondary:disabled {
      color: #cbd5e1;
      cursor: not-allowed;
      background: #f8fafc;
    }
    .mplx-wizard__btn--primary {
      background: #0f172a;
      color: #fff;
      border: 1px solid #0f172a;
    }
    .mplx-wizard__btn--primary:hover { background: #1e293b; }
    .mplx-wizard__btn--ghost {
      background: transparent;
      color: #64748b;
      border: 1px solid transparent;
    }
    .mplx-wizard__btn--ghost:hover { color: #0f172a; }
    .mplx-wizard__btn[hidden] { display: none; }

    @media (max-width: 600px) {
      .mplx-wizard__panel { max-height: calc(100vh - 16px); }
      .mplx-wizard__header { padding: 14px 16px 10px; }
      .mplx-wizard__body { padding: 14px 16px 10px; }
      .mplx-wizard__footer { padding: 10px 16px; }
      .mplx-scenario-entry__autoprograms { margin-left: 0; flex-basis: 100%; }
    }

    /* ── Your-specifics expandable panel ───────────────────────────────── */
    .mplx-yourspecs {
      margin-top: 12px;
      border: 1px solid #e2e8f0;
      border-radius: 10px;
      background: #ffffff;
    }
    .mplx-yourspecs[open] {
      background: #fafbfc;
    }
    .mplx-yourspecs__summary {
      list-style: none;
      cursor: pointer;
      padding: 12px 14px;
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
    }
    .mplx-yourspecs__summary::-webkit-details-marker { display: none; }
    .mplx-yourspecs__chev {
      transition: transform 0.15s ease;
      color: #64748b;
      flex-shrink: 0;
    }
    .mplx-yourspecs[open] .mplx-yourspecs__chev {
      transform: rotate(90deg);
    }
    .mplx-yourspecs__title {
      font-size: 13px;
      font-weight: 600;
      color: #0f172a;
    }
    .mplx-yourspecs__pill {
      display: inline-flex;
      align-items: center;
      padding: 2px 8px;
      background: #eef2ff;
      border: 1px solid #c7d2fe;
      border-radius: 999px;
      font-size: 10.5px;
      font-weight: 600;
      color: #4338ca;
    }
    .mplx-yourspecs__hint {
      font-size: 12px;
      color: #64748b;
      flex-basis: 100%;
      margin-top: 2px;
    }
    .mplx-yourspecs__body {
      padding: 6px 14px 14px;
      border-top: 1px dashed #e2e8f0;
      display: flex;
      flex-direction: column;
      gap: 16px;
    }
    .mplx-yourspecs__group {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .mplx-yourspecs__group-title {
      font-size: 11px;
      font-weight: 600;
      color: #64748b;
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }
    .mplx-yourspecs__grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 10px;
    }
    .mplx-yourspecs__field {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }
    .mplx-yourspecs__label {
      font-size: 12px;
      font-weight: 500;
      color: #334155;
    }
    .mplx-yourspecs__input-wrap {
      display: flex;
      align-items: center;
      gap: 0;
      border: 1px solid #cbd5e1;
      border-radius: 6px;
      background: #ffffff;
      padding: 0 6px;
      transition: border-color 0.1s;
    }
    .mplx-yourspecs__input-wrap:focus-within {
      border-color: #6366f1;
      box-shadow: 0 0 0 2px rgba(99,102,241,0.12);
    }
    /* Visual marker on inputs whose value differs from the engine default, 
       so a homeowner can scan the panel and see which numbers are theirs vs
       the defaults. The is-overridden class is added by the panel renderer. */
    .mplx-yourspecs__input-wrap.is-overridden {
      border-color: #6366f1;
      background: #eef2ff;
    }
    .mplx-yourspecs__input-wrap.is-overridden input {
      color: #312e81;
      font-weight: 600;
    }
    .mplx-yourspecs__input-wrap input {
      flex: 1 1 auto;
      min-width: 0;
      border: none;
      outline: none;
      background: transparent;
      padding: 6px 4px;
      font-size: 13px;
      color: #0f172a;
      font-variant-numeric: tabular-nums;
    }
    .mplx-yourspecs__prefix,
    .mplx-yourspecs__suffix {
      font-size: 12px;
      color: #94a3b8;
      white-space: nowrap;
      padding: 0 2px;
    }
    .mplx-yourspecs__note {
      font-size: 11px;
      color: #94a3b8;
      line-height: 1.35;
    }
    .mplx-yourspecs__actions {
      display: flex;
      align-items: center;
      gap: 12px;
      flex-wrap: wrap;
      padding-top: 4px;
      border-top: 1px dashed #e2e8f0;
    }
    .mplx-yourspecs__reset {
      padding: 6px 12px;
      border: 1px solid #cbd5e1;
      border-radius: 6px;
      background: #ffffff;
      font-size: 12px;
      font-weight: 500;
      color: #475569;
      cursor: pointer;
    }
    .mplx-yourspecs__reset:hover:not(:disabled) {
      background: #f1f5f9;
      color: #0f172a;
    }
    .mplx-yourspecs__reset:disabled {
      opacity: 0.4;
      cursor: not-allowed;
    }
    .mplx-yourspecs__hint-sm {
      font-size: 11px;
      color: #94a3b8;
      line-height: 1.4;
    }
    .mplx-auto-program::before {
      content: '✓';
      font-size: 10px;
    }

    /* Hero stats row */
    .mplx-hero__stats-row {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1px;
      background: #e2e8f0;
      border-radius: 12px;
      overflow: hidden;
      margin-bottom: 14px;
    }

    /* Data vintage footnote under hero stats. Positive top margin +
       dashed separator so it sits clearly BELOW the ballpark figures
       grid (the legacy negative margin was tuned for the old stats
       layout and now overlapped the last grid row). */
    .mplx-hero__data-note {
      font-size: 10.5px;
      color: #94a3b8;
      font-style: italic;
      text-align: center;
      margin: 14px 0 6px;
      padding-top: 10px;
      border-top: 1px dashed #e2e8f0;
      letter-spacing: 0.02em;
      line-height: 1.5;
    }
    .mplx-hero__stat {
      background: #f8fafc;
      padding: 10px 12px;
      text-align: center;
    }
    .mplx-hero__stat-label {
      font-size: 10px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      color: #94a3b8;
      margin-bottom: 3px;
    }
    .mplx-hero__stat-value {
      font-size: 15px;
      font-weight: 700;
      color: #0f172a;
    }

    /* Garden suite tag */
    .mplx-garden-tag {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 4px 10px;
      border-radius: 8px;
      background: #ecfdf5;
      border: 1px solid #bbf7d0;
      font-size: 11px;
      font-weight: 600;
      color: #166534;
      margin-bottom: 12px;
    }
    /* Garden suite toggle */
    .mplx-garden-toggle {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 8px 14px;
      border-radius: 10px;
      background: linear-gradient(135deg, #ecfdf5 0%, #f0fdf4 100%);
      border: 1.5px solid #86efac;
      cursor: pointer;
      user-select: none;
      margin-bottom: 12px;
      transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
    }
    .mplx-garden-toggle:hover {
      border-color: #4ade80;
      box-shadow: 0 0 0 2px rgba(74,222,128,0.15);
    }
    .mplx-garden-toggle.is-active {
      border-color: #22c55e;
      background: linear-gradient(135deg, #dcfce7 0%, #ecfdf5 100%);
      box-shadow: 0 0 0 2px rgba(34,197,94,0.18);
    }
    .mplx-garden-toggle__switch {
      position: relative;
      width: 40px;
      height: 22px;
      border-radius: 11px;
      background: #d1d5db;
      transition: background 0.25s ease;
      flex-shrink: 0;
    }
    .mplx-garden-toggle__switch::after {
      content: '';
      position: absolute;
      top: 2px;
      left: 2px;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background: #fff;
      box-shadow: 0 1px 3px rgba(0,0,0,0.2);
      transition: transform 0.25s ease;
    }
    .mplx-garden-toggle.is-active .mplx-garden-toggle__switch {
      background: #22c55e;
    }
    .mplx-garden-toggle.is-active .mplx-garden-toggle__switch::after {
      transform: translateX(18px);
    }
    .mplx-garden-toggle__label {
      font-size: 12px;
      font-weight: 700;
      color: #166534;
      line-height: 1.3;
    }
    .mplx-garden-toggle__label small {
      display: block;
      font-weight: 500;
      font-size: 11px;
      color: #15803d;
    }

    /* Hero CTA */
    .mplx-hero__cta {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      width: 100%;
      padding: 13px 20px;
      border: none;
      border-radius: 12px;
      background: #e11d48;
      color: #fff;
      font-size: 14px;
      font-weight: 700;
      cursor: pointer;
      transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
      font-family: 'Sora', sans-serif;
      letter-spacing: 0.01em;
    }
    .mplx-hero__cta:hover {
      background: #be123c;
      transform: translateY(-1px);
      box-shadow: 0 4px 14px rgba(225,29,72,0.25);
    }
    .mplx-hero__cta:active {
      transform: translateY(0);
    }
    .mplx-hero__cta svg {
      width: 16px;
      height: 16px;
      flex-shrink: 0;
    }

    /* ── Accordion shared ── */
    .mplx-accordion-trigger {
      display: flex;
      align-items: center;
      gap: 6px;
      width: 100%;
      padding: 12px 0 0;
      border: none;
      background: none;
      font-size: 12px;
      font-weight: 700;
      color: #64748b;
      cursor: pointer;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      transition: color 0.2s;
    }
    .mplx-accordion-trigger:hover {
      color: #0f172a;
    }
    .mplx-chevron {
      display: inline-block;
      width: 14px;
      height: 14px;
      transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
      flex-shrink: 0;
    }
    .mplx-chevron--open {
      transform: rotate(90deg);
    }
    .mplx-accordion-body {
      opacity: 0;
      max-height: 0;
      overflow: hidden;
      transition: opacity 0.3s ease;
    }
    .mplx-accordion-body.mplx-accordion-body--open {
      max-height: 2000px;
      opacity: 1;
      overflow: visible;
    }

    /* Detail breakdown rows */
    .mplx-detail {
      padding: 12px 0 4px;
    }
    .mplx-detail__section-label {
      font-size: 10px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: #94a3b8;
      margin: 10px 0 6px;
    }
    .mplx-detail__section-label:first-child {
      margin-top: 0;
    }
    .mplx-detail__row {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      font-size: 13px;
      line-height: 1.7;
    }
    .mplx-detail__row-label {
      color: #64748b;
      font-weight: 500;
    }
    .mplx-detail__row-value {
      color: #0f172a;
      font-weight: 700;
    }
    .mplx-detail__row--sub {
      font-size: 11.5px;
      opacity: 0.65;
    }
    .mplx-detail__row--sub .mplx-detail__row-value {
      font-weight: 500;
    }
    .mplx-detail__row--total {
      border-top: 1px solid #e2e8f0;
      padding-top: 6px;
      margin-top: 2px;
      font-weight: 600;
    }
    .mplx-detail__row--total .mplx-detail__row-label,
    .mplx-detail__row--total .mplx-detail__row-value {
      font-weight: 700;
      color: #0f172a;
    }
    .mplx-detail__divider {
      height: 1px;
      background: #e2e8f0;
      margin: 8px 0;
    }

    /* ── Other Legal Options section ── */
    .mplx-section-title {
      font-size: 13px;
      font-weight: 700;
      color: #475569;
      margin: 18px 0 8px;
      font-family: 'Sora', sans-serif;
    }

    .mplx-option {
      border-radius: 12px;
      border: 1px solid #e2e8f0;
      background: #fff;
      margin-bottom: 6px;
      transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }
    .mplx-option:hover {
      border-color: #cbd5e1;
    }
    .mplx-option--expanded {
      border-color: #cbd5e1;
      box-shadow: 0 2px 10px rgba(15,23,42,0.06);
    }
    /* ── Dynamic "Custom build" card distinction ────────────────────────
       The +/- picker card is qualitatively different from the preset
       configs, it's a what-if explorer, not a recommended scenario.
       Give it a distinct indigo accent + a dashed border + a "CUSTOM"
       ribbon so the eye registers it as "this one is interactive". The
       intent: when scrolling the alternatives list, the user can
       immediately tell which card they can dial up/down. */
    .mplx-option--dynamic {
      border: 1.5px dashed #6366f1;
      background: linear-gradient(135deg, #eef2ff 0%, #f5f3ff 100%);
      position: relative;
      margin-top: 14px;
      box-shadow: 0 1px 4px rgba(99, 102, 241, 0.10);
    }
    .mplx-option--dynamic:hover {
      border-color: #4f46e5;
      box-shadow: 0 2px 12px rgba(99, 102, 241, 0.18);
    }
    .mplx-option--dynamic.mplx-option--expanded {
      border-color: #4f46e5;
      box-shadow: 0 3px 16px rgba(99, 102, 241, 0.22);
    }
    .mplx-option--dynamic::before {
      content: 'WHAT-IF';
      position: absolute;
      top: -9px;
      left: 14px;
      background: #4f46e5;
      color: #fff;
      font-size: 10px;
      font-weight: 800;
      letter-spacing: 0.08em;
      padding: 2px 9px;
      border-radius: 6px;
      box-shadow: 0 1px 3px rgba(79, 70, 229, 0.30);
    }
    .mplx-option--dynamic .mplx-option__header:hover {
      background: rgba(99, 102, 241, 0.06);
    }
    .mplx-option--dynamic .mplx-option__name {
      color: #3730a3;
    }
    /* While the debounce is pending (between a +/- click and the actual
       re-render) the card shows a faint pulse so the user knows their
       change registered even though the numbers haven't updated yet. */
    .mplx-option--dynamic.is-debouncing,
    .mplx-hero.is-debouncing {
      animation: mplxDynPulse 0.5s ease-in-out;
    }
    @keyframes mplxDynPulse {
      0%   { box-shadow: 0 1px 4px rgba(99, 102, 241, 0.10); }
      50%  { box-shadow: 0 2px 18px rgba(99, 102, 241, 0.45); }
      100% { box-shadow: 0 1px 4px rgba(99, 102, 241, 0.10); }
    }
    /* Hero treatment when the dynamic card has won "best", give it
       the same indigo accent so the picker reads as the interactive
       focus of the page. */
    .mplx-hero.mplx-hero--dynamic {
      border: 1.5px solid #6366f1;
      background: linear-gradient(135deg, #eef2ff 0%, #f5f3ff 100%);
    }
    .mplx-option__header {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 12px 14px;
      cursor: pointer;
      transition: background 0.15s;
      user-select: none;
    }
    .mplx-option__header:hover {
      background: #f8fafc;
    }
    .mplx-option__name {
      flex: 1;
      font-size: 13px;
      font-weight: 700;
      color: #0f172a;
      min-width: 0;
    }
    .mplx-option__units {
      font-size: 12px;
      font-weight: 600;
      color: #64748b;
      white-space: nowrap;
    }
    .mplx-option__outcome {
      font-size: 14px;
      font-weight: 700;
      white-space: nowrap;
    }
    .mplx-option__outcome--positive { color: #059669; }
    .mplx-option__outcome--negative { color: #dc2626; }
    .mplx-option__badge {
      display: inline-flex;
      padding: 2px 7px;
      border-radius: 6px;
      background: #dcfce7;
      color: #166534;
      font-size: 10px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      white-space: nowrap;
    }
    /* Cash-flow-state badge variants, replace the old always-green "Viable" */
    .mplx-option__badge--pos { background: #dcfce7; color: #166534; }
    .mplx-option__badge--neutral { background: #f1f5f9; color: #475569; }
    .mplx-option__badge--neg { background: #fee2e2; color: #991b1b; }
    /* Inline outlier explanation under the option row */
    .mplx-option__outlier-note {
      margin: 0 14px 10px;
      padding: 6px 10px;
      border-left: 2px solid #cbd5e1;
      background: #f8fafc;
      font-size: 11.5px;
      color: #64748b;
      line-height: 1.35;
      border-radius: 2px;
    }
    .mplx-option__garden {
      font-size: 11px;
      color: #059669;
      white-space: nowrap;
    }
    .mplx-option__body {
      padding: 0 14px;
    }
    .mplx-option__body-inner {
      padding-bottom: 14px;
      border-top: 1px solid #f1f5f9;
      padding-top: 10px;
    }

    /* ── Non-legal options ── */
    .mplx-nonlegal {
      border-radius: 12px;
      border: 1px solid #e2e8f0;
      background: #fafafa;
      margin-top: 14px;
    }
    .mplx-nonlegal__trigger {
      display: flex;
      align-items: center;
      gap: 6px;
      width: 100%;
      padding: 12px 14px;
      border: none;
      background: none;
      font-size: 12px;
      font-weight: 700;
      color: #94a3b8;
      cursor: pointer;
      transition: color 0.2s;
      text-align: left;
    }
    .mplx-nonlegal__trigger:hover {
      color: #64748b;
    }
    .mplx-nonlegal__list {
      padding: 0 14px;
    }
    .mplx-nonlegal__list-inner {
      padding-bottom: 12px;
    }
    .mplx-nonlegal__item {
      display: flex;
      align-items: baseline;
      gap: 8px;
      font-size: 12px;
      line-height: 1.7;
      color: #94a3b8;
    }
    .mplx-nonlegal__item-name {
      font-weight: 600;
      color: #64748b;
      white-space: nowrap;
    }
    .mplx-nonlegal__item-reason {
      color: #94a3b8;
    }

    /* ── Assumptions ── */
    .mplx-assumptions {
      border-radius: 12px;
      border: 1px solid #e2e8f0;
      background: #fafafa;
      margin-top: 8px;
    }
    .mplx-assumptions__trigger {
      display: flex;
      align-items: center;
      gap: 6px;
      width: 100%;
      padding: 12px 14px;
      border: none;
      background: none;
      font-size: 12px;
      font-weight: 700;
      color: #94a3b8;
      cursor: pointer;
      transition: color 0.2s;
      text-align: left;
    }
    .mplx-assumptions__trigger:hover {
      color: #64748b;
    }
    .mplx-assumptions__body {
      padding: 0 14px;
    }
    .mplx-assumptions__body-inner {
      padding-bottom: 14px;
      font-size: 11px;
      color: #94a3b8;
      line-height: 1.6;
    }
    .mplx-assumptions__body-inner strong {
      color: #64748b;
    }

    @media (max-width: 640px) {
      .mplx-hero__stats-row {
        grid-template-columns: 1fr;
      }
      .mplx-hero__outcome {
        font-size: 26px;
      }
      .mplx-hero__title {
        font-size: 17px;
      }
      .mplx-occupancy-toggle {
        flex-direction: column;
        width: 100%;
      }
      .mplx-occupancy-toggle__btn {
        text-align: center;
      }
      .mplx-option__header {
        flex-wrap: wrap;
        gap: 6px;
      }
      /* Drop redundant supporting text on mobile, name already conveys
         unit count (Fourplex, Sixplex, etc.) and the extended outlier
         explanation is too dense for narrow viewports. */
      .mplx-option__units {
        display: none;
      }
      .mplx-option__outlier-note {
        display: none;
      }
      .mplx-option__name {
        flex: 1 1 100%;
        font-size: 14px;
      }
      .mplx-option__summary {
        padding-left: 14px !important;
      }
    }

    /* ── Multiplex tab: flush, no-frame layout (2026-05-18) ─────────────
       Per product direction the multiplex tab was running three+ levels of
       nested cards, the outer section frame, the scenario-entry box, the
       hero card, the four KPI tiles inside the hero, the why-box, three
       insights cards, and each alternative-option card, which on mobile
       compounded into ~80px of horizontal padding before text even started
       wrapping ("Which multi-unit / builds make money / on this lot?",
       "PROGRAMS · MARKET · / FINANCING · CASH"). Each rule below STRIPS the
       frame chrome (border, background, padding, shadow, border-radius)
       for one wrapper class so its contents float in the surrounding flow.
       Verdict pills, status badges, and CTA buttons keep their styling, 
       those are inline indicators, not nesting frames.
       Scoped via `#sectionFrameMultiplex` so other tabs (Coach, Custom,
       Addition) keep their existing card layout unchanged. */

    /* 1. Outer "Multiplex Development (Bill 23)" section frame. */
    #sectionFrameMultiplex {
      border: none;
      background: transparent;
      box-shadow: none;
      padding: 0;
      width: 100%;
      max-width: 100%;
      border-radius: 0;
      overflow: visible;
    }
    /* Keep the section title legible but as a plain heading, not a chip
       on top of a card edge, `.section-frame-title--legacy` (the absolute-
       positioned chip used by some frames) flattens to inline flow too. */
    #sectionFrameMultiplex .section-frame-title {
      margin: 0 0 12px;
      padding: 0;
      position: static;
      font-size: 15px;
    }

    /* 2. "Which multi-unit builds make money on this lot?" scenario entry. */
    #sectionFrameMultiplex .mplx-scenario-entry {
      border: none;
      background: transparent;
      box-shadow: none;
      padding: 0;
      border-radius: 0;
      margin: 0 0 18px;
      gap: 14px 16px;
    }
    #sectionFrameMultiplex .mplx-scenario-entry__title {
      font-size: 18px;
      line-height: 1.25;
    }

    /* 3. Hero card. The big "Sixplex (3×2) / 6 units" block. The verdict
       pill and accent border were doing double-duty, keep the pill,
       drop the surrounding box. */
    #sectionFrameMultiplex .mplx-hero {
      border: none;
      border-left: none;
      background: transparent;
      box-shadow: none;
      padding: 0;
      border-radius: 0;
      margin: 0 0 22px;
    }
    #sectionFrameMultiplex .mplx-hero:hover {
      box-shadow: none;
    }
    #sectionFrameMultiplex .mplx-hero.mplx-hero--neutral,
    #sectionFrameMultiplex .mplx-hero.mplx-hero--warn,
    #sectionFrameMultiplex .mplx-hero.mplx-hero--dynamic {
      background: transparent;
      border: none;
    }
    #sectionFrameMultiplex .mplx-hero__inner {
      padding: 0;
    }

    /* 4. KPI strip tiles (After-Project Value / Gross Value Increase /
       Project Cost / Monthly Cash Flow). Each headline metric sits in
       its own boxed card so the four numbers read as distinct, scannable
       boxes. The cash-flow tile keeps its 3px coloured LEFT edge (set
       inline in app-shell.js) as the red/green/amber sign cue, the box
       supplies the other three sides. */
    #sectionFrameMultiplex .mplx-hero__kpi-strip {
      gap: 12px;
      margin: 10px 0 16px;
    }
    #sectionFrameMultiplex .mplx-hero__kpi {
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
      padding: 10px 12px;
      border-radius: 10px;
    }
    #sectionFrameMultiplex .mplx-hero__kpi--cash {
      padding-left: 10px;
    }

    /* 5. "Why this is risky / works / close" block. */
    #sectionFrameMultiplex .mplx-hero__why {
      background: transparent;
      border: none;
      padding: 14px 0 6px;
      border-radius: 0;
      border-top: 1px solid #e2e8f0;
      margin-top: 14px;
    }

    /* ── Gentle section dividers throughout the hero ───────────────────
       Without the hero-card frame each major content row reads as a
       slab on its own. A 1px #e2e8f0 divider above each block gives the
       eye a soft horizontal guide WITHOUT a "boxed" feel. Generous
       padding-top/margin-top above each divider keeps the layout open
       on both desktop and mobile.
       2026-05-18 spec: dividers should be visible enough to indicate
       sections but never jarring, same #e2e8f0 stroke the rest of the
       Zoned UI uses for separators (datasheet rows, accordion edges). */
    #sectionFrameMultiplex .mplx-hero__verdict {
      border-top: 1px solid #e2e8f0;
      padding-top: 14px;
      margin-top: 14px;
    }
    #sectionFrameMultiplex .mplx-hero__insights-trigger {
      border-top: 1px solid #e2e8f0;
      padding-top: 12px !important;
      margin-top: 12px;
    }
    /* "See cost and income breakdown" trigger sits below the footer
       stats and is the second .mplx-accordion-trigger in the hero. The
       :not() guard keeps the rule from doubling-up on the insights
       trigger (which already has its own divider). */
    #sectionFrameMultiplex .mplx-hero .mplx-accordion-trigger:not(.mplx-hero__insights-trigger) {
      border-top: 1px solid #e2e8f0;
      padding-top: 12px;
      margin-top: 14px;
    }
    /* CTA gets breathing space above; the footer stats below it
       already provide a dashed divider, so we don't need a hard line
       between the CTA and footer too. */
    #sectionFrameMultiplex .mplx-hero__cta {
      margin-top: 16px;
    }

    /* 6. Lender / Risk insight cards. Three text columns living on the
       page directly, separated by gaps and a divider above the trigger. */
    #sectionFrameMultiplex .mplx-hero__insights {
      gap: 18px 28px;
    }
    #sectionFrameMultiplex .mplx-hero__insights-card {
      background: transparent;
      border: none;
      padding: 0;
      border-radius: 0;
    }

    /* 7. Other legal options, collapsible alternatives. Replace the
       per-card border with a single horizontal divider above each row
       so the visual structure is now a list, not a stack of boxes. */
    #sectionFrameMultiplex .mplx-option {
      background: transparent;
      border: none;
      border-radius: 0;
      box-shadow: none;
      margin: 0;
      border-top: 1px solid #e2e8f0;
    }
    #sectionFrameMultiplex .mplx-option:hover,
    #sectionFrameMultiplex .mplx-option.mplx-option--expanded {
      box-shadow: none;
      border-color: #e2e8f0;
    }
    #sectionFrameMultiplex .mplx-option__header {
      padding: 12px 0;
    }
    #sectionFrameMultiplex .mplx-option__header:hover {
      background: transparent;
    }
    /* Dynamic "WHAT-IF" picker card keeps its indigo dashed accent, 
       the "what if" tag IS information, not a wrapper frame. Strip the
       gradient background + padding but leave the dashed top edge so
       the user still parses it as the interactive row. */
    #sectionFrameMultiplex .mplx-option--dynamic {
      background: transparent !important;
      border: none;
      border-top: 1.5px dashed #6366f1;
    }
    #sectionFrameMultiplex .mplx-option--dynamic::before {
      top: -10px;
    }
    #sectionFrameMultiplex .mplx-option--dynamic .mplx-option__header:hover {
      background: transparent;
    }
    #sectionFrameMultiplex .mplx-option__body-inner {
      padding: 4px 0 14px;
    }

    /* 8. Non-legal-options accordion + Assumptions accordion at the
       bottom of the tab. Both were wearing card frames that, with the
       hero frame removed, looked like the only thing still boxed in. */
    #sectionFrameMultiplex .mplx-nonlegal,
    #sectionFrameMultiplex .mplx-assumptions {
      background: transparent;
      border: none;
      padding: 0;
      border-radius: 0;
      border-top: 1px solid #e2e8f0;
      margin-top: 18px;
    }
    #sectionFrameMultiplex .mplx-nonlegal__trigger,
    #sectionFrameMultiplex .mplx-assumptions__trigger {
      padding: 10px 0;
    }

    /* Apartment banner stays a card on purpose, it carries a different
       semantic weight ("this lot supports apartment-scale density beyond
       what these cards model"), so let it keep the amber chrome. Just
       trim the side padding so it stays edge-aligned with the rest of
       the tab content. */
    #sectionFrameMultiplex .mplx-apartment-banner {
      margin-left: 0;
      margin-right: 0;
    }

    /* Mobile-specific tweaks. With every wrapper frame removed the only
       remaining mobile concern is keeping the KPI tiles and insight
       columns from stacking too tightly. Generous vertical gaps + a
       single divider keep the eye moving without nested boxes. */
    @media (max-width: 640px) {
      #sectionFrameMultiplex .mplx-hero__kpi-strip {
        gap: 12px;
        margin: 8px 0 14px;
      }
      #sectionFrameMultiplex .mplx-hero__insights {
        gap: 14px 0;
      }
      #sectionFrameMultiplex .mplx-hero__insights-card + .mplx-hero__insights-card {
        border-top: 1px solid #f1f5f9;
        padding-top: 12px;
      }
      #sectionFrameMultiplex .mplx-scenario-entry__title {
        font-size: 16px;
      }
      /* The Tune Scenario button should still feel tappable but not
         dominate the viewport when the surrounding card chrome is gone. */
      #sectionFrameMultiplex .mplx-scenario-entry__btn {
        width: 100%;
        justify-content: center;
      }
    }

    .adu-model-button.is-loading {
      filter: grayscale(0.85);
      opacity: 0.72;
      cursor: wait;
      pointer-events: none;
      transform: none;
      box-shadow: 0 8px 16px rgba(15, 23, 42, 0.12);
    }

    .adu-model-button.is-loading:hover {
      transform: none;
      box-shadow: 0 8px 16px rgba(15, 23, 42, 0.12);
      border-color: #d7deea;
    }

    .adu-model-button-fit.is-loading {
      color: #d1d5db;
      letter-spacing: 0.02em;
      font-size: 12px;
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }

    .adu-model-button-fit.is-loading::before {
      content: '';
      width: 11px;
      height: 11px;
      border-radius: 999px;
      border: 2px solid rgba(255, 255, 255, 0.3);
      border-top-color: rgba(255, 255, 255, 0.95);
      animation: aduFitSpin 0.8s linear infinite;
      flex: 0 0 auto;
    }

    @keyframes aduFitSpin {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }

    .zoning-action-tile {
      min-height: 64px;
      border-radius: 14px;
      border: 1px solid #d7deea;
      background: #ffffff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 600;
      font-size: 14px;
      color: #334155;
    }

    .zoning-action-tile.primary {
      cursor: pointer;
      background: linear-gradient(135deg, #d4172f 0%, #b80d24 100%);
      color: #ffffff;
      border-color: #c8102e;
      box-shadow: 0 6px 18px rgba(200, 16, 46, 0.24);
      transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
    }

    .zoning-action-tile.primary:hover {
      transform: translateY(-1px);
      box-shadow: 0 10px 24px rgba(200, 16, 46, 0.32);
      filter: brightness(1.02);
    }

    .zoning-action-tile.primary:active {
      transform: translateY(0);
    }

    .zoning-action-tile.action {
      cursor: pointer;
      transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
    }

    .zoning-action-tile.action:hover {
      transform: translateY(-1px);
      border-color: #c5d0e3;
      box-shadow: 0 8px 18px rgba(15, 23, 42, 0.1);
    }

    .zoning-action-tile.placeholder {
      background: #f8fafc;
      color: #94a3b8;
    }

    .zoning-options-back-btn {
      display: none;
      align-items: center;
      justify-content: center;
      width: min(100%, 760px);
      margin: 10px auto 12px;
      padding: 12px 16px;
      border-radius: 12px;
      border: 1px solid #d1d9e6;
      background: #f8fafc;
      color: #1e293b;
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      cursor: pointer;
      transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
    }

    .zoning-options-back-btn:hover {
      background: #eef2f7;
      border-color: #b9c4d8;
      transform: translateY(-1px);
    }

    /* Mobile responsive - ChatGPT Style */
    @media (max-width: 768px) {
      /* Allow natural page scrolling on mobile */
      html, body {
        overflow-x: hidden;
        overflow-y: auto;
        position: static !important;
        width: auto !important;
        height: auto !important;
        touch-action: pan-y;
        -webkit-text-size-adjust: 100%;
        overscroll-behavior-y: auto;
      }
      
      /* Mobile sidebar - slide-out drawer, full-height */
      .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        width: 85%;
        max-width: 320px;
        height: 100vh;
        height: 100dvh;
        z-index: 1000;
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        box-shadow: 4px 0 20px rgba(0, 0, 0, 0.3);
      }
      
      .sidebar:not(.collapsed) {
        transform: translateX(0);
      }
      
      .sidebar.collapsed {
        transform: translateX(-100%);
        width: 85%;
        max-width: 320px;
        overflow: visible;
      }
      
      /* On mobile, sidebar is always full-height overlay regardless of footer map */
      .sidebar.has-footer-map {
        height: 100vh;
        height: 100dvh;
        max-height: none;
      }
      
      /* Mobile sidebar overlay backdrop */
      .sidebar-backdrop {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 999;
        opacity: 0;
        transition: opacity 0.3s ease;
      }
      
      .sidebar-backdrop.visible {
        display: block;
        opacity: 1;
      }
      
      /* Show open button on mobile */
      .sidebar-open-btn {
        display: flex;
        position: fixed;
        top: 12px;
        left: 12px;
        z-index: 500;
      }
      
      /* Hide open button when sidebar is open */
      .sidebar:not(.collapsed) ~ .chat-panel .sidebar-open-btn,
      body:not(.sidebar-collapsed) .sidebar-open-btn {
        display: none;
      }
      
      .chat-panel {
        width: 100%;
        height: auto;
        min-height: calc(100vh - 38px);
        min-height: calc(100dvh - 38px);
        position: relative;
        display: block;
        overflow: visible;
        touch-action: pan-y;
        overscroll-behavior-y: auto;
      }
      
      /* Fixed header on mobile, always visible above map (250) and input (300) */
      .chat-header {
        padding: 2px 12px;
        position: relative;
        top: auto;
        left: auto;
        right: auto;
        z-index: 1;
        background: transparent;
        border-bottom: 0;
        display: none;
        align-items: center;
        justify-content: center;
        gap: 8px;
        text-align: center;
        touch-action: pan-y;
        -webkit-user-select: none;
        user-select: none;
      }

      .chat-header.has-controls {
        display: flex;
      }
      
      .chat-logo {
        height: 30px;
        flex-shrink: 0;
      }
      
      /* Main content area - the ONLY scrollable element on mobile */
      :root {
        --mobile-chatbox-reserved: calc(clamp(72px, 12dvh, 96px) + env(safe-area-inset-bottom, 0px));
        --mobile-overlay-reserved: calc(clamp(96px, 18dvh, 146px) + env(safe-area-inset-bottom, 0px));
      }

      .chat-container,
      .chat-container.welcome-centered {
        position: relative;
        top: auto;
        bottom: auto;
        left: auto;
        right: auto;
        display: flex;
        flex-direction: column;
        height: auto !important;
        min-height: calc(100vh - 38px);
        min-height: calc(100dvh - 38px);
        max-width: none;
        margin: 0;
        padding: 0;
        transition: none;
        justify-content: flex-start !important;
      }

      /* Let the lead form use full viewport before chat input is revealed */
      .chat-container.welcome-centered:not(:has(.chat-input-area.revealed)) {
        bottom: env(safe-area-inset-bottom, 0px);
      }
      
      /* Scrollable messages - the ONLY scrollable element on mobile */
      .chat-messages,
      .chat-container.welcome-centered .chat-messages {
        flex: 0 0 auto;
        padding: 4px 14px 16px;
        overflow: visible !important;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: auto;
        min-height: auto !important;
        display: block;
        touch-action: pan-y; /* Allow vertical scroll only, no zoom */
      }

      .chat-container.welcome-centered:not(:has(.chat-input-area.revealed)) .chat-messages {
        padding-bottom: max(10px, env(safe-area-inset-bottom, 0px));
      }
      
      .welcome-state {
        text-align: center;
        width: 100%;
        padding: 4px 2px 14px;
        row-gap: 4px;
      }
      
      .compact-chat-header {
        padding: 8px 16px 6px;
      }
      .compact-chat-header .compact-title {
        font-size: 13px;
        margin-bottom: 4px;
      }
      .welcome-title {
        font-size: 34px;
        margin-bottom: 0;
        line-height: 1.08;
      }

      .chat-container.welcome-centered .welcome-title {
        font-size: 36px;
        margin-bottom: 0;
      }
      
      .welcome-subtitle {
        display: block;
        font-size: 15px;
        line-height: 1.5;
        color: #64748b;
        max-width: 34ch;
        margin: 0 auto 14px;
      }

      .nurture-rotator {
        height: 34px;
        margin: 6px auto 4px;
      }

      .nurture-track {
        animation: nurtureTrackSlideMobile 16s cubic-bezier(0.22, 1, 0.36, 1) infinite;
      }

      .nurture-line {
        font-size: clamp(18px, 5vw, 22px);
        height: 34px;
        min-height: 34px;
      }

      @keyframes nurtureTrackSlideMobile {
        0%, 14%  { transform: translateY(0);    opacity: 1; }
        17%, 31% { transform: translateY(-20%); opacity: 1; }
        34%, 48% { transform: translateY(-40%); opacity: 1; }
        51%, 65% { transform: translateY(-60%); opacity: 1; }
        68%, 82% { transform: translateY(-80%); opacity: 1; }
        85%      { transform: translateY(-80%); opacity: 0; }
        88%      { transform: translateY(0);    opacity: 0; }
        91%      { transform: translateY(0);    opacity: 1; }
        95%, 100% { transform: translateY(0);   opacity: 1; }
      }

      /* On mobile, keep a full-width card style for readability */
      .lead-capture-form {
        width: 100%;
        max-width: none;
        padding: 14px 12px 18px;
        border-radius: 16px;
        border: 1px solid #e2e8f0;
        box-shadow: 0 8px 22px rgba(15, 23, 42, 0.08);
        background: #ffffff;
      }

      .form-label {
        display: none;
      }

      .project-interest-label.form-label,
      .project-persona-label.form-label {
        display: block;
        font-size: 11px;
        margin-bottom: 8px;
        letter-spacing: 0.45px;
      }

      .form-group {
        margin-bottom: 0;
      }

      .lead-capture-form .form-group + .form-group,
      .lead-capture-form .form-row + .form-group,
      .lead-capture-form .form-group + .form-row {
        margin-top: 10px;
      }

      .lead-capture-form .form-group.form-group--email {
        margin-top: 18px;
      }

      .form-input, .form-select {
        padding: 15px 16px;
        font-size: 16px;
        border-radius: 10px;
        border: 1px solid #d1d5db;
        background: #ffffff;
      }

      .form-input::placeholder {
        color: #9ca3af;
        font-weight: 400;
      }

      .form-select {
        color: #9ca3af;
      }

      .form-select.has-value {
        color: #1a1a2e;
      }

      /* Lead form: project type = native dropdown; build timeline = button row */
      #projectInterestGrid {
        display: none !important;
      }

      #projectPersonaGrid.project-persona-grid {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 4px !important;
      }

      #projectPersonaGrid .project-persona-btn {
        min-height: 58px;
        padding: 7px 2px;
        /* +25% vs prior clamp(11px, 3.15vw, 14px) */
        font-size: clamp(14px, 3.94vw, 17.5px);
        line-height: 1.12;
        letter-spacing: -0.01em;
      }

      .lead-capture-form #formProjectInterest.project-interest-select-hidden {
        position: static !important;
        width: 100% !important;
        height: auto !important;
        min-height: 48px;
        padding: 15px 16px !important;
        margin: 0 !important;
        overflow: visible !important;
        clip: auto !important;
        clip-path: none !important;
        white-space: normal !important;
        border: 1px solid #d1d5db !important;
        border-radius: 10px !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        -webkit-appearance: menulist;
        appearance: menulist;
        font-size: 16px !important;
        background: #ffffff !important;
        box-sizing: border-box !important;
        color: #9ca3af;
      }

      .lead-capture-form #formProjectInterest.project-interest-select-hidden.has-value {
        color: #1a1a2e;
      }

      .form-row {
        grid-template-columns: 1fr;
        gap: 10px;
      }

      .form-row .form-group + .form-group {
        margin-top: 0;
      }

      .form-submit-btn {
        padding: 16px 20px;
        font-size: 22px;
        margin-top: 10px;
        border-radius: 12px;
      }

      .form-disclaimer {
        margin-top: 10px;
        font-size: 12px;
      }

      .form-consent {
        padding: 13px 12px 11px;
      }

      .form-consent-copy {
        font-size: 12px;
      }

      .form-trust-badges {
        display: none;
      }
      
      /* Quick actions mobile */
      .quick-actions {
        margin-top: 24px;
        gap: 10px;
        padding: 0 8px;
      }
      
      .quick-action-btn {
        padding: 12px 14px;
        font-size: 12px;
        border-radius: 12px;
      }
      
      .quick-action-btn svg {
        width: 18px;
        height: 18px;
      }

      .zoning-actions-grid {
        width: 100%;
        gap: 8px;
        margin: 10px auto 12px;
      }

      .draw-siteplan-embed {
        min-height: 0;
        width: 100%;
        margin-left: 0;
        margin-right: 0;
        margin-bottom: 8px;
      }

      .draw-siteplan-promo {
        left: 10px;
        right: 10px;
        bottom: 10px;
      }

      .draw-siteplan-promo-card {
        max-width: none;
        padding: 0;
      }

      .draw-siteplan-promo-copy {
        font-size: 12px;
      }

      .template-showcase {
        margin-bottom: 8px;
      }

      .template-showcase-layout {
        grid-template-columns: 1fr;
        gap: 10px;
        justify-items: center;
      }

      .template-showcase-frame {
        width: min(100%, 320px);
        max-width: 320px;
        margin-left: auto;
        margin-right: auto;
      }

      .template-showcase-meta-title {
        font-size: 22px;
      }

      .draw-siteplan-iframe {
        height: clamp(300px, 52vh, 540px);
        min-height: 0;
      }

      #optionsEnvelopeIframe.draw-siteplan-iframe,
      #optionsEnvelopeIframeAddition.draw-siteplan-iframe {
        height: clamp(375px, 62.5vh, 565px);
      }

      .embed-map-disclaimer {
        font-size: 11px;
        margin: 3px auto 8px;
      }

      #multifamilyLotCanvasIframe.draw-siteplan-iframe {
        height: clamp(420px, 68vh, 760px);
      }

      .draw-siteplan-embed.template-map-readonly {
        min-height: 0;
      }

      .draw-siteplan-embed.template-map-readonly .draw-siteplan-iframe {
        height: clamp(300px, 52vh, 540px);
        min-height: 0;
        max-height: none;
      }

      .adu-model-buttons-grid {
        width: 100%;
        gap: 10px;
        margin: 4px auto 16px;
      }

      .section-frame {
        width: 100%;
        margin: 20px auto 14px;
        padding: 16px 12px 14px;
        border-radius: 14px;
      }

      .si-project-header {
        margin: -16px -12px 12px;
      }

      .options-build-tabs {
        margin: 0 -12px 10px;
        border-radius: 12px 12px 0 0;
      }

      .options-build-tab-btn {
        font-size: 11px;
        padding: 11px 8px;
      }

      .section-frame-title {
        left: 14px;
        top: -12px;
        font-size: 11px;
        padding: 4px 12px 4px 10px;
        gap: 5px;
      }

      .section-frame-title svg {
        width: 13px;
        height: 13px;
      }

      .adu-model-button {
        min-height: 130px;
        border-radius: 12px;
      }

      .adu-model-button-label {
        left: 12px;
        right: 12px;
        bottom: 26px;
        font-size: clamp(18px, 4.2vw, 22px);
      }

      .adu-model-button-meta {
        left: 12px;
        right: 12px;
        bottom: 8px;
      }

      .adu-model-button-size {
        font-size: clamp(8px, 2vw, 9px);
      }

      .adu-model-button-fit {
        font-size: clamp(13px, 3.3vw, 16px);
      }

      .adu-model-draw-own-btn {
        width: 100%;
      }

      .zoning-action-tile {
        min-height: 58px;
        border-radius: 12px;
        font-size: 13px;
      }

      /* Dock mobile adjustments */
      .dock-buttons {
        padding: 8px 8px 0 8px;
        gap: 6px;
      }

      .dock-ctas {
        gap: 4px;
      }

      .dock-cta {
        padding: 11px 12px;
        font-size: 12px;
        border-radius: 10px;
        min-height: 44px;
      }

      .dock-cta svg {
        width: 12px;
        height: 12px;
      }

      .dock-mode-toggle {
        padding: 3px;
        border-radius: 8px;
      }

      .dock-mode-btn {
        padding: 11px 16px;
        font-size: 12px;
        gap: 5px;
        border-radius: 6px;
        min-height: 44px;
      }

      .dock-mode-btn svg {
        width: 14px;
        height: 14px;
      }

      .chat-input-dock {
        border-radius: 12px;
      }

      /* In map mode on mobile: hide chat input but bar stays */
      body.map-mode-active .chat-input-area {
        display: none !important;
      }

      .map-mode-container {
        z-index: 1050;
      }

      /* Fixed footer input on mobile - ALWAYS at bottom, above everything */
      .chat-input-area {
        padding: 5px 8px 0 8px;
        position: fixed !important;
        bottom: env(safe-area-inset-bottom, 0px) !important;
        top: auto !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 1100 !important; /* Above sidebar (1000), map, and everything */
        background: var(--chat-bg) !important;
        border-top: none;
        flex-shrink: 0;
        padding-bottom: 6px;
        touch-action: pan-y;
      }
      
      /* When keyboard is open, no safe-area needed (keyboard covers the bottom) */
      body.keyboard-open .chat-input-area {
        padding-bottom: 3px !important;
      }
      
      /* Keep scrolling enabled when keyboard is open */
      body.keyboard-open {
        overflow-y: auto !important;
        overscroll-behavior-y: auto !important;
        touch-action: pan-y !important;
      }
      
      /* Allow scrolling only inside the chat messages area when keyboard is open */
      body.keyboard-open .chat-container {
        touch-action: pan-y !important;
        overscroll-behavior: contain !important;
      }
      
      /* Remove blur effects on mobile */
      .chat-input-area::before {
        display: none;
      }
      
      /* Input row touches bottom */
      .chat-input-area .input-container {
        margin: 0;
        padding: 0;
      }
      
      /* Quick actions positioned above input on mobile */
      .quick-actions {
        position: fixed;
        bottom: calc(var(--mobile-chatbox-reserved) + 1px); /* Above the chat input */
        left: 0;
        right: 0;
        padding: 6px 10px;
        margin: 0;
        background: linear-gradient(to top, var(--chat-bg) 0%, transparent 100%);
        z-index: 1099; /* Above sidebar (1000), below chat input (1100) */
      }
      
      .input-container {
        max-width: 100%;
      }
      
      .address-input-row {
        gap: 8px;
        margin-bottom: 0;
      }
      
      .address-input {
        font-size: 16px; /* Prevents iOS zoom on focus */
        padding: 14px 16px;
        border-radius: 24px;
      }
      
      .address-search-btn {
        width: 48px;
        height: 48px;
        border-radius: 50%;
      }
      
      .chat-input-wrapper {
        padding: 4px 6px 4px 10px;
        border-radius: 20px;
      }
      
      .chat-input {
        font-size: 16px; /* Prevents iOS zoom on focus */
        min-height: 18px;
        line-height: 1.35;
        padding: 2px 0;
      }
      
      .chat-submit {
        width: 30px;
        height: 30px;
      }
      
      /* Messages mobile */
      .message-text {
        font-size: 14px;
        padding: 12px 14px;
      }
      
      .message.user .message-text {
        padding: 10px 14px;
      }
      
      /* Address input mobile */
      .address-input-row {
        gap: 6px;
      }
      
      .address-input {
        padding: 10px 14px;
        font-size: 16px; /* Prevents iOS zoom on focus */
      }
      
      .address-search-btn {
        width: 44px;
        height: 44px;
      }

      /* Zoning info panel fills width on mobile */
      .zoning-info-panel.visible {
        width: 100%;
        max-width: none;
      }

      /* Zoning actions grid full width */
      .zoning-actions-grid {
        width: 100%;
        gap: 8px;
        margin: 10px auto 12px;
      }

      /* Multifamily canvas & calculator mobile wrapping */
      .draw-siteplan-embed {
        border-radius: 8px;
      }

      .multifamily-finance-card {
        padding: 20px 14px;
        border-radius: 12px;
      }

      .multifamily-mode-toggle {
        border-radius: 10px;
      }

      .multifamily-mode-btn {
        padding: 10px 8px;
        font-size: 12px;
      }

      .multifamily-cta-banner {
        left: 10px;
        right: 10px;
        bottom: 10px;
        padding: 0;
        border-radius: 0;
      }

      .options-envelope-cta {
        bottom: 20px;
      }

      .multifamily-cta-text {
        font-size: 13px;
      }

      .multifamily-cta-btn {
        padding: 11px 20px;
        font-size: 14px;
      }

      /* Sensitivity table scrollable on mobile */
      .multifamily-sensitivity-grid {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
      }

      /* CZP cards wrap nicely */
      .czp-card {
        padding: 14px 12px;
        margin-bottom: 10px;
        border-radius: 10px;
      }

      .czp-zone-header {
        flex-direction: column;
        gap: 10px;
      }

      .czp-zone-details {
        text-align: center;
        width: 100%;
      }

      .czp-zone-name {
        font-size: 15px;
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        line-height: 1.3;
      }

      .czp-zone-meaning {
        font-size: 12px;
      }

      .czp-card-label {
        font-size: 10px;
      }

      .czp-setbacks-strip .setbacks-visual {
        grid-template-columns: repeat(2, 1fr);
      }

      /* Qualified projects wrap */
      .qualified-projects-list {
        font-size: 12.5px;
        padding: 0;
      }

      .qualified-projects-intro {
        font-size: 12.5px;
      }

      /* Setback boxes tighter */
      .setback-box {
        padding: 8px 6px;
      }

      .setback-box-value {
        font-size: 16px;
      }

      /* Message map window */
      .message-map-window {
        max-width: 100%;
      }

      .map-window-iframe {
        height: 280px;
      }

      /* Ottawa bubble panel */
      .ottawa-bubble-panel {
        max-width: calc(100vw - 24px);
        left: 12px;
        right: 12px;
      }

      /* Lot address text smaller on mobile */
      .lot-address-text {
        font-size: 0.92rem;
      }

      /* Post-submit view sections stack with no horizontal overflow */
      .post-submit-view {
        overflow-x: hidden;
        width: 100%;
      }

      /* Zoning bullets readable */
      .zoning-bullets {
        font-size: 13px;
        padding-left: 18px;
      }

      .zoning-bullets li {
        margin-bottom: 6px;
      }
    }
    
    /* Small mobile */
    @media (max-width: 480px) {
      .chat-header {
        padding: 4px 10px;
        gap: 8px;
      }
      
      .chat-logo {
        height: 32px;
      }
      
      .compact-chat-header {
        padding: 6px 12px 5px;
      }
      .compact-chat-header .compact-title {
        font-size: 12px;
        margin-bottom: 3px;
      }
      .welcome-title {
        font-size: 30px;
      }
      
      .chat-container.welcome-centered .welcome-title {
        font-size: 31px;
      }

      .nurture-rotator {
        height: 30px;
        margin: 4px auto 2px;
      }

      .nurture-line {
        font-size: clamp(17px, 4.6vw, 20px);
        height: 30px;
        min-height: 30px;
      }

      .lead-capture-form {
        padding: 12px 10px 16px;
      }

      .project-interest-grid {
        gap: 6px;
      }

      .project-interest-btn {
        padding: 15px 12px;
        font-size: 16px;
        border-radius: 10px;
      }

      .form-input, .form-select {
        padding: 13px 14px;
        font-size: 16px;
        border-radius: 10px;
      }

      .form-submit-btn {
        padding: 15px 16px;
        font-size: 20px;
      }
      
      .form-disclaimer {
        margin-top: 8px;
        font-size: 11px;
      }

      .form-consent {
        gap: 9px;
      }
      
      .chat-messages .welcome-state {
        padding: 8px 2px 10px;
      }
      
      .chat-messages {
        padding: 4px 6px calc(var(--mobile-overlay-reserved) + 10px);
      }
      
      .chat-input-area {
        padding: 8px 10px 0 10px;
        padding-bottom: max(8px, env(safe-area-inset-bottom, 8px));
      }
      
      .address-context-address {
        font-size: 11px;
      }
      
      .address-context-zone {
        font-size: 10px;
      }

      .zoning-action-tile {
        min-height: 52px;
        font-size: 12px;
        border-radius: 10px;
      }

      .czp-card {
        padding: 12px 10px;
      }

      .czp-zone-badge {
        font-size: 12px;
        padding: 6px 10px;
      }

      .czp-zone-name {
        font-size: 14px;
      }

      .czp-zone-meaning {
        font-size: 11.5px;
      }

      .zoning-stat-value {
        font-size: 16px;
      }

      .zoning-stat-label {
        font-size: 9px;
      }

      .multifamily-finance-card {
        padding: 16px 12px;
      }

      .multifamily-finance-subtitle {
        font-size: 11.5px;
      }

      #multifamilyView {
        padding-bottom: 88px;
      }

      .multifamily-preset-toolbar {
        padding: 10px;
      }

      .draw-siteplan-iframe {
        height: clamp(260px, 48vh, 440px);
      }

      #optionsEnvelopeIframe.draw-siteplan-iframe,
      #optionsEnvelopeIframeAddition.draw-siteplan-iframe {
        height: clamp(325px, 60vh, 550px);
      }

      #multifamilyLotCanvasIframe.draw-siteplan-iframe {
        height: clamp(380px, 64vh, 680px);
      }
    }

    /* Short-viewport fix: tighten form so submit fits on iPhone SE (667px) */
    @media (max-height: 700px) {
      .chat-container.welcome-centered .welcome-state {
        padding-top: clamp(2px, 0.8vh, 8px);
      }

      .lead-capture-form {
        padding: 8px 10px 12px;
      }

      .lead-capture-form .form-group {
        margin-bottom: clamp(4px, 0.8vh, 8px);
      }

      .form-consent {
        padding: 10px 12px 8px;
        margin-top: 4px;
      }
    }

    /* Old mode-bar CSS removed - replaced by chat-input-dock styles */

    /* ===== CHAT INPUT DOCK (Buttons + Input Wrapper) ===== */
    .chat-input-dock {
      border: 1px solid var(--chat-border);
      border-radius: 16px;
      background: var(--chat-bg);
      padding: 0;
      overflow: hidden;
      transition: border-color 0.3s ease, box-shadow 0.3s ease;
    }

    .chat-input-dock:focus-within {
      border-color: rgba(200, 16, 46, 0.35);
      box-shadow: 0 0 0 3px rgba(200, 16, 46, 0.08);
    }

    .dock-buttons {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      padding: 12px 12px 0 12px;
    }

    .dock-ctas {
      display: flex;
      gap: 8px;
      justify-content: center;
      width: 100%;
    }

    .dock-cta {
      display: flex;
      align-items: center;
      gap: 0;
      padding: 8px 16px;
      border: none;
      border-radius: 10px;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.2s ease;
      white-space: nowrap;
      color: #fff;
      flex: 1;
      justify-content: center;
    }

    .dock-cta svg {
      display: none;
    }

    .dock-cta.siteplan {
      background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
      box-shadow: 0 2px 8px rgba(34, 197, 94, 0.28);
    }

    .dock-cta.siteplan:hover {
      background: linear-gradient(135deg, #34d399 0%, #22c55e 100%);
      transform: translateY(-1px);
      box-shadow: 0 4px 12px rgba(34, 197, 94, 0.36);
    }

    .dock-cta.contractor {
      background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
      box-shadow: 0 2px 8px rgba(99, 102, 241, 0.25);
    }

    .dock-cta.contractor:hover {
      background: linear-gradient(135deg, #818cf8 0%, #6366f1 100%);
      transform: translateY(-1px);
      box-shadow: 0 4px 12px rgba(99, 102, 241, 0.35);
    }

    .dock-cta:disabled {
      opacity: 0.4;
      cursor: not-allowed;
      transform: none !important;
    }

    .dock-mode-toggle {
      display: flex;
      align-items: center;
      gap: 4px;
      padding: 4px;
      background: var(--chat-bg-secondary);
      border: 1px solid var(--chat-border);
      border-radius: 10px;
      width: 100%;
    }

    .dock-mode-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0;
      flex: 1;
      padding: 8px 16px;
      border: none;
      border-radius: 8px;
      font-size: 13px;
      font-weight: 500;
      cursor: pointer;
      color: #64748b;
      background: transparent;
      transition: all 0.25s ease;
      white-space: nowrap;
    }

    .dock-mode-btn svg {
      display: none;
    }

    .dock-mode-btn:hover {
      color: #1a1a2e;
      background: var(--chat-bg-tertiary);
    }

    .dock-mode-btn.active {
      background: linear-gradient(135deg, #d4172f 0%, #b80d24 100%);
      color: #ffffff;
      box-shadow: 0 3px 12px -2px rgba(200, 16, 46, 0.35);
    }

    .dock-mode-btn.active svg {
      filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.3));
    }

    .dock-mode-btn:disabled {
      opacity: 0.35;
      cursor: not-allowed;
      pointer-events: none;
    }

    @media (max-width: 768px) {
      .dock-ctas {
        width: auto;
        flex-wrap: wrap;
        justify-content: center;
      }

      .dock-cta {
        flex: 0 0 auto;
        width: auto;
        max-width: 100%;
        min-height: 44px;
        padding: 11px 16px;
      }
    }

    /* Pulse + glow animation on the dock map button when map generates */
    .dock-mode-btn[data-mode="map"].pulse {
      animation: dockMapPulse 1.4s ease-in-out 0.3s 5;
    }

    @keyframes dockMapPulse {
      0%, 100% {
        box-shadow: none;
        transform: scale(1);
      }
      50% {
        box-shadow: 0 0 0 5px rgba(200, 16, 46, 0.25), 0 0 18px rgba(200, 16, 46, 0.3), 0 0 40px rgba(200, 16, 46, 0.1);
        transform: scale(1.04);
      }
    }

    /* Separator between buttons and input */
    .dock-buttons + .input-container {
      border-top: 1px solid var(--chat-border);
    }

    /* Input container inside dock */
    .chat-input-dock .input-container {
      padding: 8px 10px;
      margin: 0;
    }

    .chat-input-dock .chat-input-wrapper {
      margin: 0;
    }

    /* ===== FULL-SCREEN MAP MODE ===== */
    .map-mode-container {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 400;
      background: var(--chat-bg);
    }

    .map-mode-iframe {
      width: 100%;
      height: 100%;
      border: none;
      display: block;
    }

    /* When map mode is active, hide chat elements but keep dock buttons visible */
    body.map-mode-active .chat-container {
      display: none !important;
    }

    body.map-mode-active .chat-input-area {
      display: none !important;
    }

    /* Floating "Back to Chat" toggle in map mode */
    .map-chat-toggle {
      display: none;
      position: fixed;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 1200;
      padding: 4px;
      background: var(--chat-bg);
      border: 1px solid var(--chat-border);
      border-radius: 14px;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
      gap: 4px;
    }

    body.map-mode-active .map-chat-toggle {
      display: flex;
    }

    .map-chat-toggle .dock-mode-btn {
      padding: 10px 22px;
      font-size: 14px;
      border-radius: 11px;
    }

    /* Hide sidebar open button in map mode */
    body.map-mode-active .sidebar-open-btn {
      display: none !important;
    }

    .footer-map-container {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      overflow: visible;
      background: var(--chat-bg-secondary);
      border-top: none;
      z-index: 250;
      transition: transform 0.3s ease;
      display: none !important; /* Replaced by map mode */
    }

    /* Blur fade at top of map - blends into content above */
    .footer-map-container::before {
      content: '';
      position: absolute;
      top: -24px;
      left: 0;
      right: 0;
      height: 24px;
      background: linear-gradient(to top, var(--chat-bg-secondary), transparent);
      pointer-events: none;
      z-index: 11;
    }

    .footer-map-container.minimized {
      transform: translateY(calc(100% - 44px));
    }

    .footer-map-container.collapsed {
      transform: translateY(100%);
    }

    /* Collapse toggle handle, protrudes above the map container */
    .footer-map-collapse-handle {
      position: absolute;
      top: -24px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 12;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 56px;
      height: 24px;
      background: #ffffff;
      border-radius: 12px 12px 0 0;
      cursor: pointer;
      border: 1px solid var(--chat-border);
      border-bottom: none;
      box-shadow: 0 -2px 8px rgba(0,0,0,0.06);
      transition: background 0.15s;
    }

    .footer-map-collapse-handle:hover {
      background: #f1f5f9;
    }

    .footer-map-collapse-handle svg {
      width: 18px;
      height: 18px;
      color: #64748b;
      transition: transform 0.3s ease;
    }

    /* Chevron points down when map is expanded (click to collapse) */
    .footer-map-collapse-handle svg {
      transform: rotate(180deg);
    }

    /* Chevron points up when map is collapsed (click to expand) */
    .footer-map-container.collapsed .footer-map-collapse-handle svg {
      transform: rotate(0deg);
    }

    /* When collapsed, hide the iframe to save resources */
    .footer-map-container.collapsed .footer-map-iframe {
      visibility: hidden;
    }

    .footer-map-header {
      display: none; /* Hidden - map shows directly */
      align-items: center;
      justify-content: space-between;
      padding: 10px 16px;
      background: var(--chat-bg-tertiary);
      border-bottom: 1px solid var(--chat-border);
      cursor: pointer;
    }

    .footer-map-header:hover {
      background: var(--chat-bg-secondary);
    }

    .footer-map-info {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .footer-map-address {
      font-weight: 600;
      font-size: 14px;
      color: var(--chat-text);
    }

    .footer-map-estimate {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 6px 14px;
      background: linear-gradient(135deg, rgba(34, 197, 94, 0.15) 0%, rgba(22, 163, 74, 0.15) 100%);
      border: 1px solid rgba(34, 197, 94, 0.3);
      border-radius: 6px;
      margin-left: auto;
    }

    .footer-map-estimate-label {
      font-size: 11px;
      color: var(--chat-text-secondary);
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .footer-map-estimate-value {
      font-size: 14px;
      font-weight: 700;
      color: #22c55e;
      font-family: 'JetBrains Mono', monospace;
    }

    .footer-map-estimate-range {
      font-size: 11px;
      color: var(--chat-text-muted);
    }

    .footer-map-zone {
      font-size: 11px;
      background: var(--accent);
      padding: 3px 10px;
      border-radius: 4px;
      color: white;
      font-weight: 600;
      font-family: 'JetBrains Mono', monospace;
    }

    .footer-map-project {
      font-size: 12px;
      color: var(--chat-text-secondary);
      background: var(--chat-bg);
      padding: 4px 10px;
      border-radius: 4px;
    }

    .footer-map-controls {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .footer-map-btn {
      padding: 6px 12px;
      background: transparent;
      border: 1px solid var(--chat-border);
      border-radius: 6px;
      color: var(--chat-text-secondary);
      font-size: 12px;
      cursor: pointer;
      transition: all 0.15s;
    }

    .footer-map-btn:hover {
      background: var(--chat-bg);
      color: var(--chat-text);
      border-color: var(--chat-text-muted);
    }

    .footer-map-btn.primary {
      background: var(--accent);
      border-color: var(--accent);
      color: white;
    }

    .footer-map-btn.primary:hover {
      background: var(--accent-hover);
      border-color: var(--accent-hover);
    }

    .footer-map-toggle {
      width: 32px;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: transparent;
      border: none;
      color: var(--chat-text-secondary);
      cursor: pointer;
      border-radius: 6px;
      transition: all 0.15s;
    }

    .footer-map-toggle:hover {
      background: var(--chat-bg);
      color: var(--chat-text);
    }

    .footer-map-toggle svg {
      width: 18px;
      height: 18px;
      transition: transform 0.3s ease;
    }

    .footer-map-container.minimized .footer-map-toggle svg {
      transform: rotate(180deg);
    }

    .footer-map-iframe {
      width: 100%;
      height: 455px;
      border: none;
      display: block;
      /* Ensure iframe receives all pointer events */
      pointer-events: auto;
      touch-action: manipulation;
    }

    /* Prevent parent from capturing iframe events */
    .footer-map-container:not(.minimized) .footer-map-iframe {
      position: relative;
      z-index: 10;
    }

    /* Legacy has-footer-map rules (no longer used, map is now a separate mode) */

    /* Hide the old border animation elements */
    .address-border-animation {
      display: none !important;
    }


    /* Legacy mobile footer map rules removed, map is now a separate full-screen mode */
    
    /* Toast Notifications */
    .toast {
      position: fixed;
      bottom: 5rem;
      left: 50%;
      transform: translateX(-50%) translateY(100px);
      background: #1f2937;
      border: 1px solid #374151;
      padding: 1rem 1.5rem;
      border-radius: 12px;
      font-weight: 500;
      color: #f5f5f5;
      box-shadow: 0 10px 40px rgba(0,0,0,0.3);
      opacity: 0;
      transition: all 0.3s ease;
      z-index: 100000;
    }

    .toast.visible {
      transform: translateX(-50%) translateY(0);
      opacity: 1;
    }
    
    .toast.success {
      background: #065f46;
      border-color: #10b981;
    }
    
    .toast.error {
      background: #991b1b;
      border-color: #dc2626;
    }
    
    /* Payment Modal */
    .payment-modal-overlay {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.5);
      backdrop-filter: blur(3px);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 99999;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition: opacity 0.2s ease, visibility 0.2s ease;
    }
    
    .payment-modal-overlay.visible {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
    }
    
    .payment-modal {
      background: white;
      border-radius: 12px;
      padding: 1.5rem;
      max-width: 400px;
      width: 92%;
      max-height: 85vh;
      overflow-y: auto;
      box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.3);
      transform: translateY(20px) scale(0.95);
      transition: transform 0.2s ease;
      position: relative;
      pointer-events: auto;
    }
    
    .payment-modal-overlay.visible .payment-modal {
      transform: translateY(0) scale(1);
    }
    
    .payment-modal * {
      pointer-events: auto;
    }
    
    .payment-modal-close {
      position: absolute;
      top: 0.75rem;
      right: 0.75rem;
      width: 28px;
      height: 28px;
      border-radius: 6px;
      border: none;
      background: transparent;
      color: #9ca3af;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.25rem;
      transition: all 0.15s ease;
    }
    
    .payment-modal-close:hover {
      background: #f3f4f6;
      color: #374151;
    }
    
    .payment-modal-header {
      text-align: center;
      margin-bottom: 1rem;
      padding-right: 1.5rem;
    }
    
    .payment-modal-header h3 {
      font-size: 1.25rem;
      font-weight: 600;
      color: #111827;
      margin-bottom: 0.25rem;
    }
    
    .payment-modal-header p {
      color: #6b7280;
      font-size: 0.85rem;
    }
    
    .payment-features {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0.25rem 0.5rem;
      margin-bottom: 1rem;
      padding: 0.75rem;
      background: #f9fafb;
      border-radius: 8px;
    }
    
    .payment-feature {
      display: flex;
      align-items: center;
      gap: 0.4rem;
      font-size: 0.75rem;
      color: #4b5563;
    }
    
    .payment-feature svg {
      width: 14px;
      height: 14px;
      color: #10b981;
      flex-shrink: 0;
    }
    
    .payment-email-field {
      margin-bottom: 1rem;
    }
    
    .payment-email-field label {
      display: block;
      font-size: 0.8rem;
      font-weight: 500;
      color: #374151;
      margin-bottom: 0.375rem;
    }
    
    .payment-email-field input {
      width: 100%;
      padding: 0.625rem 0.75rem;
      border: 1px solid #d1d5db;
      border-radius: 6px;
      font-size: 0.875rem;
      color: #374151;
      background: #fff;
      transition: border-color 0.15s ease, box-shadow 0.15s ease;
      box-sizing: border-box;
    }
    
    .payment-email-field input:focus {
      outline: none;
      border-color: #c8102e;
      box-shadow: 0 0 0 1px #c8102e;
    }
    
    .payment-email-field input::placeholder {
      color: #9ca3af;
    }
    
    .payment-promo-field {
      margin-bottom: 1rem;
    }
    
    .payment-promo-field label {
      display: block;
      font-size: 0.8rem;
      font-weight: 500;
      color: #374151;
      margin-bottom: 0.375rem;
    }
    
    .payment-promo-row {
      display: flex;
      gap: 0.5rem;
    }
    
    .payment-promo-row input {
      flex: 1;
      padding: 0.625rem 0.75rem;
      border: 1px solid #d1d5db;
      border-radius: 6px;
      font-size: 0.875rem;
      color: #374151;
      background: #fff;
      transition: border-color 0.15s ease, box-shadow 0.15s ease;
      box-sizing: border-box;
    }
    
    .payment-promo-row input:focus {
      outline: none;
      border-color: #c8102e;
      box-shadow: 0 0 0 1px #c8102e;
    }
    
    .payment-promo-row input::placeholder {
      color: #9ca3af;
      text-transform: none;
    }
    
    .payment-promo-btn {
      padding: 0.625rem 1rem;
      background: #f3f4f6;
      border: 1px solid #d1d5db;
      border-radius: 6px;
      font-size: 0.8rem;
      font-weight: 500;
      color: #374151;
      cursor: pointer;
      transition: all 0.15s ease;
      white-space: nowrap;
    }
    
    .payment-promo-btn:hover {
      background: #e5e7eb;
    }
    
    .payment-promo-btn:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }
    
    .payment-promo-status {
      margin-top: 0.375rem;
      font-size: 0.75rem;
      display: none;
    }
    
    .payment-promo-status.success {
      display: block;
      color: #059669;
    }
    
    .payment-promo-status.error {
      display: block;
      color: #dc2626;
    }
    
    .payment-promo-applied {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.5rem 0.75rem;
      background: #ecfdf5;
      border: 1px solid #a7f3d0;
      border-radius: 6px;
      font-size: 0.8rem;
      color: #059669;
    }
    
    .payment-promo-applied .promo-remove {
      margin-left: auto;
      background: none;
      border: none;
      color: #6b7280;
      cursor: pointer;
      font-size: 1rem;
      line-height: 1;
      padding: 0;
    }
    
    .payment-promo-applied .promo-remove:hover {
      color: #dc2626;
    }
    
    #payment-element {
      margin-bottom: 1rem;
      border-radius: 8px;
    }
    
    .payment-error {
      background: #fef2f2;
      border: 1px solid #fecaca;
      color: #dc2626;
      padding: 0.6rem 0.75rem;
      border-radius: 6px;
      font-size: 0.8rem;
      margin-bottom: 0.75rem;
      display: none;
    }
    
    .payment-error.visible {
      display: block;
    }
    
    .payment-submit-btn {
      width: 100%;
      padding: 0.875rem 1.25rem;
      background: #c8102e;
      color: white;
      border: none;
      border-radius: 8px;
      font-size: 0.95rem;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.15s ease;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.5rem;
    }
    
    .payment-submit-btn:hover:not(:disabled) {
      background: #a70f27;
    }
    
    .payment-submit-btn:disabled {
      opacity: 0.6;
      cursor: not-allowed;
    }
    
    .payment-submit-btn .spinner {
      width: 18px;
      height: 18px;
      animation: spin 1s linear infinite;
    }
    
    @keyframes spin {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }
    
    .payment-secure-note {
      text-align: center;
      margin-top: 0.75rem;
      font-size: 0.7rem;
      color: #9ca3af;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.25rem;
    }
    
    .payment-secure-note svg {
      width: 14px;
      height: 14px;
    }