/* Permanent-lighting designer (preview.html, /preview/).
   Layout follows Chris's Eaveline prototype (2026-09-25): numbered steps, controls
   card on the left, preview card on the right, pill chips and slider rows.
   Colours are Eaveline's own (red #E03A3E, black, white), taken from the tokens in
   eaveline.css, so the tool matches every other page. --glow stays warm because it
   is the light itself, not brand chrome.
   Every rule is scoped under .eaveline (the tool, including the gate panel),
   .eaveline-page (the page around it) or body.pl-bar-on, so nothing here can
   reach another page. Text contrast is 4.5:1 or better on its own background;
   focus rings are always visible. */

.eaveline-page .pl-page, .eaveline {
  --pl-ground: var(--ink, #0C0C0D);
  --pl-card: var(--raised, #17181A);
  --pl-well: var(--ink-deep, #070708);
  --pl-ink: var(--white, #FFFFFF);
  --pl-ink-2: var(--bone, #F2F2F3);
  --pl-text: var(--muted-2, #B2B5BB);
  --pl-muted: var(--muted-dk, #8E9198);
  --pl-line: var(--line-dark, #2A2C2F);
  --pl-line-2: var(--slate-2, #4A4D52);
  --pl-field: var(--slate-2, #4A4D52);
  --pl-soft: var(--slate, #2A2C2F);
  --pl-red: var(--brass, #E03A3E);
  --pl-red-text: var(--brass-lite, #F0565A);
  --pl-red-deep: var(--brass-ink, #A5272B);
  --pl-red-bg: rgba(224, 58, 62, 0.14);
  --pl-red-line: rgba(224, 58, 62, 0.55);
  --pl-glow: var(--glow, #FFE3B0);
  --pl-track: var(--slate-2, #4A4D52);
  --pl-focus: var(--brass-lite, #F0565A);
  --pl-shadow: 0 18px 44px -18px rgba(0, 0, 0, 0.7);
}

.eaveline [hidden], .eaveline-page [hidden] { display: none !important; }
.eaveline button { font-family: inherit; cursor: pointer; }
.eaveline :focus-visible { outline: 3px solid var(--pl-focus); outline-offset: 2px; }
.eaveline .pl-stage :focus-visible { outline-color: #fff; }

/* ---------- the page: the site's black ground under its header ---------- */
.eaveline-page .pl-page { background: var(--pl-ground); color: var(--pl-ink); padding: calc(var(--header-height, 84px) + 40px) 0 56px; }
.eaveline-page .pl-intro { margin-bottom: 29px; }
.eaveline-page .pl-eyebrow { margin: 0 0 10px; color: var(--pl-red-text); font-size: 12px; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; }
.eaveline-page .pl-h1 { margin: 0 0 10px; color: var(--pl-ink); font-size: clamp(30px, 3.1vw, 44px); font-weight: 800; line-height: 1.15; letter-spacing: -0.03em; }
.eaveline-page .pl-lede { margin: 0; color: var(--pl-text); font-size: 16px; line-height: 1.5; }

/* ---------- tool grid: controls left, preview right; phones stack, preview first ---------- */
.eaveline { color: var(--pl-ink); font-size: 15px; line-height: 1.5; }
.eaveline .pl-tool { display: grid; grid-template-columns: minmax(360px, 0.8fr) minmax(0, 1.45fr); gap: 24px; align-items: start; }
.eaveline .pl-box { min-width: 0; background: var(--pl-card); border: 1px solid var(--pl-line); border-radius: 18px; box-shadow: var(--pl-shadow); }
.eaveline .pl-controls { position: relative; padding: 24px; }
.eaveline .pl-view { display: flex; flex-direction: column; overflow: hidden; }

/* numbered section titles */
.eaveline .pl-title { display: flex; align-items: center; gap: 12px; margin: 0 0 17px; padding: 0; }
.eaveline .pl-title h2 { margin: 0; color: var(--pl-ink); font-size: 18px; font-weight: 700; line-height: 1.25; }
.eaveline .pl-step { flex: none; padding: 6px; border: 1px solid var(--pl-red-line); border-radius: 6px; color: var(--pl-red-text); font-size: 12px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.eaveline .pl-sec { margin: 0 0 24px; padding: 0 0 24px; border: 0; border-bottom: 1px solid var(--pl-line); min-width: 0; }
.eaveline .pl-label { display: block; margin: 0 0 9px; color: var(--pl-ink-2); font-size: 14px; font-weight: 600; }
.eaveline .pl-hint { margin: 10px 0 0; color: var(--pl-muted); font-size: 13px; line-height: 1.4; }

/* small buttons */
.eaveline .pl-mini { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; padding: 8px 11px; border: 1px solid var(--pl-line-2); border-radius: 7px; background: var(--pl-ground); color: var(--pl-ink-2); font-size: 13px; font-weight: 700; line-height: 1.2; white-space: nowrap; }
.eaveline .pl-mini:hover { background: var(--pl-soft); }
.eaveline .pl-mini[aria-pressed="true"] { background: var(--pl-red-bg); border-color: var(--pl-red); color: var(--pl-ink); }
.eaveline .pl-mini-go { background: var(--pl-red); border-color: var(--pl-red); color: #fff; }
.eaveline .pl-mini-go:hover { background: var(--pl-red-deep); }
.eaveline .pl-link { padding: 0; border: 0; background: none; color: var(--pl-red-text); font-size: 13.5px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; text-align: left; }
.eaveline .pl-link:hover { color: var(--pl-ink); }

/* ---------- 01 address ---------- */
.eaveline .pl-input { width: 100%; min-width: 0; padding: 12px 14px; border: 1px solid var(--pl-field); border-radius: 8px; background: var(--pl-ground); color: var(--pl-ink); font-family: inherit; font-size: 16px; }
.eaveline .pl-input::placeholder { color: var(--pl-muted); }
.eaveline .pl-input:focus { outline: none; border-color: var(--pl-red); box-shadow: 0 0 0 3px rgba(224, 58, 62, 0.35); }
.eaveline .pl-input[aria-invalid="true"] { border-color: var(--pl-red-text); }
.eaveline .pl-combo { position: relative; display: flex; gap: 8px; }
.eaveline .pl-go { flex: 0 0 auto; min-height: 48px; padding: 0 14px; border: 1px solid var(--pl-red); border-radius: 8px; background: var(--pl-red); color: #fff; font-size: 13px; font-weight: 700; white-space: nowrap; }
.eaveline .pl-go:hover { background: var(--pl-red-deep); border-color: var(--pl-red-deep); }
.eaveline.pl-busy .pl-measure .pl-go { opacity: 0.7; }
.eaveline .pl-suggest { position: absolute; z-index: 40; top: calc(100% + 4px); left: 0; right: 0; margin: 0; padding: 4px; list-style: none; background: var(--pl-card); border: 1px solid var(--pl-field); border-radius: 10px; box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.8); }
.eaveline .pl-suggest li { padding: 10px 11px; border-radius: 6px; color: var(--pl-ink); font-size: 15px; cursor: pointer; }
.eaveline .pl-suggest li:hover, .eaveline .pl-suggest li[aria-selected="true"] { background: var(--pl-soft); }
.eaveline .pl-msg { margin: 8px 0 0; color: var(--pl-text); font-size: 13.5px; }
.eaveline .pl-msg:empty { display: none; }
.eaveline .pl-msg.is-ok { color: #7fd99a; }
.eaveline .pl-msg.is-warn { color: #f5b26b; }
.eaveline .pl-msg a { color: var(--pl-red-text); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.eaveline #pl-retry { margin-top: 8px; }
.eaveline .pl-stories { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; padding: 12px; border: 1px solid var(--pl-red-line); border-radius: 10px; background: var(--pl-red-bg); }
.eaveline .pl-stories p { flex-basis: 100%; margin: 0; color: var(--pl-ink); }
.eaveline .pl-measured { margin-top: 12px; padding: 12px 14px; border: 1px solid var(--pl-line-2); border-radius: 10px; background: var(--pl-soft); }
.eaveline .pl-feet { margin: 0; color: var(--pl-ink); font-size: 19px; font-weight: 800; line-height: 1.2; }
.eaveline .pl-method { margin: 3px 0 0; color: var(--pl-text); font-size: 13px; }
.eaveline .pl-match { margin-top: 8px; color: var(--pl-ink); font-size: 13.5px; }
.eaveline .pl-stories-toggle { display: flex; gap: 8px; margin-top: 10px; }
.eaveline .pl-attrib { margin: 10px 0 0; padding-top: 8px; border-top: 1px solid var(--pl-line); color: var(--pl-muted); font-size: 11.5px; line-height: 1.45; overflow-wrap: anywhere; }
.eaveline .pl-attrib a { color: inherit; text-decoration: underline; }
.eaveline .pl-alt { margin-top: 12px; }
.eaveline .pl-length { margin-top: 10px; }
.eaveline .pl-length label, .eaveline .pl-quiz label { display: block; margin: 0 0 6px; color: var(--pl-ink-2); font-size: 13px; font-weight: 700; }
.eaveline .pl-inline { display: flex; gap: 8px; }
.eaveline .pl-inline .pl-input { max-width: 140px; }
.eaveline .pl-quiz { margin-top: 10px; }
.eaveline .pl-quiz summary { color: var(--pl-red-text); font-size: 13.5px; font-weight: 700; cursor: pointer; }
.eaveline .pl-quiz[open] summary { margin-bottom: 10px; }
.eaveline .pl-quiz-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 10px; }
.eaveline .pl-quiz-grid .pl-input { margin-top: 5px; padding: 10px; }

/* photo of your home */
.eaveline .pl-photo { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--pl-line); }
.eaveline .pl-photo-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.eaveline .pl-upload { position: relative; display: inline-flex; align-items: center; min-height: 36px; padding: 7px 11px; border: 1px solid var(--pl-line-2); border-radius: 7px; background: var(--pl-ground); color: var(--pl-ink); font-size: 13px; font-weight: 600; cursor: pointer; }
.eaveline .pl-upload:hover { background: var(--pl-soft); border-color: var(--pl-red); }
.eaveline .pl-upload input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.eaveline .pl-upload:focus-within { outline: 3px solid var(--pl-focus); outline-offset: 2px; }
.eaveline .pl-file-name { color: var(--pl-text); font-size: 13px; }

/* ---------- 02 coverage ---------- */
.eaveline .pl-packages { display: grid; gap: 10px; }
.eaveline .pl-packages legend { float: left; width: 100%; }
.eaveline .pl-pkg { position: relative; display: flex; align-items: center; gap: 12px; min-height: 82px; margin: 0; padding: 15px; border: 1px solid var(--pl-line); border-radius: 10px; background: var(--pl-ground); cursor: pointer; }
.eaveline .pl-pkg:hover { border-color: var(--pl-line-2); }
.eaveline .pl-pkg input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.eaveline .pl-radio { flex: none; width: 20px; height: 20px; border: 2px solid var(--pl-line-2); border-radius: 50%; background: var(--pl-ground); }
.eaveline .pl-pkg-copy { display: grid; gap: 5px; min-width: 0; }
.eaveline .pl-pkg-copy strong { color: var(--pl-ink); font-size: 15px; font-weight: 700; }
.eaveline .pl-pkg-copy small { color: var(--pl-text); font-size: 13px; line-height: 1.35; }
.eaveline .pl-pkg-v { align-self: flex-start; margin-left: auto; color: var(--pl-red-text); font-size: 13px; font-weight: 800; white-space: nowrap; }
.eaveline .pl-pkg:has(input:checked) { border-color: var(--pl-red); background: var(--pl-red-bg); box-shadow: 0 0 0 1px var(--pl-red); }
.eaveline .pl-pkg:has(input:checked) .pl-radio { border: 6px solid var(--pl-red); background: #fff; }
.eaveline .pl-pkg:has(input:focus-visible) { outline: 3px solid var(--pl-focus); outline-offset: 2px; }

/* ---------- your next step ---------- */
.eaveline .pl-next { padding: 20px; border: 1px solid var(--pl-line); border-top: 3px solid var(--pl-red); border-radius: 11px; background: var(--pl-ground); }
.eaveline .pl-next-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.eaveline .pl-next-label { color: var(--pl-ink-2); font-size: 14px; font-weight: 700; }
.eaveline .pl-next-title { color: var(--pl-red-text); font-size: 23px; font-weight: 800; line-height: 1.2; }
.eaveline .pl-next-intro { margin: 8px 0 14px; color: var(--pl-text); font-size: 12.5px; line-height: 1.5; }
.eaveline .pl-demo-price { margin: 0; color: var(--pl-ink); font-size: 14px; font-weight: 700; }
.eaveline .pl-next-note { margin: 2px 0 12px; color: var(--pl-text); font-size: 12.5px; }
.eaveline .pl-next-note:empty { display: none; }
.eaveline .pl-price-lock { display: grid; gap: 10px; }
.eaveline .pl-lock-t { color: var(--pl-ink-2); font-size: 13px; font-weight: 600; }
.eaveline .pl-cta { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; min-height: 50px; padding: 14px 16px; border: 1px solid var(--pl-red); border-radius: 8px; background: var(--pl-red); color: #fff; font-size: 14px; font-weight: 800; }
.eaveline .pl-cta:hover { background: var(--pl-red-deep); border-color: var(--pl-red-deep); }
.eaveline .pl-cta span[aria-hidden] { font-size: 20px; line-height: 0; }
.eaveline .pl-price-open { padding: 12px 14px; border: 1px solid var(--pl-red-line); border-radius: 8px; background: var(--pl-card); }
.eaveline .pl-price-big { margin: 0; color: var(--pl-ink); font-size: 23px; font-weight: 800; line-height: 1.2; }
.eaveline .pl-price-note { margin: 5px 0 0; color: var(--pl-text); font-size: 13px; }
.eaveline .pl-rate { margin: 14px 0 0; color: var(--pl-muted); font-size: 12.5px; }
.eaveline .pl-save-row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 14px; margin-top: 8px; }
.eaveline .pl-ccb { color: var(--pl-muted); font-size: 12px; font-weight: 700; }
.eaveline .pl-next .pl-msg { font-size: 12.5px; }
.eaveline .pl-link-out { margin-top: 8px; font-size: 13px; padding: 9px 11px; }

/* ---------- preview card ---------- */
.eaveline .pl-view-top, .eaveline .pl-view-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 17px 21px; font-size: 14px; font-weight: 700; }
.eaveline .pl-live { display: inline-flex; align-items: center; gap: 9px; min-width: 0; color: var(--pl-ink); }
.eaveline .pl-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--pl-glow); box-shadow: 0 0 10px var(--pl-glow); }
.eaveline .pl-tag { flex: none; padding: 6px 10px; border: 1px solid var(--pl-line-2); border-radius: 100px; background: var(--pl-ground); color: var(--pl-ink-2); font-size: 10px; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; }
.eaveline .pl-stage { position: relative; background: var(--pl-well); }
.eaveline .pl-stage-fallback { display: block; width: 100%; height: auto; }
.eaveline.pl-has-canvas .pl-stage-fallback { display: none; }
.eaveline .pl-stage .sle-canvas { display: block; max-width: 100%; }
.eaveline.pl-tracing .pl-stage .sle-canvas { box-shadow: inset 0 0 0 2px var(--pl-red); }
.eaveline .pl-badge { position: absolute; left: 12px; bottom: 12px; z-index: 35; max-width: calc(100% - 24px); padding: 7px 10px; border-radius: 7px; background: rgba(7, 7, 8, 0.78); color: #fff; font-size: 12px; font-weight: 600; line-height: 1.3; pointer-events: none; -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); }
.eaveline .pl-view-bar { min-height: 55px; border-bottom: 1px solid var(--pl-line); color: var(--pl-text); font-size: 13px; }
.eaveline .pl-key { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; color: var(--pl-ink-2); }
.eaveline .pl-key .pl-dot { background: var(--pl-glow); box-shadow: 0 0 9px var(--pl-glow); }

/* tracing (own photo or Custom) */
.eaveline .pl-trace { padding: 16px 21px; border-bottom: 1px solid var(--pl-line); background: var(--pl-ground); }
.eaveline .pl-trace-hint { margin: 0 0 12px; color: var(--pl-text); font-size: 13px; line-height: 1.45; }
.eaveline .pl-trace-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.eaveline .pl-seg { display: inline-flex; overflow: hidden; border: 1px solid var(--pl-line-2); border-radius: 7px; background: var(--pl-ground); }
.eaveline .pl-seg button { min-height: 34px; padding: 7px 12px; border: 0; background: transparent; color: var(--pl-ink-2); font-size: 13px; font-weight: 700; }
.eaveline .pl-seg button[aria-pressed="true"] { background: var(--pl-red); color: #fff; box-shadow: none; }

/* ---------- 03 lighting look ---------- */
.eaveline .pl-look { padding: 20px 22px 22px; }
.eaveline .pl-look-head { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 12px; }
.eaveline .pl-look-head .pl-title { margin: 0; }
.eaveline .pl-tabs { display: flex; gap: 7px; margin: 0 0 8px; border-bottom: 1px solid var(--pl-line); }
.eaveline .pl-tab { margin-bottom: -1px; padding: 10px 13px 9px; border: 0; border-bottom: 3px solid transparent; background: none; color: var(--pl-text); font-size: 14px; font-weight: 800; }
.eaveline .pl-tab:hover { color: var(--pl-ink); }
.eaveline .pl-tab[aria-pressed="true"] { border-bottom-color: var(--pl-red); color: var(--pl-ink); }
.eaveline .pl-status { min-height: 1.4em; margin: 0 0 10px; color: var(--pl-muted); font-size: 12.5px; }
.eaveline .pl-group { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 12px; align-items: start; margin: 0 0 14px; }
.eaveline .pl-cap { padding-top: 10px; color: var(--pl-muted); font-size: 11px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
.eaveline .pl-chips, .eaveline .pl-solid, .eaveline .pl-swatches { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.eaveline .pl-swatches { gap: 8px; }
.eaveline .pl-chip { display: inline-flex; align-items: center; gap: 7px; min-height: 34px; padding: 7px 11px; border: 1px solid var(--pl-line-2); border-radius: 100px; background: var(--pl-ground); color: var(--pl-ink-2); font-size: 13px; font-weight: 700; line-height: 1.1; white-space: nowrap; }
.eaveline .pl-chip:hover { border-color: var(--pl-red-text); }
.eaveline .pl-chip[aria-pressed="true"], .eaveline .pl-color.is-on { border-color: var(--pl-red); background: var(--pl-red); color: #fff; }
.eaveline .pl-sw { width: 14px; height: 14px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35); }
.eaveline .pl-color { position: relative; cursor: pointer; }
.eaveline .pl-color input { width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; }
.eaveline .pl-color input::-webkit-color-swatch-wrapper { padding: 0; }
.eaveline .pl-color input::-webkit-color-swatch { border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 50%; }
.eaveline .pl-color input::-moz-color-swatch { border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 50%; }
.eaveline .pl-color:focus-within { outline: 3px solid var(--pl-focus); outline-offset: 2px; }
.eaveline .pl-swatch { flex: none; width: 32px; height: 32px; padding: 0; border: 2px solid var(--pl-line-2); border-radius: 50%; box-shadow: 0 0 0 2px var(--pl-card); }
.eaveline .pl-swatch:hover { border-color: var(--pl-red-text); }
.eaveline .pl-swatch[aria-pressed="true"] { border-color: #fff; box-shadow: 0 0 0 2px var(--pl-card), 0 0 0 4px var(--pl-red); }
.eaveline .pl-wheel-hint { margin: -4px 0 14px 84px; color: var(--pl-muted); font-size: 13px; }

/* sliders */
.eaveline .pl-sliders { display: grid; gap: 11px; margin-top: 15px; }
.eaveline .pl-slider { display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: 15px; align-items: center; }
.eaveline .pl-slider label { display: flex; flex-direction: column; gap: 1px; color: var(--pl-ink-2); font-size: 13px; font-weight: 800; }
.eaveline .pl-slider output { color: var(--pl-muted); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.eaveline .pl-range { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; margin: 10px 0; border-radius: 6px; background: linear-gradient(90deg, var(--pl-red) var(--fill, 50%), var(--pl-track) var(--fill, 50%)); cursor: pointer; }
.eaveline .pl-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 17px; height: 17px; border: 2px solid #fff; border-radius: 50%; background: var(--pl-red); }
.eaveline .pl-range::-moz-range-thumb { width: 13px; height: 13px; border: 2px solid #fff; border-radius: 50%; background: var(--pl-red); }
.eaveline .pl-toggles { display: flex; flex-wrap: wrap; gap: 4px 22px; margin-top: 10px; }
.eaveline .pl-check { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; color: var(--pl-ink-2); font-size: 13.5px; font-weight: 600; cursor: pointer; }
.eaveline .pl-check input { width: 18px; height: 18px; accent-color: var(--pl-red); }
.eaveline .pl-note { margin: 17px 0 0; color: var(--pl-muted); font-size: 12px; line-height: 1.45; }

/* ---------- gate panel: over the controls card on desktop, slides up on phones ---------- */
.eaveline .pl-gate { position: absolute; inset: 0; z-index: 45; overflow-y: auto; overscroll-behavior: contain; border: 1px solid var(--pl-line-2); border-radius: 18px; background: var(--pl-card); box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.85); opacity: 0; transform: translateX(14px); transition: opacity .25s, transform .25s; }
.eaveline .pl-gate.is-open { opacity: 1; transform: none; }
.eaveline .pl-gate-in { position: relative; padding: 24px 22px 22px; }
.eaveline .pl-gate-x { position: absolute; top: 8px; right: 8px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; color: var(--pl-ink); font-size: 30px; line-height: 1; }
.eaveline .pl-gate-x:hover { background: var(--pl-soft); }
.eaveline .pl-kicker { color: var(--pl-red-text); font-size: 12px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; }
.eaveline .pl-gate h2 { margin: 6px 44px 8px 0; color: var(--pl-ink); font-size: 24px; font-weight: 800; line-height: 1.2; }
.eaveline .pl-gate h2:focus { outline: none; }
.eaveline .pl-gate h2:focus-visible { outline: 3px solid var(--pl-focus); outline-offset: 3px; }
.eaveline .pl-gate-intro { margin: 0 0 10px; color: var(--pl-text); font-size: 14px; }
.eaveline .pl-gate-intro a, .eaveline .pl-gate-fine a { color: var(--pl-red-text); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.eaveline .pl-gate-summary { margin: 0 0 12px; padding: 9px 12px; border-radius: 8px; background: var(--pl-ground); color: var(--pl-ink); font-size: 13px; font-weight: 600; }
.eaveline .pl-gate-summary:empty { display: none; }
/* The LeadConnector form: the site's .form-embed box, fitted to the panel. */
.eaveline .pl-form-embed { max-width: none; margin: 0; border: 0; }
.eaveline .pl-gate-fine { margin: 12px 0 14px; color: var(--pl-text); font-size: 13px; line-height: 1.55; }
.eaveline .pl-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 12px 20px; border-radius: 8px; font-size: 14px; font-weight: 800; letter-spacing: 0.01em; }
.eaveline .pl-gate .pl-btn-2 { width: 100%; border: 1px solid var(--pl-field); background: transparent; color: var(--pl-ink); }
.eaveline .pl-gate .pl-btn-2:hover { background: var(--pl-soft); color: var(--pl-ink); }
.eaveline .pl-thanks { text-align: left; }
.eaveline .pl-check-ic { display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: rgba(127, 217, 154, 0.16); color: #7fd99a; font-size: 24px; font-weight: 800; }
.eaveline .pl-thanks p { color: var(--pl-ink); }

/* the "See my price" / "Get my price" bar */
.eaveline .pl-pricebar { position: fixed; z-index: 55; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--pl-line-2); background: var(--pl-card); box-shadow: 0 -12px 30px -14px rgba(0, 0, 0, 0.8); }
.eaveline .pl-pricebar-t { color: var(--pl-ink); font-size: 14px; font-weight: 700; }
.eaveline .pl-pricebar .pl-btn { width: auto; min-height: 44px; padding: 10px 20px; border: 1px solid var(--pl-red); background: var(--pl-red); color: #fff; }
.eaveline .pl-pricebar .pl-btn:hover { background: var(--pl-red-deep); color: #fff; }
.eaveline .pl-pricebar.is-pill { left: auto; right: 24px; bottom: 24px; padding: 8px 8px 8px 18px; border: 1px solid var(--pl-line-2); border-radius: 999px; }
body.pl-bar-on { padding-bottom: 72px; }
.eaveline .pl-noscript { margin: 16px 0 0; color: var(--pl-ink); }

/* ---------- below the tool: the estimate explainer and the small print ---------- */
.eaveline-page .pl-below { display: grid; gap: 14px; margin-top: 28px; }
.eaveline-page .pl-expander { padding: 0 20px; border: 1px solid var(--pl-line); border-radius: 12px; background: var(--pl-card); }
.eaveline-page .pl-expander summary { padding: 15px 0; color: var(--pl-ink); font-size: 15px; font-weight: 700; cursor: pointer; }
.eaveline-page .pl-expander div { max-width: 88ch; padding: 0 0 6px; color: var(--pl-text); font-size: 14px; line-height: 1.6; }
.eaveline-page .pl-expander p { margin: 0 0 10px; }
.eaveline-page .pl-fine p { max-width: 110ch; margin: 0 0 8px; color: var(--pl-muted); font-size: 12.5px; line-height: 1.55; overflow-wrap: anywhere; }
.eaveline-page .pl-fine a { color: inherit; text-decoration: underline; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .eaveline .pl-tool { grid-template-columns: minmax(350px, 0.9fr) minmax(0, 1.2fr); }
  .eaveline .pl-controls { padding: 20px; }
  .eaveline .pl-pkg { flex-wrap: wrap; row-gap: 6px; }
  .eaveline .pl-pkg-copy { flex: 1 1 0; }
  .eaveline .pl-pkg-v { flex-basis: 100%; margin-left: 32px; }
}
@media (max-width: 1000px) {
  .eaveline-page .pl-page { padding: 28px 0 40px; }
  .eaveline-page .pl-intro { margin-bottom: 23px; }
}
@media (max-width: 999px) {
  .eaveline .pl-tool { display: flex; flex-direction: column; }
  .eaveline .pl-box { width: 100%; }
  .eaveline .pl-view { order: -1; }
  .eaveline .pl-pkg { flex-wrap: nowrap; }
  .eaveline .pl-pkg-copy { flex: 0 1 auto; }
  .eaveline .pl-pkg-v { flex-basis: auto; margin-left: auto; }
  /* phones and tablets: the panel slides up from the bottom; the page behind keeps scrolling */
  .eaveline .pl-gate { position: fixed; inset: auto 0 0 0; z-index: 60; max-height: min(82vh, calc(100vh - 88px)); max-height: min(82dvh, calc(100dvh - 88px)); border: 0; border-radius: 16px 16px 0 0; opacity: 1; transform: translateY(100%); transition: transform .3s ease-out; box-shadow: 0 -24px 60px -12px rgba(0, 0, 0, 0.85); }
  .eaveline .pl-gate.is-open { transform: none; }
  .eaveline .pl-gate-in { max-width: 640px; margin: 0 auto; padding: 20px 16px calc(20px + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 800px) {
  .eaveline .pl-look { padding: 18px; }
  .eaveline .pl-group { grid-template-columns: 1fr; gap: 6px; }
  .eaveline .pl-cap { padding: 0; }
  .eaveline .pl-wheel-hint { margin-left: 0; }
  .eaveline .pl-chip { padding: 7px 10px; font-size: 12.5px; }
  .eaveline .pl-slider { grid-template-columns: 86px minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .eaveline-page .pl-h1 { font-size: 30px; }
  .eaveline-page .pl-lede { font-size: 14px; }
  .eaveline { font-size: 14.5px; }
  .eaveline .pl-tool { gap: 20px; }
  .eaveline .pl-box { border-radius: 16px; }
  .eaveline .pl-controls { padding: 20px 18px; }
  .eaveline .pl-view-top, .eaveline .pl-view-bar { padding: 12px; }
  .eaveline .pl-view-bar { min-height: 0; font-size: 12px; }
  .eaveline .pl-key { display: none; }
  .eaveline .pl-tag { font-size: 9px; }
  .eaveline .pl-badge { left: 6px; bottom: 6px; max-width: calc(100% - 12px); padding: 5px 8px; font-size: 10px; }
  .eaveline .pl-trace { padding: 14px 12px; }
  .eaveline .pl-look-head { gap: 10px; }
  .eaveline .pl-look-head .pl-title { gap: 10px; }
  .eaveline .pl-look-head h2 { font-size: 16px; white-space: nowrap; }
  .eaveline .pl-look-head .pl-mini { padding: 7px 9px; font-size: 12px; }
  .eaveline .pl-combo { flex-direction: column; }
  .eaveline .pl-go { min-height: 44px; }
  .eaveline .pl-pkg-copy small { font-size: 12px; }
  .eaveline .pl-quiz-grid { grid-template-columns: 1fr 1fr; }
  .eaveline .pl-quiz-grid label:first-child { grid-column: 1 / -1; }
  .eaveline .pl-next { padding: 18px 16px; }
  .eaveline .pl-pricebar-t { font-size: 13.5px; }
}
@media (max-width: 370px) {
  .eaveline .pl-look-head { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  .eaveline .pl-gate { transition: none; }
}

/* A slight blur with the lights still showing through (the engine's inline veil is heavier). */
.eaveline .pl-stage .sle-veil { background: rgba(5, 8, 18, 0.28) !important; -webkit-backdrop-filter: blur(2.5px) !important; backdrop-filter: blur(2.5px) !important; }

.pl-embedded body { margin: 0; padding: 0; min-height: 0; }
.pl-embedded .hdr, .pl-embedded .ftr, .pl-embedded .skip, .pl-embedded .pl-intro { display: none; }
.pl-embedded .pl-page { padding: 12px 0; }
.pl-embedded .pl-page > .wrap { width: 100%; max-width: none; padding: 0; }
.pl-embedded .pl-pricebar { display: none !important; }
.pl-embedded body.pl-bar-on { padding-bottom: 0; }

/* Homepage preview actions: light surfaces, red outlines; other pages keep their theme. */
.pl-embedded .eaveline .pl-home-intro { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 24px; }
.pl-embedded .eaveline .pl-home-intro h2 { margin: 0 0 8px; color: var(--pl-ink); font-size: clamp(24px, 3vw, 34px); line-height: 1.15; }
.pl-embedded .eaveline .pl-home-intro p { max-width: 65ch; margin: 0; color: var(--pl-text); }
.pl-embedded .eaveline .pl-home-try { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 48px; padding: 12px 20px; border: 2px solid var(--pl-red); border-radius: 8px; background: #fff; color: #242528; font-size: 15px; font-weight: 800; }
.pl-embedded .eaveline .pl-home-try[aria-expanded="true"] span { transform: rotate(180deg); }
.pl-embedded .eaveline .pl-mini:not(.pl-mini-go),
.pl-embedded .eaveline .pl-upload,
.pl-embedded .eaveline .pl-chip:not([aria-pressed="true"]),
.pl-embedded .eaveline .pl-gate .pl-btn-2 { border-color: var(--pl-red); background: #fff; color: #242528; min-height: 44px; }
.pl-embedded .eaveline .pl-home-try:hover,
.pl-embedded .eaveline .pl-mini:not(.pl-mini-go):hover,
.pl-embedded .eaveline .pl-upload:hover,
.pl-embedded .eaveline .pl-chip:not([aria-pressed="true"]):hover,
.pl-embedded .eaveline .pl-gate .pl-btn-2:hover { background: #fff1f1; color: #242528; }
.pl-embedded .eaveline .pl-mini[aria-pressed="true"] { background: #ffe3e4; box-shadow: inset 0 0 0 1px var(--pl-red); }
@media (max-width: 600px) {
  .pl-embedded .eaveline .pl-home-intro { flex-direction: column; align-items: stretch; gap: 16px; }
  .pl-embedded .eaveline .pl-home-try { width: 100%; }
}

.pl-embedded #pl-designer:not(.pl-started) { display: none; }
.pl-embedded #pl-designer:not(.pl-started) ~ .pl-below { display: none; }

/* The homepage frame grows with the form instead of pinning it below the frame. */
.pl-embedded .pl-gate { position: relative; inset: auto; max-height: none; overflow: visible; }
.pl-embedded .pl-gate-open .pl-controls > :not(.pl-gate) { display: none; }

/* Photo-first homepage entry. */
.eaveline-page .pl-entry { max-width: 960px; margin: 0 auto; padding: 0; border: 0; background: #fff; color: #242528; border-radius: 15px; overflow: hidden; }
.eaveline-page .pl-entry[hidden] { display: none; }
.pl-simple-header { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 15px 18px; border-bottom: 1px solid #ededed; font-size: 12px; }
.pl-simple-header strong { letter-spacing: .1em; text-transform: uppercase; }
.pl-simple-header strong span { color: #c82f35; }
.pl-simple-step { display: flex; gap: 32px; align-items: center; color: #666; font-size: 12px; }
.pl-simple-step > span { color: #c82f35; letter-spacing: 3px; }
.pl-simple-drop { margin: 20px; padding: 52px 20px; border: 2px dashed #e2e2e2; border-radius: 10px; text-align: center; }
.pl-simple-drop.is-dragging { border-color: #c82f35; background: #fff5f5; }
.eaveline-page .pl-entry .pl-simple-drop h2 { color: #242528; font-size: clamp(32px, 4.7vw, 52px); max-width: 22ch; margin: 0 auto 22px; line-height: 1.12; letter-spacing: -.035em; }
.pl-simple-drop h2 em { color: #c82f35; font-style: normal; }
.eaveline-page .pl-entry .pl-simple-drop p { color: #606166; font-size: 15px; line-height: 1.6; max-width: 55ch; margin: 0 auto 16px; }
.pl-simple-actions { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.pl-simple-actions button, .pl-simple-upload { min-height: 44px; padding: 11px 22px; border: 1px solid #dedee1; border-radius: 4px; font: inherit; font-size: 14px; font-weight: 650; color: #242528; background: #fff; cursor: pointer; }
.pl-simple-upload { position: relative; overflow: hidden; background: #c82f35; color: #fff; border-color: #c82f35; }
.pl-simple-upload input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.pl-simple-upload:focus-within, .pl-simple-actions button:focus-visible { outline: 3px solid #c82f35; outline-offset: 3px; }
.eaveline-page .pl-entry #pl-simple-msg:empty { display: none; }
.eaveline-page .pl-entry #pl-simple-msg:not(:empty) { margin-top: 16px; }
@media(max-width:600px) { .pl-simple-step { gap: 10px; } .pl-simple-drop { margin: 14px; padding: 34px 16px; } .pl-simple-actions { flex-direction: column; } }