/* Backfill for the full-screen solar/results/thank-you surfaces.
   The mirror's compiled Tailwind CSS is JIT — it only contains the utility classes the LIVE
   site actually rendered. The rebuilt full-screen map takeover, the "N of 3" ring pill, the
   calculating overlay, the results grid and the thank-you page use class combinations the live
   site never emitted, so those utilities are absent from the compiled sheet. Each rule below is
   the exact Tailwind v4 value for a class my new markup depends on that tested MISSING against
   5acb1738980e22fa.css. Load this AFTER funnel.css (and after the compiled sheet). */

/* spacing / sizing */
.p-8{padding:2rem}
.p-10{padding:2.5rem}
.py-16{padding-top:4rem;padding-bottom:4rem}
.py-5{padding-top:1.25rem;padding-bottom:1.25rem}
.mt-7{margin-top:1.75rem}
.mt-10{margin-top:2.5rem}
.my-6{margin-top:1.5rem;margin-bottom:1.5rem}
.top-5{top:1.25rem}
.left-5{left:1.25rem}
.bottom-6{bottom:1.5rem}
.left-1\/2{left:50%}
.-translate-x-1\/2{transform:translateX(-50%)}
.size-1\.5{width:.375rem;height:.375rem}
.size-7{width:1.75rem;height:1.75rem}
.size-10{width:2.5rem;height:2.5rem}
.size-20{width:5rem;height:5rem}
.h-16{height:4rem}
.min-w-0{min-width:0}
.min-h-screen{min-height:100vh}
.min-h-full{min-height:100%}
.w-\[calc\(100\%-2\.5rem\)\]{width:calc(100% - 2.5rem)}

/* type / misc */
.font-normal{font-weight:400}
.opacity-90{opacity:.9}
.overflow-y-auto{overflow-y:auto}
.rounded-\[2rem\]{border-radius:2rem}
.text-7xl{font-size:4.5rem;line-height:1}
.text-red-500{color:#ef4444}
.backdrop-blur{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}

/* z-index (assigned via className, not class="") */
.z-\[10\]{z-index:10}
.z-\[20\]{z-index:20}
.z-\[9998\]{z-index:9998}

/* opacity-modified brand colors (sky-950 = rgb(8 47 73)) */
.bg-white\/5{background-color:rgb(255 255 255 / .05)}
.bg-white\/95{background-color:rgb(255 255 255 / .95)}
.bg-sky-950\/20{background-color:rgb(8 47 73 / .2)}
.bg-sky-950\/95{background-color:rgb(8 47 73 / .95)}

/* vertical rhythm */
.space-y-6 > :not([hidden]) ~ :not([hidden]){margin-top:1.5rem}

/* sm: >= 40rem */
@media (min-width:40rem){
  .sm\:p-12{padding:3rem}
  .sm\:p-14{padding:3.5rem}
  .sm\:text-8xl{font-size:6rem;line-height:1}
}

/* md: >= 48rem */
@media (min-width:48rem){
  .md\:flex{display:flex}
  .md\:top-7{top:1.75rem}
  .md\:top-8{top:2rem}
  .md\:left-7{left:1.75rem}
  .md\:bottom-8{bottom:2rem}
  .md\:size-7{width:1.75rem;height:1.75rem}
  .md\:size-8{width:2rem;height:2rem}
  .md\:size-14{width:3.5rem;height:3.5rem}
  .md\:size-16{width:4rem;height:4rem}
  .md\:grid-cols-\[minmax\(0\,0\.85fr\)_minmax\(0\,1fr\)\]{grid-template-columns:minmax(0,0.85fr) minmax(0,1fr)}
  .md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ---- standalone step pages (live: every step after the inline start is its own page) ---- */
/* Full-viewport host carrying the live wrapper classes (flex bg-blue-100 p-4 sm:p-8 md:p-12
   min-h-dvh); fixed because here it overlays the mirrored lander instead of replacing it. */
.pf-pagehost{position:fixed;inset:0;z-index:9997;overflow-y:auto;min-height:100dvh}
/* Inline name-step mount: the funnel root must be transparent to the flex chain so the
   card becomes a direct flex child of the min-aspect-video wrapper (exactly like live),
   letting `flex grow flex-col` + align-items:stretch fill the 16:9 height (else card
   collapses to content ~434px instead of 576px). */
.pf-root{display:contents}
/* VERBATIM from the live site's stylesheet (captured off solar.path.energy 2026-08-22):
   float-padding hack = min-height of 56.25% of the wrapper's own width (1024px max-w-5xl
   => 576px), content can grow past it. Live card measures exactly 1024x576 @ 1280x720. */
.min-aspect-video::before{content:"";float:left;padding-bottom:56.25%}
.min-aspect-video::after{content:"";clear:both;display:table}

/* CTA-box inline address dropdown: the "Or enter address manually" link's indigo hover
   (verbatim off live; indigo-500 = #6366f1) is absent from the JIT sheet. */
.bg-indigo-500{background-color:#6366f1}
.hover\:bg-indigo-500:hover{background-color:#6366f1}

/* draw-pill arbitrary values (verbatim off live /solar, absent from the JIT sheet) */
.text-\[9px\]{font-size:9px}
.ml-\[0\.125rem\]{margin-left:.125rem}
.ml-\[0\.1rem\]{margin-left:.1rem}
.pr-12{padding-right:3rem}
@media (min-width:48rem){.md\:pr-12{padding-right:3rem}}

/* ---- roof-draw vertex handles: white centre dot inside a translucent amber halo (matches live's
       drag-target affordance — the big soft amber circle around each corner). The ::before halo
       overflows the 16px marker box (Leaflet icons aren't clipped) and is centred on the vertex. ---- */
.pf-vertex-wrap{background:none;border:none;overflow:visible}
.pf-vertex{position:relative;width:16px;height:16px;border-radius:9999px;background:#fff;border:2px solid #fbbf24;box-shadow:0 1px 3px rgba(0,0,0,.35);cursor:grab;z-index:1}
.pf-vertex::before{content:"";position:absolute;left:50%;top:50%;width:52px;height:52px;transform:translate(-50%,-50%);border-radius:9999px;background:rgba(251,191,36,.28);pointer-events:none;z-index:-1}
.pf-vertex:hover::before,.pf-vertex:active::before{background:rgba(251,191,36,.4)}
.pf-vertex:active{cursor:grabbing}

/* ---- right-column client photo carousel (34 full-bleed slides + white chip) ---- */
.pf-carousel{background:#f1f5f9}
.pf-slide{position:absolute;inset:0;display:flex;background-size:cover;background-position:center;transform:translateX(100%);transition:transform .5s ease-in-out}
.pf-slide.is-active{transform:translateX(0)}
.pf-slide.is-prev{transform:translateX(-100%)}

/* ---- results-page placeholder booking embed (on-brand: teal-500 / sky-950 / white).
   Scoped .pf-cal-* classes (the JIT sheet has none of these) so a live GHL/Calendly
   iframe can drop straight into #pf-booking later without restyling. ---- */
.p-5{padding:1.25rem}
.mt-4{margin-top:1rem}
.mt-5{margin-top:1.25rem}
.text-slate-900{color:#0f172a}
.text-white\/70{color:rgb(255 255 255 / .7)}
@media (min-width:40rem){.sm\:p-5{padding:1.25rem}.sm\:text-3xl{font-size:1.875rem;line-height:2.25rem}}
/* single column always: the embed lives in the narrow navy results column, so the widget
   stacks month-then-times regardless of viewport width (a viewport media query can't see
   the column is narrow). A live GHL/Calendly iframe replaces #pf-booking's contents. */
.pf-cal{display:grid;gap:1.5rem;grid-template-columns:1fr}
.pf-cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem}
.pf-cal-title{font-weight:500;color:var(--color-sky-950,#082f49);font-size:1.05rem}
.pf-cal-nav{display:flex;gap:.5rem}
.pf-cal-nav button{width:2.25rem;height:2.25rem;border-radius:9999px;border:1px solid #e2e8f0;background:#fff;color:var(--color-sky-950,#082f49);font-size:1.15rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:border-color .15s,color .15s}
.pf-cal-nav button:hover{border-color:var(--color-teal-500,#14b8a6);color:var(--color-teal-500,#14b8a6)}
.pf-cal-weekdays{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;font-size:.7rem;letter-spacing:.05em;text-transform:uppercase;color:#94a3b8;margin-bottom:.5rem}
.pf-cal-days{display:grid;grid-template-columns:repeat(7,1fr);gap:.35rem}
.pf-cal-day{aspect-ratio:1;display:flex;align-items:center;justify-content:center;border-radius:9999px;font-size:.9rem;font-weight:500;color:var(--color-sky-950,#082f49)}
.pf-cal-day.is-blank{visibility:hidden}
.pf-cal-day.is-muted{color:#cbd5e1;font-weight:400}
.pf-cal-day.is-avail{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--color-teal-500,#14b8a6) 35%,transparent);cursor:pointer;transition:background-color .15s,box-shadow .15s}
.pf-cal-day.is-avail:hover{background:#f0fdfa;box-shadow:inset 0 0 0 1px var(--color-teal-500,#14b8a6)}
.pf-cal-day.is-selected{background:var(--color-teal-500,#14b8a6);color:#fff;cursor:pointer}
.pf-cal-times-label{font-weight:500;color:var(--color-sky-950,#082f49);margin-bottom:1rem;font-size:.95rem}
.pf-cal-slots{display:flex;flex-direction:column;gap:.6rem;max-height:16.5rem;overflow-y:auto}
.pf-cal-slot{padding:.7rem 1rem;text-align:center;border:1px solid #e2e8f0;border-radius:.9rem;font-weight:500;color:var(--color-sky-950,#082f49);cursor:pointer;transition:border-color .15s,color .15s}
.pf-cal-slot:hover{border-color:var(--color-teal-500,#14b8a6);color:var(--color-teal-500,#14b8a6)}
.pf-cal-slot.is-selected{background:var(--color-sky-950,#082f49);color:#fff;border-color:var(--color-sky-950,#082f49)}

/* Client-skin gold accent (falls back to Path teal when no skin defines --color-gold). */
.text-gold{color:var(--color-gold-bright,var(--color-teal-500))}
.stroke-gold{stroke:var(--color-gold-bright,var(--color-teal-500))}
.bg-gold{background-color:var(--color-gold,var(--color-teal-500))}

/* Placeholder logo slot (client-logo marquee, in-place skin). Sits on the navy strip. */
.pf-ph-logo{display:inline-flex;align-items:center;justify-content:center;height:40px;min-width:80px;padding:0 14px;border:1.5px dashed color-mix(in srgb,var(--color-gold-bright,#e3c578) 55%,transparent);border-radius:10px;color:rgba(255,255,255,.8);font-size:12px;font-weight:600;letter-spacing:.03em;white-space:nowrap;font-family:var(--font-sans,ui-sans-serif,system-ui,sans-serif)}