/* M&M Roof Estimator styles — scoped to #mm-estimator-root. Compiled, do not edit. */
#mm-estimator-root .static{position:static}#mm-estimator-root .fixed{position:fixed}#mm-estimator-root .absolute{position:absolute}#mm-estimator-root .relative{position:relative}#mm-estimator-root .mx-auto{margin-left:auto;margin-right:auto}#mm-estimator-root .\!mb-0{margin-bottom:0!important}#mm-estimator-root .mb-2{margin-bottom:.5rem}#mm-estimator-root .mb-3{margin-bottom:.75rem}#mm-estimator-root .mb-8{margin-bottom:2rem}#mm-estimator-root .mt-1{margin-top:.25rem}#mm-estimator-root .mt-1\.5{margin-top:.375rem}#mm-estimator-root .mt-10{margin-top:2.5rem}#mm-estimator-root .mt-12{margin-top:3rem}#mm-estimator-root .mt-14{margin-top:3.5rem}#mm-estimator-root .mt-16{margin-top:4rem}#mm-estimator-root .mt-2{margin-top:.5rem}#mm-estimator-root .mt-20{margin-top:5rem}#mm-estimator-root .mt-24{margin-top:6rem}#mm-estimator-root .mt-3{margin-top:.75rem}#mm-estimator-root .mt-4{margin-top:1rem}#mm-estimator-root .mt-6{margin-top:1.5rem}#mm-estimator-root .mt-8{margin-top:2rem}#mm-estimator-root .block{display:block}#mm-estimator-root .inline{display:inline}#mm-estimator-root .flex{display:flex}#mm-estimator-root .inline-flex{display:inline-flex}#mm-estimator-root .grid{display:grid}#mm-estimator-root .h-0{height:0}#mm-estimator-root .h-14{height:3.5rem}#mm-estimator-root .min-h-\[calc\(100vh-80px\)\]{min-height:calc(100vh - 80px)}#mm-estimator-root .w-auto{width:auto}#mm-estimator-root .min-w-\[140px\]{min-width:140px}#mm-estimator-root .min-w-\[150px\]{min-width:150px}#mm-estimator-root .max-w-2xl{max-width:42rem}#mm-estimator-root .max-w-3xl{max-width:48rem}#mm-estimator-root .max-w-4xl{max-width:56rem}#mm-estimator-root .max-w-5xl{max-width:64rem}#mm-estimator-root .max-w-md{max-width:28rem}#mm-estimator-root .basis-full{flex-basis:100%}#mm-estimator-root .transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}#mm-estimator-root .cursor-pointer{cursor:pointer}#mm-estimator-root .select-none{-webkit-user-select:none;-moz-user-select:none;user-select:none}#mm-estimator-root .flex-col{flex-direction:column}#mm-estimator-root .flex-wrap{flex-wrap:wrap}#mm-estimator-root .items-center{align-items:center}#mm-estimator-root .items-baseline{align-items:baseline}#mm-estimator-root .items-stretch{align-items:stretch}#mm-estimator-root .justify-center{justify-content:center}#mm-estimator-root .justify-between{justify-content:space-between}#mm-estimator-root .gap-1{gap:.25rem}#mm-estimator-root .gap-2{gap:.5rem}#mm-estimator-root .gap-3{gap:.75rem}#mm-estimator-root .gap-6{gap:1.5rem}#mm-estimator-root .space-y-3>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.75rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.75rem*var(--tw-space-y-reverse))}#mm-estimator-root .space-y-8>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(2rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(2rem*var(--tw-space-y-reverse))}#mm-estimator-root .rounded{border-radius:.25rem}#mm-estimator-root .rounded-full{border-radius:9999px}#mm-estimator-root .rounded-lg{border-radius:.5rem}#mm-estimator-root .border{border-width:1px}#mm-estimator-root .border-2{border-width:2px}#mm-estimator-root .border-gray-200{--tw-border-opacity:1;border-color:rgb(229 231 235/var(--tw-border-opacity,1))}#mm-estimator-root .bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}#mm-estimator-root .p-4{padding:1rem}#mm-estimator-root .p-6{padding:1.5rem}#mm-estimator-root .px-12{padding-left:3rem;padding-right:3rem}#mm-estimator-root .px-4{padding-left:1rem;padding-right:1rem}#mm-estimator-root .px-5{padding-left:1.25rem;padding-right:1.25rem}#mm-estimator-root .px-6{padding-left:1.5rem;padding-right:1.5rem}#mm-estimator-root .py-12{padding-top:3rem;padding-bottom:3rem}#mm-estimator-root .py-16{padding-top:4rem;padding-bottom:4rem}#mm-estimator-root .py-2{padding-top:.5rem;padding-bottom:.5rem}#mm-estimator-root .py-2\.5{padding-top:.625rem;padding-bottom:.625rem}#mm-estimator-root .py-20{padding-top:5rem;padding-bottom:5rem}#mm-estimator-root .py-3\.5{padding-top:.875rem;padding-bottom:.875rem}#mm-estimator-root .py-4{padding-top:1rem;padding-bottom:1rem}#mm-estimator-root .text-center{text-align:center}#mm-estimator-root .text-2xl{font-size:1.5rem;line-height:2rem}#mm-estimator-root .text-3xl{font-size:1.875rem;line-height:2.25rem}#mm-estimator-root .text-4xl{font-size:2.25rem;line-height:2.5rem}#mm-estimator-root .text-5xl{font-size:3rem;line-height:1}#mm-estimator-root .text-\[9px\]{font-size:9px}#mm-estimator-root .text-base{font-size:1rem;line-height:1.5rem}#mm-estimator-root .text-sm{font-size:.875rem;line-height:1.25rem}#mm-estimator-root .text-xl{font-size:1.25rem;line-height:1.75rem}#mm-estimator-root .text-xs{font-size:.75rem;line-height:1rem}#mm-estimator-root .font-bold{font-weight:700}#mm-estimator-root .font-extrabold{font-weight:800}#mm-estimator-root .font-normal{font-weight:400}#mm-estimator-root .font-semibold{font-weight:600}#mm-estimator-root .uppercase{text-transform:uppercase}#mm-estimator-root .italic{font-style:italic}#mm-estimator-root .leading-none{line-height:1}#mm-estimator-root .leading-tight{line-height:1.25}#mm-estimator-root .tracking-tight{letter-spacing:-.025em}#mm-estimator-root .tracking-wide{letter-spacing:.025em}#mm-estimator-root .tracking-wider{letter-spacing:.05em}#mm-estimator-root .text-\[\#024d28\]{--tw-text-opacity:1;color:rgb(2 77 40/var(--tw-text-opacity,1))}#mm-estimator-root .text-\[\#34A853\]{--tw-text-opacity:1;color:rgb(52 168 83/var(--tw-text-opacity,1))}#mm-estimator-root .text-\[\#4285F4\]{--tw-text-opacity:1;color:rgb(66 133 244/var(--tw-text-opacity,1))}#mm-estimator-root .text-\[\#EA4335\]{--tw-text-opacity:1;color:rgb(234 67 53/var(--tw-text-opacity,1))}#mm-estimator-root .text-\[\#FBBC05\]{--tw-text-opacity:1;color:rgb(251 188 5/var(--tw-text-opacity,1))}#mm-estimator-root .text-\[\#FEC00F\]{--tw-text-opacity:1;color:rgb(254 192 15/var(--tw-text-opacity,1))}#mm-estimator-root .text-black{--tw-text-opacity:1;color:rgb(0 0 0/var(--tw-text-opacity,1))}#mm-estimator-root .text-gray-500{--tw-text-opacity:1;color:rgb(107 114 128/var(--tw-text-opacity,1))}#mm-estimator-root .text-gray-600{--tw-text-opacity:1;color:rgb(75 85 99/var(--tw-text-opacity,1))}#mm-estimator-root .text-gray-700{--tw-text-opacity:1;color:rgb(55 65 81/var(--tw-text-opacity,1))}#mm-estimator-root .text-gray-800{--tw-text-opacity:1;color:rgb(31 41 55/var(--tw-text-opacity,1))}#mm-estimator-root .text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}#mm-estimator-root .text-white\/70{color:hsla(0,0%,100%,.7)}#mm-estimator-root .text-white\/80{color:hsla(0,0%,100%,.8)}#mm-estimator-root .underline{text-decoration-line:underline}#mm-estimator-root .no-underline{text-decoration-line:none}#mm-estimator-root .shadow-md{--tw-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1);--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color),0 2px 4px -2px var(--tw-shadow-color)}#mm-estimator-root .shadow-md,#mm-estimator-root .shadow-sm{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}#mm-estimator-root .shadow-sm{--tw-shadow:0 1px 2px 0 rgba(0,0,0,.05);--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color)}#mm-estimator-root .blur{--tw-blur:blur(8px)}#mm-estimator-root .blur,#mm-estimator-root .filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}#mm-estimator-root .transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}#mm-estimator-root .hover\:text-white:hover{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}@media (min-width:768px){#mm-estimator-root .md\:h-16{height:4rem}#mm-estimator-root .md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}#mm-estimator-root .md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}#mm-estimator-root .md\:text-2xl{font-size:1.5rem;line-height:2rem}#mm-estimator-root .md\:text-4xl{font-size:2.25rem;line-height:2.5rem}#mm-estimator-root .md\:text-5xl{font-size:3rem}#mm-estimator-root .md\:text-5xl,#mm-estimator-root .md\:text-6xl{line-height:1}#mm-estimator-root .md\:text-6xl{font-size:3.75rem}#mm-estimator-root .md\:text-7xl{font-size:4.5rem;line-height:1}#mm-estimator-root .md\:text-\[10px\]{font-size:10px}}

    #mm-estimator-root {
      --brand-green: #024d28;
      --brand-yellow: #FEC00F;
      --brand-red: #CD2B1C;
      --bg-dark-green: #023528;
      --fine-print: #9fc3a5;
    }

    /* ---- Theme variants ----
       Applied to <body> via URL params (?theme=slate, ?theme=twilight).
       The defaults above always win unless a theme class is added. */

    /* ========================================================
       SLATE THEME, light mode, M&M green text, strategic yellow
       ========================================================
       Page bg: warm cream / white surfaces
       Primary text: near-black
       Headings: M&M brand green
       Pills + cards: green border + green-when-selected (saves
       yellow for CTAs only)
       Yellow uses: primary flow CTAs, progress fill, photo-card
       check badges (signals confirmed selection)
       Black uses: multi-select check chips, focused input borders,
       text on yellow CTAs (already the default)
       ======================================================== */
    #mm-estimator-root.theme-slate {
      --brand-green:   #024d28;
      --brand-yellow:  #FEC00F;
      --brand-red:     #CD2B1C;
      --bg-dark-green: #f6f4ee;  /* warm cream page bg */
      --fine-print:    #3d5944;  /* darker green-gray (WCAG AA on cream) */
      color: #111;
    }

    /* Header, keep white, add a brand-green underline so it reads
       as a deliberate band rather than blending into the cream page. */
    #mm-estimator-root.theme-slate header {
      border-bottom: 3px solid var(--brand-green);
      box-shadow: none;
    }

    /* Sticky nav (stepper + progress bar), keeps the dark M&M default
       look on the slate theme as a contrasting "header band" above the
       light page surface. Stepper, step circles, labels, lines, progress
       band, track, fill, and percent label all inherit their default
       styles; we only need to force the wrapper background to dark
       since --bg-dark-green is overridden to cream in this theme. */
    #mm-estimator-root.theme-slate .sticky-nav { background: #023528; }

    /* Display headings (was yellow-on-dark) → green-on-light. */
    #mm-estimator-root.theme-slate .display { color: var(--brand-green); }

    /* Body text, Tailwind "text-white" flips to near-black. */
    #mm-estimator-root.theme-slate .text-white { color: #111; }
    #mm-estimator-root.theme-slate .text-white\/70 { color: rgba(0,0,0,0.6); }

    /* OptionButton (single-select pill). */
    #mm-estimator-root.theme-slate .opt-btn {
      background: #fff;
      color: var(--brand-green);
      border-color: var(--brand-green);
    }
    #mm-estimator-root.theme-slate .opt-btn:hover { background: rgba(2,77,40,0.06); }
    #mm-estimator-root.theme-slate .opt-btn.selected {
      background: var(--brand-green);
      color: #fff;
    }

    /* Multi-select pill, same colors, black-on-yellow check icon
       (a small touch of yellow that signals "checked"). */
    #mm-estimator-root.theme-slate .opt-btn-multi .opt-icon {
      border-color: var(--brand-green);
      color: var(--brand-green);
    }
    #mm-estimator-root.theme-slate .opt-btn-multi.selected .opt-icon {
      background: #023528;
      color: var(--brand-yellow);
      border-color: #023528;
    }
    #mm-estimator-root.theme-slate .opt-btn-multi.selected {
      background: var(--brand-green);
      color: #fff;
    }

    /* Icon cards (Structure / Size / Pitch). */
    #mm-estimator-root.theme-slate .icon-card {
      background: #fff;
      color: var(--brand-green);
      border-color: var(--brand-green);
    }
    #mm-estimator-root.theme-slate .icon-card:hover { background: rgba(2,77,40,0.06); }
    #mm-estimator-root.theme-slate .icon-card.selected {
      background: var(--brand-green);
      color: #fff;
    }
    #mm-estimator-root.theme-slate .icon-card.selected .icon-card-corner {
      background: #023528;
      color: var(--brand-yellow);
      border-color: #023528;
    }

    /* Photo cards (Current Roof Type / Material Choice / Shingle Type).
       Selected ring goes green; check badge stays yellow as the small
       confirmed-selection accent. */
    #mm-estimator-root.theme-slate .photo-card {
      background: #fff;
      border-color: var(--brand-green);
      color: var(--brand-green);
    }
    #mm-estimator-root.theme-slate .photo-card:hover { background: rgba(2,77,40,0.04); }
    #mm-estimator-root.theme-slate .photo-card.selected {
      box-shadow: 0 0 0 3px var(--brand-green), 0 10px 22px rgba(0,0,0,0.10);
    }
    #mm-estimator-root.theme-slate .photo-card.selected .photo-card-label {
      background: var(--brand-green);
      color: #fff;
    }
    #mm-estimator-root.theme-slate .photo-card-check {
      background: #023528;
      color: var(--brand-yellow);
    }

    /* Summary chip (collapsed section). */
    #mm-estimator-root.theme-slate .summary-chip {
      background: #fff;
      border: 1.5px solid var(--brand-green);
      color: var(--brand-green);
    }
    #mm-estimator-root.theme-slate .summary-chip:hover { background: rgba(2,77,40,0.04); }
    #mm-estimator-root.theme-slate .summary-chip .chip-check {
      background: var(--brand-green);
      color: #fff;
    }
    #mm-estimator-root.theme-slate .summary-chip .chip-label { color: var(--brand-green); }
    #mm-estimator-root.theme-slate .summary-chip .chip-value { color: #111; }
    #mm-estimator-root.theme-slate .summary-chip .chip-edit { color: var(--brand-green); }

    /* Done button, green-outlined, fills on hover (NOT yellow; yellow
       is reserved for forward-flow CTAs). */
    #mm-estimator-root.theme-slate .done-btn {
      color: var(--brand-green);
      border-color: var(--brand-green);
      background: #fff;
    }
    #mm-estimator-root.theme-slate .done-btn:hover {
      background: var(--brand-green);
      color: #fff;
    }

    /* Estimate summary panel (Result page). */
    #mm-estimator-root.theme-slate .estimate-summary {
      background: #fff;
      border-color: var(--brand-green);
    }
    #mm-estimator-root.theme-slate .estimate-label { color: var(--brand-green); }
    #mm-estimator-root.theme-slate .estimate-value { color: #111; }

    /* Contact form inputs. Focus uses black ring for a deliberate
       moment of "you're filling this in now" emphasis. */
    #mm-estimator-root.theme-slate .contact-input {
      background: #fff;
      border-color: var(--brand-green);
      color: #111;
    }
    #mm-estimator-root.theme-slate .contact-input::placeholder { color: rgba(0,0,0,0.50); }
    #mm-estimator-root.theme-slate .contact-input:focus {
      border-color: #000;
      background: #fff;
    }
    #mm-estimator-root.theme-slate .contact-input.invalid {
      border-color: var(--brand-red);
      background: rgba(205,43,28,0.04);
    }
    #mm-estimator-root.theme-slate .contact-label { color: var(--brand-green); }
    #mm-estimator-root.theme-slate .contact-label .optional { color: rgba(0,0,0,0.55); }
    #mm-estimator-root.theme-slate .contact-consent { color: rgba(0,0,0,0.65); }

    /* Per-structure config panels. */
    #mm-estimator-root.theme-slate .struct-sub {
      background: rgba(2,77,40,0.04);
      border-color: var(--brand-green);
    }
    #mm-estimator-root.theme-slate .struct-sub-label { color: var(--brand-green); }
    #mm-estimator-root.theme-slate .struct-checkbox { color: #111; }
    #mm-estimator-root.theme-slate .struct-checkbox .box {
      border-color: var(--brand-green);
      color: var(--brand-green);
      background: #fff;
    }

    /* Logo fallback (text version), uses var(--brand-green), already correct. */

    /* Reviews bar on Landing, already light bg, just ensure text reads. */
    #mm-estimator-root.theme-slate .text-\[\#024d28\] { color: var(--brand-green); }

    /* Cost legend / progress dots. */
    #mm-estimator-root.theme-slate .progress-dot { background: rgba(2,77,40,0.20); }
    #mm-estimator-root.theme-slate .progress-dot.filled { background: var(--brand-green); }

    /* Stale-field highlight, yellow on dark reads as alert; on light
       we lean harder on the yellow background for the message chip. */
    #mm-estimator-root.theme-slate .field-stale { border-left-color: var(--brand-yellow); }
    #mm-estimator-root.theme-slate .field-stale-msg {
      color: #000;
      background: var(--brand-yellow);
      padding: 2px 8px;
      border-radius: 4px;
    }

    /* ========================================================
       TWILIGHT THEME, deep moody dark variant
       ======================================================== */
    #mm-estimator-root.theme-twilight {
      --brand-green:  #1d4a3a;
      --brand-yellow: #f7d168;
      --brand-red:    #e8615a;
      --bg-dark-green: #0a1820;
      --fine-print:   #7fa8a3;
    }

    #mm-estimator-root, #mm-estimator-root { background: var(--bg-dark-green); }
    #mm-estimator-root {
      font-family: 'Inter', system-ui, -apple-system, sans-serif;
      margin: 0;
      color: white;
      -webkit-font-smoothing: antialiased;
    }
    #mm-estimator-root .display {
      font-family: 'Bebas Neue', 'Inter', sans-serif;
      letter-spacing: 0.01em;
    }
    #mm-estimator-root .btn-yellow {
      background: var(--brand-yellow);
      color: #000;
      font-weight: 700;
      border: 2px solid var(--brand-yellow);
      transition: transform 80ms ease, box-shadow 120ms ease;
    }
    #mm-estimator-root .btn-yellow:hover:not(:disabled) {
      box-shadow: 0 4px 18px rgba(254,192,15,0.35);
      transform: translateY(-1px);
    }
    #mm-estimator-root .btn-yellow:disabled { opacity: 0.4; cursor: not-allowed; }
    #mm-estimator-root .opt-btn {
      background: transparent;
      color: var(--brand-yellow);
      border: 2px solid var(--brand-yellow);
      font-weight: 700;
      transition: all 100ms ease;
      white-space: nowrap;
    }
    #mm-estimator-root .opt-btn:hover { background: rgba(254,192,15,0.12); }
    #mm-estimator-root .opt-btn.selected { background: var(--brand-yellow); color: #000; }

    /* Multi-select variant: squared-off corners + leading icon to signal
       "checkbox" behavior (pick many) instead of "radio" (pick one). */
    #mm-estimator-root .opt-btn-multi {
      border-radius: 0.5rem;  /* rounded-md, not rounded-full */
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }
    #mm-estimator-root .opt-btn-multi .opt-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 18px;
      height: 18px;
      border-radius: 4px;
      border: 1.5px solid var(--brand-yellow);
      font-size: 12px;
      line-height: 1;
      font-weight: 700;
      transition: all 100ms ease;
    }
    #mm-estimator-root .opt-btn-multi.selected .opt-icon {
      background: #023528;
      color: var(--brand-yellow);
      border-color: #023528;
    }
    #mm-estimator-root .opt-btn-multi:not(.selected) .opt-icon {
      color: var(--brand-yellow);
      background: transparent;
    }
    #mm-estimator-root .progress-dot {
      width: 8px; height: 8px; border-radius: 9999px;
      background: rgba(255,255,255,0.22);
      transition: background 200ms ease;
    }
    #mm-estimator-root .progress-dot.filled { background: var(--brand-yellow); }
    #mm-estimator-root .fine-print { color: var(--fine-print); }
    #mm-estimator-root .fade-in { animation: fadeIn 220ms ease-out; }
    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(6px); }
      to { opacity: 1; transform: translateY(0); }
    }
    /* Logo placeholder styling, replace with real <img> when available */
    #mm-estimator-root .logo-text { color: var(--brand-green); }

    /* ---- Sticky nav wrapper (Stepper + ProgressBar) ----
       Pinned to the top of the viewport once the user scrolls past the
       white header above it. The `is-stuck` class is toggled by an
       IntersectionObserver in App and fades a soft drop shadow in so the
       transition from in-flow to pinned feels deliberate, not abrupt. */
    #mm-estimator-root .sticky-nav {
      position: sticky;
      top: 0;
      z-index: 50;
      background: var(--bg-dark-green);
      box-shadow: 0 0 0 rgba(0,0,0,0);
      transition: box-shadow 260ms ease;
    }
    #mm-estimator-root .sticky-nav.is-stuck {
      box-shadow: 0 6px 18px rgba(0,0,0,0.32);
    }

    /* ---- Dev theme picker (only shown with ?theme=picker) ----
       Floating panel in the bottom-right that swaps theme variants
       without retyping the URL. Removable in one block when we lock
       a final theme. */
    #mm-estimator-root .theme-picker {
      position: fixed;
      bottom: 16px;
      right: 16px;
      z-index: 200;
      background: rgba(15,15,15,0.92);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      border: 1px solid rgba(255,255,255,0.16);
      border-radius: 12px;
      padding: 10px;
      display: flex;
      flex-direction: column;
      gap: 4px;
      font-family: 'Inter', sans-serif;
      font-size: 12px;
      color: white;
      min-width: 184px;
      box-shadow: 0 12px 28px rgba(0,0,0,0.45);
    }
    #mm-estimator-root .theme-picker-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.55);
      padding: 2px 6px 8px;
    }
    #mm-estimator-root .theme-picker-close {
      background: none;
      border: none;
      color: rgba(255,255,255,0.55);
      cursor: pointer;
      font-size: 16px;
      padding: 0;
      line-height: 1;
    }
    #mm-estimator-root .theme-picker-close:hover { color: white; }
    #mm-estimator-root .theme-picker-option {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 6px 8px;
      border-radius: 8px;
      background: transparent;
      border: 1px solid transparent;
      cursor: pointer;
      text-align: left;
      font: inherit;
      color: inherit;
      width: 100%;
      transition: background 120ms ease, border-color 120ms ease;
    }
    #mm-estimator-root .theme-picker-option:hover { background: rgba(255,255,255,0.08); }
    #mm-estimator-root .theme-picker-option.active {
      border-color: var(--brand-yellow);
      background: rgba(254,192,15,0.10);
    }
    #mm-estimator-root .theme-picker-swatches {
      display: inline-flex;
      gap: 0;
      height: 18px;
      border-radius: 4px;
      overflow: hidden;
      flex-shrink: 0;
    }
    #mm-estimator-root .theme-picker-swatches span {
      display: block;
      width: 10px;
      height: 18px;
    }
    #mm-estimator-root .theme-picker-name { flex: 1; font-weight: 600; }

    /* ---- Stepper (Home Details → Requests → Estimate) ---- */
    #mm-estimator-root .stepper {
      background: rgba(0,0,0,0.18);
      padding: 1.25rem 1rem 0.5rem;
    }
    #mm-estimator-root .step-list {
      display: flex;
      align-items: flex-start;
      justify-content: center;
      list-style: none;
      margin: 0 auto;
      padding: 0;
      max-width: 640px;
    }
    #mm-estimator-root .step-item {
      display: flex;
      align-items: flex-start;
      flex: 1;
    }
    #mm-estimator-root .step-item:last-child { flex: 0 0 auto; }
    #mm-estimator-root .step-btn {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      background: transparent;
      border: none;
      padding: 0;
      font: inherit;
      color: inherit;
      cursor: default;
      min-width: 86px;
      flex-shrink: 0;
    }
    #mm-estimator-root .step-item.clickable .step-btn { cursor: pointer; }
    #mm-estimator-root .step-circle {
      width: 32px;
      height: 32px;
      border-radius: 9999px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-weight: 700;
      font-size: 14px;
      border: 2px solid rgba(255,255,255,0.25);
      background: transparent;
      color: rgba(255,255,255,0.5);
      transition: all 200ms ease;
    }
    #mm-estimator-root .step-item.current .step-circle {
      background: var(--brand-yellow);
      border-color: var(--brand-yellow);
      color: #000;
      box-shadow: 0 0 0 4px rgba(254,192,15,0.18);
    }
    #mm-estimator-root .step-item.complete .step-circle {
      background: transparent;
      border-color: var(--brand-yellow);
      color: var(--brand-yellow);
    }
    #mm-estimator-root .step-label {
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      font-weight: 600;
      white-space: nowrap;
      color: rgba(255,255,255,0.55);
      transition: color 150ms ease;
    }
    #mm-estimator-root .step-item.current .step-label { color: white; }
    #mm-estimator-root .step-item.complete .step-label { color: rgba(255,255,255,0.85); }
    #mm-estimator-root .step-item.clickable:hover .step-label { color: white; }
    #mm-estimator-root .step-line {
      flex: 1;
      height: 2px;
      background: rgba(255,255,255,0.2);
      margin-top: 15px;  /* aligns line with vertical center of 32px circle */
      min-width: 32px;
      transition: background 250ms ease;
    }
    #mm-estimator-root .step-line.filled { background: var(--brand-yellow); }

    /* ============================================================
       "CHAPTERS" THEME VARIANT   (preview slot: ?theme=dark)
       A subtle, premium assessment->customization mode switch, layered on the
       main Slate look and scoped per-step via body.screen-details /
       body.screen-requests. The base theme and component HTML/CSS are left
       completely untouched; removing .var-chapters fully disables this.

       Home Details  -> "assessment mode": calm, green, quiet. A short green
                        accent rule grounds the hero. Selections stay green.
       Project Requests -> "customization mode": the brand gold becomes the
                        single interactive accent (selected material / package /
                        timeline states + a warmer hero rule), so choosing
                        options feels like configuring, not form-filling.
       No new layouts, heavy backgrounds, or fonts. Just hierarchy + accent.
       ============================================================ */

    /* ---- Hero accent rule: calm green (assess) vs warm gold (customize) ---- */
    #mm-estimator-root.var-chapters.screen-details  main h1.display::after,
    #mm-estimator-root.var-chapters.screen-requests main h1.display::after {
      content: "";
      display: block;
      height: 3px;
      border-radius: 2px;
      margin: 16px auto 0;
    }
    #mm-estimator-root.var-chapters.screen-details main h1.display::after {
      width: 52px;
      background: var(--brand-green);
      opacity: 0.45;
    }
    #mm-estimator-root.var-chapters.screen-requests main h1.display::after {
      width: 76px;
      background: var(--brand-yellow);
    }

    /* ---- Selected states: bold fill, accent by chapter ----
       Home Details keeps the calm GREEN fills from the base theme (assessment
       mode). Requests warms every selection to a GOLD fill so customizing feels
       distinct and tactile. Scoped to .var-chapters; base styles untouched. */

    /* Customization (Requests): gold fills. */
    #mm-estimator-root.var-chapters.screen-requests .opt-btn.selected {
      background: var(--brand-yellow);
      color: #023528;
      border-color: var(--brand-yellow);
    }
    #mm-estimator-root.var-chapters.screen-requests .photo-card.selected {
      box-shadow: 0 0 0 3px var(--brand-yellow), 0 8px 18px rgba(0,0,0,0.10);
    }
    #mm-estimator-root.var-chapters.screen-requests .photo-card.selected .photo-card-label {
      background: var(--brand-yellow);
      color: #023528;
    }
    #mm-estimator-root.var-chapters.screen-requests .package-card.selected {
      box-shadow: 0 0 0 3px var(--brand-yellow), 0 8px 18px rgba(0,0,0,0.10);
    }

    /* ---- Header-visibility previews ----
       Both compact the Done'd chips so completed sections take little vertical
       space, helping the step's title header stay visible longer.
         .var-compact (?theme=dark)     → compact chips only; no auto-scroll, the
                                          header stays put as sections reveal below.
         .var-fit     (?theme=twilight) → also tightens the whole step (smaller
                                          hero, tighter gaps) so it fits in ~one
                                          screen and the header stays on screen.
       Scoped variants; the base and the default Chapters look are untouched. */
    #mm-estimator-root.var-compact .summary-chip,
    #mm-estimator-root.var-fit .summary-chip { padding: 6px 12px; gap: 10px; border-radius: 8px; }
    #mm-estimator-root.var-compact .summary-chip .chip-label,
    #mm-estimator-root.var-fit .summary-chip .chip-label { font-size: 10px; margin-bottom: 1px; }
    #mm-estimator-root.var-compact .summary-chip .chip-value,
    #mm-estimator-root.var-fit .summary-chip .chip-value { font-size: 13px; line-height: 1.2; }
    #mm-estimator-root.var-compact .summary-chip .chip-check,
    #mm-estimator-root.var-fit .summary-chip .chip-check { width: 18px; height: 18px; font-size: 11px; }
    #mm-estimator-root.var-compact .summary-chip .chip-edit,
    #mm-estimator-root.var-fit .summary-chip .chip-edit { width: 24px; height: 24px; }

    /* .var-fit only: shrink the hero and tighten the vertical rhythm of a step
       so it fits in roughly one viewport, keeping its title header visible
       without scrolling. Scoped to the two form steps. Best-effort — very tall
       sections (e.g. all structure sub-config expanded) may still scroll. */
    #mm-estimator-root.var-fit.screen-details main,
    #mm-estimator-root.var-fit.screen-requests main { padding-top: 0.75rem; padding-bottom: 1.25rem; }
    #mm-estimator-root.var-fit.screen-details main h1.display,
    #mm-estimator-root.var-fit.screen-requests main h1.display { font-size: clamp(1.6rem, 5vw, 2.5rem); line-height: 1.05; }
    #mm-estimator-root.var-fit.screen-details main .max-w-3xl > .mt-8,
    #mm-estimator-root.var-fit.screen-requests main .max-w-3xl > .mt-8 { margin-top: 0.5rem; }
    #mm-estimator-root.var-fit.screen-details main .max-w-3xl > .mt-12,
    #mm-estimator-root.var-fit.screen-requests main .max-w-3xl > .mt-12 { margin-top: 1rem; }
    #mm-estimator-root.var-fit.screen-details main .space-y-8 > :not([hidden]) ~ :not([hidden]),
    #mm-estimator-root.var-fit.screen-requests main .space-y-8 > :not([hidden]) ~ :not([hidden]) { margin-top: 1rem; }
    /* Trim the tallest content (roof photos + the label→cards gap) so the
       card-heavy steps fit one screen too. Structure details still scrolls. */
    #mm-estimator-root.var-fit .photo-card-img { height: 88px; }
    #mm-estimator-root.var-fit.screen-details main .font-semibold.mb-3,
    #mm-estimator-root.var-fit.screen-requests main .font-semibold.mb-3 { margin-bottom: 0.5rem; }

    /* ---- Progress bar (sits below stepper, sticky with the nav) ----
       Counts completed sections across Home Details + Requests. Hits 100%
       just before the contact form is shown. */
    #mm-estimator-root .progress-band {
      background: rgba(0,0,0,0.18);
      border-bottom: 1px solid rgba(255,255,255,0.06);
    }
    #mm-estimator-root .progress-inner {
      display: flex;
      align-items: center;
      gap: 14px;
      max-width: 640px;
      margin: 0 auto;
      padding: 10px 1rem 14px;
    }
    #mm-estimator-root .progress-track {
      flex: 1;
      height: 6px;
      background: rgba(255,255,255,0.10);
      border-radius: 3px;
      overflow: hidden;
      position: relative;
    }
    #mm-estimator-root .progress-fill {
      height: 100%;
      background: var(--brand-yellow);
      border-radius: 3px;
      transition: width 320ms cubic-bezier(.4,.2,.2,1);
    }
    #mm-estimator-root .progress-pct {
      font-size: 12px;
      font-weight: 700;
      color: var(--brand-yellow);
      min-width: 44px;
      text-align: right;
      letter-spacing: 0.04em;
      font-variant-numeric: tabular-nums;
    }

    /* ---- Stale field attention (auto-cleared by upstream change) ---- */
    #mm-estimator-root .field-stale {
      border-left: 2px solid var(--brand-yellow);
      padding-left: 14px;
      margin-left: -16px;
      animation: fieldStaleHighlight 1.2s ease-out;
    }
    @keyframes fieldStaleHighlight {
      0%   { background-color: rgba(254,192,15,0.18); }
      100% { background-color: transparent; }
    }
    #mm-estimator-root .field-stale-msg {
      color: var(--brand-yellow);
      font-size: 11px;
      font-weight: 600;
      animation: stalePulse 0.45s ease-out;
    }
    @keyframes stalePulse {
      0%   { opacity: 0; transform: translateX(-4px); }
      100% { opacity: 1; transform: translateX(0); }
    }

    /* ---- Info tooltip ("?" badge on each option) ----
       Absolutely positioned in a corner of an option's wrapper. The wrapper
       must be position:relative. Shows on hover (desktop) and on focus / tap
       (keyboard + mobile, via :focus-within). Bubble is a popover so it can
       extend past the card edge. */
    #mm-estimator-root .infotip {
      position: absolute;
      z-index: 20;
      line-height: 0;
    }
    /* Lift the active tooltip (and its bubble) above neighboring cards/badges. */
    #mm-estimator-root .infotip:hover, #mm-estimator-root .infotip:focus-within { z-index: 80; }
    /* Pills are rounded-full, so float the badge just off the corner for
       breathing room instead of crowding the curved border. */
    #mm-estimator-root .infotip-tr { top: -7px; right: -3px; }
    #mm-estimator-root .infotip-tl { top: 5px; left: 5px; }
    #mm-estimator-root .infotip-dot {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 18px; height: 18px;
      border-radius: 50%;
      background: rgba(0,0,0,0.55);
      color: var(--brand-yellow);
      border: 1px solid var(--brand-yellow);
      font-size: 11px;
      font-weight: 800;
      font-family: inherit;
      cursor: help;
      user-select: none;
      -webkit-tap-highlight-color: transparent;
    }
    #mm-estimator-root .infotip-dot:focus-visible { outline: 2px solid var(--brand-yellow); outline-offset: 2px; }
    #mm-estimator-root.theme-slate .infotip-dot {
      background: #fff;
      color: var(--brand-green);
      border-color: var(--brand-green);
    }
    #mm-estimator-root .infotip-bubble {
      position: absolute;
      top: 24px; right: 0;
      width: 210px;
      max-width: 60vw;
      background: #0c2a1c;
      color: #fff;
      border: 1px solid var(--brand-yellow);
      border-radius: 10px;
      padding: 9px 11px;
      font-size: 11.5px;
      font-weight: 500;
      line-height: 1.4;
      letter-spacing: normal;
      text-align: left;
      text-transform: none;
      box-shadow: 0 8px 22px rgba(0,0,0,0.38);
      opacity: 0;
      visibility: hidden;
      transform: translateY(-4px);
      transition: opacity 130ms ease, transform 130ms ease;
      pointer-events: none;
    }
    #mm-estimator-root .infotip-tl .infotip-bubble { left: 0; right: auto; }
    #mm-estimator-root.theme-slate .infotip-bubble {
      background: #ffffff;
      color: #1a1a1a;
      border-color: var(--brand-green);
    }
    #mm-estimator-root .infotip:hover .infotip-bubble,
    #mm-estimator-root .infotip:focus-within .infotip-bubble {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
      pointer-events: auto;
    }
    /* Inline variant, used next to the Cost Impact legend (not a corner). */
    #mm-estimator-root .infotip-inline { position: relative; display: inline-block; vertical-align: middle; margin-left: 4px; }
    #mm-estimator-root .infotip-inline .infotip-bubble { left: 50%; right: auto; transform: translate(-50%, -4px); width: 230px; }
    #mm-estimator-root .infotip-inline:hover .infotip-bubble,
    #mm-estimator-root .infotip-inline:focus-within .infotip-bubble { transform: translate(-50%, 0); }

    /* ---- Number stepper (used for skylight count) ---- */
    #mm-estimator-root .num-stepper {
      display: inline-flex;
      align-items: center;
      gap: 0;
      border: 2px solid var(--brand-yellow);
      border-radius: 999px;
      overflow: hidden;
      background: transparent;
    }
    #mm-estimator-root .num-stepper button {
      width: 40px;
      height: 40px;
      background: transparent;
      border: none;
      color: var(--brand-yellow);
      font-size: 18px;
      font-weight: 700;
      cursor: pointer;
      transition: background 100ms ease;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }
    #mm-estimator-root .num-stepper button:hover:not(:disabled) { background: rgba(254,192,15,0.15); }
    #mm-estimator-root .num-stepper button:disabled { opacity: 0.35; cursor: not-allowed; }
    #mm-estimator-root .num-stepper-value {
      min-width: 44px;
      text-align: center;
      color: #fff;
      font-weight: 700;
      font-size: 16px;
      font-variant-numeric: tabular-nums;
      padding: 0 6px;
    }
    #mm-estimator-root.theme-slate .num-stepper { border-color: var(--brand-green); }
    #mm-estimator-root.theme-slate .num-stepper button { color: var(--brand-green); }
    #mm-estimator-root.theme-slate .num-stepper button:hover:not(:disabled) { background: rgba(2,77,40,0.10); }
    #mm-estimator-root.theme-slate .num-stepper-value { color: #111; }

    /* ---- Structure card inline expansion ---- */
    #mm-estimator-root .struct-card { display: flex; flex-direction: column; gap: 12px; }
    #mm-estimator-root .struct-sub {
      margin-left: 0;
      padding: 14px 16px;
      border-left: 2px solid rgba(254,192,15,0.35);
      background: rgba(254,192,15,0.04);
      border-radius: 0 6px 6px 0;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    #mm-estimator-root .struct-sub-label {
      font-size: 11px;
      letter-spacing: 0.04em;
      font-weight: 700;
      text-transform: uppercase;
      color: rgba(255,255,255,0.65);
    }
    #mm-estimator-root .struct-checkbox {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      cursor: pointer;
      user-select: none;
      color: white;
      font-size: 13px;
      font-weight: 600;
    }
    #mm-estimator-root .struct-checkbox input { display: none; }
    #mm-estimator-root .struct-checkbox .box {
      width: 18px; height: 18px;
      border: 2px solid var(--brand-yellow);
      border-radius: 4px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      transition: all 100ms ease;
    }
    #mm-estimator-root .struct-checkbox input:checked + .box {
      background: #023528;
      color: var(--brand-yellow);
      border-color: #023528;
      font-weight: 700;
    }

    /* ---- Collapsed-section summary chip ---- */
    #mm-estimator-root .summary-chip {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 10px 14px;
      background: rgba(0,0,0,0.18);
      border: 1px solid rgba(254,192,15,0.35);
      border-radius: 10px;
      cursor: pointer;
      transition: all 150ms ease;
      width: 100%;
      text-align: left;
      font: inherit;
      color: white;
    }
    #mm-estimator-root .summary-chip:hover {
      background: rgba(254,192,15,0.08);
      border-color: rgba(254,192,15,0.6);
    }
    #mm-estimator-root .summary-chip .chip-check {
      flex-shrink: 0;
      width: 22px;
      height: 22px;
      border-radius: 9999px;
      background: var(--brand-yellow);
      color: #000;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-weight: 800;
      font-size: 13px;
    }
    #mm-estimator-root .summary-chip .chip-content { flex: 1; min-width: 0; }
    #mm-estimator-root .summary-chip .chip-label {
      font-size: 11px;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      font-weight: 700;
      color: rgba(255,255,255,0.55);
      margin-bottom: 2px;
    }
    #mm-estimator-root .summary-chip .chip-value {
      font-size: 14px;
      font-weight: 600;
      color: white;
      line-height: 1.3;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    #mm-estimator-root .summary-chip .chip-edit {
      flex-shrink: 0;
      width: 28px;
      height: 28px;
      border-radius: 9999px;
      border: 1px solid rgba(254,192,15,0.4);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: var(--brand-yellow);
      transition: all 120ms ease;
    }
    #mm-estimator-root .summary-chip:hover .chip-edit {
      background: var(--brand-yellow);
      color: #000;
      border-color: var(--brand-yellow);
    }

    /* ---- Done button (collapse section back to chip) ---- */
    #mm-estimator-root .done-btn {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 6px 14px;
      background: rgba(254,192,15,0.12);
      border: 1px solid rgba(254,192,15,0.45);
      border-radius: 9999px;
      color: var(--brand-yellow);
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      transition: all 120ms ease;
      cursor: pointer;
    }
    #mm-estimator-root .done-btn:hover {
      background: var(--brand-yellow);
      color: #000;
      border-color: var(--brand-yellow);
    }

    /* ---- Icon card (tall option button with icon + label) ----
       justify-content: space-between distributes icon → label → helper
       evenly so when items-stretch (on the Field row) makes cards equal
       height to match the tallest card in the row, the content stays
       visually balanced instead of clumping at the top. */
    /* Wrapper added so the info tooltip can sit outside the button element. */
    #mm-estimator-root .icon-card-wrap { position: relative; display: flex; }
    #mm-estimator-root .icon-card-wrap > .icon-card { flex: 1 1 auto; }
    #mm-estimator-root .icon-card {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      gap: 6px;
      padding: 14px 12px 12px;
      background: transparent;
      color: var(--brand-yellow);
      border: 2px solid var(--brand-yellow);
      border-radius: 12px;
      font-weight: 700;
      cursor: pointer;
      transition: all 100ms ease;
      width: 116px;
      min-height: 124px;
    }
    #mm-estimator-root .icon-card:hover { background: rgba(254,192,15,0.12); }
    #mm-estimator-root .icon-card.selected {
      background: var(--brand-yellow);
      color: #000;
    }
    #mm-estimator-root .icon-card-multi { border-radius: 10px; }  /* squared-off for checkbox semantics */
    #mm-estimator-root .icon-card-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 56px;
      height: 56px;
    }
    #mm-estimator-root .icon-card-icon svg { width: 100%; height: 100%; display: block; }
    #mm-estimator-root .icon-card-label {
      font-size: 13px;
      line-height: 1.2;
      text-align: center;
    }
    #mm-estimator-root .icon-card-helper {
      font-size: 11px;
      font-weight: 600;
      opacity: 0.7;
      text-align: center;
    }
    #mm-estimator-root .icon-card-corner {
      position: absolute;
      top: 8px; right: 8px;
      width: 20px; height: 20px;
      border-radius: 5px;
      border: 1.5px solid currentColor;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      font-weight: 800;
    }
    #mm-estimator-root .icon-card.selected .icon-card-corner {
      background: #023528;
      color: var(--brand-yellow);
      border-color: #023528;
    }
    /* Pitch icons have a wider, shorter viewbox, give them a wider icon slot */
    #mm-estimator-root .icon-card.pitch .icon-card-icon { width: 80px; height: 40px; }

    /* ---- Photo card (option button with full-width photo + label band) ---- */
    #mm-estimator-root .photo-card {
      position: relative;
      display: flex;
      flex-direction: column;
      background: rgba(255,255,255,0.03);
      color: var(--brand-yellow);
      border: 2px solid var(--brand-yellow);
      border-radius: 14px;
      font-weight: 700;
      cursor: pointer;
      transition: transform 140ms ease, box-shadow 140ms ease, background 140ms ease;
      width: 168px;
      overflow: hidden;
      padding: 0;
    }
    #mm-estimator-root .photo-card:hover {
      transform: translateY(-2px);
      background: rgba(254,192,15,0.08);
    }
    #mm-estimator-root .photo-card.selected {
      box-shadow: 0 0 0 3px var(--brand-yellow), 0 10px 22px rgba(0,0,0,0.28);
    }
    #mm-estimator-root .photo-card-img {
      width: 100%;
      height: 110px;
      object-fit: cover;
      display: block;
      background: #1a1a1a;
    }
    #mm-estimator-root .photo-card-label {
      padding: 10px 8px 12px;
      font-size: 13px;
      line-height: 1.2;
      text-align: center;
      transition: background 140ms ease, color 140ms ease;
    }
    #mm-estimator-root .photo-card.selected .photo-card-label {
      background: var(--brand-yellow);
      color: #000;
    }
    /* Equal-height cards: opt-in via the .pc-fill wrapper class. The card
       button and its label band grow to fill the tallest card in the row, so
       labels of different line counts (e.g. "Synthetic" vs "Metal Standing
       Seam", or "Switch to ...") still produce identically sized cards. Scoped
       to .pc-fill so other photo-card rows (roof type, skylights) are
       unaffected. The fixed 110px image keeps the photo area uniform; only the
       label band absorbs the extra height. */
    #mm-estimator-root .pc-fill { align-self: stretch; }
    #mm-estimator-root .pc-fill .photo-card { flex: 1 1 auto; }
    #mm-estimator-root .pc-fill .photo-card-label {
      flex: 1 1 auto;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    #mm-estimator-root .photo-card-check {
      position: absolute;
      top: 8px; right: 8px;
      width: 26px; height: 26px;
      border-radius: 6px;
      background: #023528;
      color: var(--brand-yellow);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-weight: 800;
      font-size: 14px;
      box-shadow: 0 2px 6px rgba(0,0,0,0.35);
      opacity: 0;
      transform: scale(0.7);
      transition: opacity 160ms ease, transform 160ms ease;
      pointer-events: none;
    }
    #mm-estimator-root .photo-card.selected .photo-card-check {
      opacity: 1;
      transform: scale(1);
    }

    /* ---- Package card (Requests step: Good / Better / Best tier picker) ----
       Content-driven card (no photo). Name large, description below, price
       helper underneath. Per-material content is still being finalized, 
       placeholders for now. */
    #mm-estimator-root .package-card {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      background: transparent;
      color: var(--brand-yellow);
      border: 2px solid var(--brand-yellow);
      border-radius: 14px;
      padding: 18px 16px 18px;
      width: 220px;
      /* flex:1 + parent .items-stretch = all three cards match the tallest */
      flex: 1 1 auto;
      min-height: 200px;
      cursor: pointer;
      transition: transform 140ms ease, box-shadow 140ms ease, background 140ms ease;
      font-family: inherit;
    }
    #mm-estimator-root .package-card:hover { background: rgba(254,192,15,0.08); transform: translateY(-2px); }
    #mm-estimator-root .package-card.selected {
      box-shadow: 0 0 0 3px var(--brand-yellow), 0 10px 22px rgba(0,0,0,0.28);
    }
    #mm-estimator-root .package-card-tier {
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      opacity: 0.55;
      margin-bottom: 4px;
    }
    #mm-estimator-root .package-card-name {
      font-family: 'Bebas Neue', 'Inter', sans-serif;
      font-size: 28px;
      letter-spacing: 0.02em;
      line-height: 1;
    }
    /* One-line value statement directly under the name. */
    #mm-estimator-root .package-card-tagline {
      font-size: 12.5px;
      font-weight: 700;
      letter-spacing: 0.01em;
      margin-top: 7px;
      line-height: 1.25;
    }
    #mm-estimator-root .package-card-divider {
      width: 100%;
      height: 1px;
      background: currentColor;
      opacity: 0.22;
      margin: 12px 0 11px;
    }
    /* Scannable, left-aligned feature list with check icons. */
    #mm-estimator-root .package-card-features {
      list-style: none;
      padding: 0;
      margin: 0 0 2px;
      width: 100%;
      text-align: left;
      display: flex;
      flex-direction: column;
      gap: 7px;
    }
    #mm-estimator-root .package-card-feature {
      display: flex;
      align-items: flex-start;
      gap: 7px;
      font-size: 11.5px;
      font-weight: 500;
      line-height: 1.3;
      opacity: 0.92;
    }
    #mm-estimator-root .package-card-feature .pkg-feat-check {
      flex: 0 0 auto;
      font-weight: 800;
      font-size: 10px;
      line-height: 1.4;
    }
    #mm-estimator-root .package-card-check {
      position: absolute;
      top: 8px; right: 8px;
      width: 24px; height: 24px;
      border-radius: 6px;
      background: #023528;
      color: var(--brand-yellow);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-weight: 800;
      font-size: 13px;
      opacity: 0;
      transform: scale(0.7);
      transition: opacity 160ms ease, transform 160ms ease;
      pointer-events: none;
    }
    #mm-estimator-root .package-card.selected .package-card-check {
      opacity: 1;
      transform: scale(1);
    }
    /* Slate theme overrides */
    #mm-estimator-root.theme-slate .package-card {
      background: #fff;
      color: var(--brand-green);
      border-color: var(--brand-green);
    }
    #mm-estimator-root.theme-slate .package-card:hover { background: rgba(2,77,40,0.04); }
    #mm-estimator-root.theme-slate .package-card.selected {
      box-shadow: 0 0 0 3px var(--brand-green), 0 10px 22px rgba(0,0,0,0.10);
    }
    #mm-estimator-root.theme-slate .package-card-check {
      background: #023528;
      color: var(--brand-yellow);
    }

    /* ---- Estimate summary panel (Result screen) ----
       Sits below the price. Readable label/value rows so users can
       verify what we priced, clearly more legible than fine-print,
       but visually quieter than the price by an order of magnitude. */
    #mm-estimator-root .estimate-summary {
      width: 100%;
      max-width: 480px;
      margin: 28px auto 0;
      padding: 18px 22px;
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(254,192,15,0.22);
      border-radius: 14px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      text-align: left;
    }
    #mm-estimator-root .estimate-row {
      display: grid;
      grid-template-columns: 96px 1fr;
      gap: 14px;
      align-items: baseline;
    }
    #mm-estimator-root .estimate-label {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.09em;
      text-transform: uppercase;
      color: var(--brand-yellow);
      line-height: 1.4;
    }
    #mm-estimator-root .estimate-value {
      color: #fff;
      font-size: 14px;
      font-weight: 500;
      line-height: 1.45;
    }
    @media (max-width: 480px) {
      #mm-estimator-root .estimate-row { grid-template-columns: 1fr; gap: 2px; }
      #mm-estimator-root .estimate-label { font-size: 10px; }
    }

    /* ---- Contact form (interstitial lead capture before Estimate) ---- */
    #mm-estimator-root .contact-form {
      width: 100%;
      max-width: 460px;
      margin: 32px auto 0;
      display: flex;
      flex-direction: column;
      gap: 16px;
      text-align: left;
    }
    #mm-estimator-root .contact-field {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    #mm-estimator-root .contact-label {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.09em;
      text-transform: uppercase;
      color: var(--brand-yellow);
    }
    #mm-estimator-root .contact-label .optional {
      color: rgba(255,255,255,0.45);
      font-weight: 500;
      letter-spacing: normal;
      text-transform: none;
      font-size: 11px;
      margin-left: 6px;
    }
    #mm-estimator-root .contact-input {
      background: rgba(255,255,255,0.05);
      border: 1.5px solid rgba(254,192,15,0.25);
      border-radius: 10px;
      padding: 12px 14px;
      color: #fff;
      font-size: 15px;
      font-weight: 500;
      transition: border-color 120ms ease, background 120ms ease;
      font-family: inherit;
      width: 100%;
    }
    #mm-estimator-root .contact-input::placeholder { color: rgba(255,255,255,0.32); }
    #mm-estimator-root .contact-input:focus {
      outline: none;
      border-color: var(--brand-yellow);
      background: rgba(255,255,255,0.08);
    }
    #mm-estimator-root .contact-input.invalid {
      border-color: #cd2b1c;
      background: rgba(205,43,28,0.06);
    }
    #mm-estimator-root .contact-error {
      font-size: 11px;
      color: #ff8a7e;
      margin-top: 2px;
    }
    #mm-estimator-root .contact-consent {
      margin-top: 6px;
      font-size: 11px;
      color: rgba(255,255,255,0.55);
      line-height: 1.5;
      text-align: center;
    }

    /* SEO/AEO static content section */
    #mm-estimator-root .seo-section { background: #fff; color: #111; }
    #mm-estimator-root .seo-section .tier-card { border-color: var(--brand-green); }
    #mm-estimator-root .seo-section details[open] summary .chev { transform: rotate(90deg); }
    #mm-estimator-root .seo-section summary { list-style: none; }
    #mm-estimator-root .seo-section summary::-webkit-details-marker { display: none; }
    #mm-estimator-root .seo-section summary .chev {
      display: inline-block; width: 10px; transition: transform 150ms ease;
      color: var(--brand-green);
    }