/* Permanent lights landing page (/permanent-lights). Loaded after
   connect.css: the column, reel, hero, actions, sections, social, info and
   dock come from there; this file only adds the parts /connect does not have,
   drawn with the same tokens, borders and radii. */
html {
  scroll-behavior:smooth;
  scroll-padding-top:16px
}

body.pl {
  overflow-x:hidden
}

/* Lit-home photo behind the column instead of the smart-home one */
.pl .cx-backdrop {
  background:
    radial-gradient(ellipse 70% 45% at 50% 0,rgba(191,25,34,.34),transparent 70%),
    linear-gradient(to bottom,rgba(7,8,9,.6),rgba(7,8,9,.9) 22%,rgba(7,8,9,.97) 40%,var(--bg) 60%),
    url("../../media/pl-reel-path.jpg") center top/cover no-repeat
}

.pl input,.pl textarea {
  font:inherit
}

.pl-note {
  margin:10px 0 0;
  color:var(--muted);
  font-size:.86rem;
  text-align:center
}

/* Day / night compare: edge to edge on phones like the reel */
.pl-ba {
  position:relative;
  margin:0 -16px;
  aspect-ratio:1/1;
  overflow:hidden;
  background:#131517;
  touch-action:pan-y;
  user-select:none;
  -webkit-user-select:none
}

.pl-ba-img {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover
}

/* Night on the left, day on the right */
.pl-ba-after {
  clip-path:inset(0 calc(100% - var(--pos)) 0 0)
}

.pl-ba-tag {
  position:absolute;
  top:12px;
  z-index:2;
  padding:5px 12px;
  border-radius:999px;
  background:rgba(7,8,9,.6);
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  pointer-events:none
}

.pl-ba-tag--night {
  left:12px
}

.pl-ba-tag--day {
  right:12px
}

.pl-ba-line {
  position:absolute;
  top:0;
  bottom:0;
  left:var(--pos);
  z-index:2;
  width:3px;
  margin-left:-1.5px;
  background:#fff;
  box-shadow:0 0 12px rgba(0,0,0,.5);
  pointer-events:none
}

.pl-ba-knob {
  position:absolute;
  top:50%;
  left:50%;
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  border-radius:50%;
  background:#fff;
  color:#0b0c0d;
  transform:translate(-50%,-50%);
  box-shadow:0 6px 20px rgba(0,0,0,.45)
}

.pl-ba-knob svg {
  width:22px;
  height:22px;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round
}

/* Invisible range input on top: drag anywhere, keyboard arrows work */
.pl-ba-range {
  position:absolute;
  inset:0;
  z-index:3;
  width:100%;
  height:100%;
  margin:0;
  opacity:0;
  cursor:ew-resize
}

.pl-ba:has(.pl-ba-range:focus-visible) .pl-ba-knob {
  outline:2px solid #fff;
  outline-offset:4px
}

@media (min-width:512px) {
  .pl-ba {
    margin-inline:0;
    border:1px solid var(--line);
    border-radius:var(--radius)
  }
}

/* Where we install */
.pl-cards {
  display:grid;
  gap:12px
}

.pl-card {
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--surface)
}

.pl-card-media {
  aspect-ratio:16/10;
  overflow:hidden;
  background:#131517
}

.pl-card-media img,.pl-card-media video {
  width:100%;
  height:100%;
  object-fit:cover
}

.pl-card-body {
  padding:14px 16px 16px
}

.pl-card h3 {
  margin:0 0 4px;
  font-size:1.02rem
}

.pl-card p {
  margin:0;
  color:var(--muted);
  font-size:.9rem
}

/* Demo-only placeholders: replaced by the owner's photos before publishing */
.pl-ph {
  display:grid;
  place-items:center;
  padding:10px;
  border:2px dashed rgba(224,120,124,.45);
  background:repeating-linear-gradient(135deg,rgba(255,255,255,.02) 0 12px,rgba(255,255,255,.045) 12px 24px)
}

.pl-card-media.pl-ph {
  border-width:0 0 2px
}

.pl-ph-label {
  color:#e0787c;
  font-size:.7rem;
  font-weight:700;
  letter-spacing:.05em;
  line-height:1.5;
  text-align:center
}

/* Gallery */
.pl-gallery {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
  margin:0;
  padding:0;
  list-style:none
}

.pl-gallery li {
  aspect-ratio:1/1;
  overflow:hidden;
  border-radius:16px
}

.pl-shot {
  display:block;
  width:100%;
  height:100%;
  padding:0;
  border:0;
  background:#131517;
  cursor:zoom-in
}

.pl-shot img {
  width:100%;
  height:100%;
  object-fit:cover
}

/* Lightbox */
.pl-lightbox {
  width:100vw;
  max-width:100vw;
  height:100vh;
  max-height:100vh;
  margin:0;
  padding:16px;
  border:0;
  background:rgba(0,0,0,.92);
  color:#fff
}

.pl-lightbox[open] {
  display:grid;
  place-items:center
}

.pl-lightbox img {
  max-width:100%;
  max-height:calc(100vh - 32px);
  border-radius:10px;
  object-fit:contain
}

.pl-lightbox-close {
  position:fixed;
  top:max(14px,env(safe-area-inset-top));
  right:14px;
  width:44px;
  height:44px;
  border:1px solid rgba(255,255,255,.3);
  border-radius:50%;
  background:rgba(7,8,9,.7);
  color:#fff;
  font-size:1.6rem;
  line-height:1;
  cursor:pointer
}

/* Why / how: boxed lists like the service list on /connect */
.pl-feats,.pl-steps {
  display:grid;
  gap:16px;
  margin:0;
  padding:18px 16px;
  list-style:none;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:rgba(255,255,255,.025)
}

.pl-feats li {
  display:flex;
  align-items:flex-start;
  gap:12px
}

.pl-feats strong,.pl-steps strong {
  display:block;
  font-size:.95rem
}

.pl-feats span:not(.cx-svc-icon),.pl-steps span {
  display:block;
  color:var(--muted);
  font-size:.88rem;
  line-height:1.45
}

.pl-steps {
  counter-reset:step
}

.pl-steps li {
  position:relative;
  padding-left:42px;
  counter-increment:step
}

.pl-steps li:before {
  content:counter(step);
  position:absolute;
  top:0;
  left:0;
  display:grid;
  place-items:center;
  width:28px;
  height:28px;
  border-radius:50%;
  background:linear-gradient(135deg,var(--brand2),var(--deep));
  font-size:.85rem;
  font-weight:800
}

/* FAQ: same box as "Good to know" */
.pl-faq {
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--surface)
}

.pl-faq details + details {
  border-top:1px solid var(--line)
}

.pl-faq summary {
  position:relative;
  padding:14px 44px 14px 16px;
  font-size:.94rem;
  font-weight:600;
  list-style:none;
  cursor:pointer
}

.pl-faq summary::-webkit-details-marker {
  display:none
}

.pl-faq summary:after {
  content:"+";
  position:absolute;
  top:50%;
  right:16px;
  color:#e0787c;
  font-size:1.3rem;
  font-weight:400;
  transform:translateY(-50%)
}

.pl-faq details[open] summary:after {
  content:"−"
}

.pl-faq details p {
  margin:0;
  padding:0 16px 14px;
  color:var(--muted);
  font-size:.9rem
}

/* Quote form */
.pl-form {
  display:grid;
  gap:14px;
  padding:18px 16px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--surface);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px)
}

.pl-form-intro {
  margin:0;
  color:#cacacc;
  font-size:.94rem
}

.pl-field {
  display:grid;
  gap:6px;
  min-width:0
}

.pl-field-row {
  display:grid;
  grid-template-columns:1.4fr 1fr;
  gap:10px
}

.pl-field label,.pl-checks legend {
  font-size:.84rem;
  font-weight:600
}

.pl-opt {
  color:var(--muted);
  font-weight:400
}

.pl-field input,.pl-field textarea {
  width:100%;
  min-height:48px;
  padding:12px 14px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:14px;
  background:rgba(0,0,0,.3);
  color:var(--text);
  font-size:1rem
}

.pl-field textarea {
  resize:vertical
}

.pl-field input:focus,.pl-field textarea:focus {
  border-color:#e0787c;
  outline:none;
  box-shadow:0 0 0 3px rgba(224,120,124,.25)
}

.pl-field input[aria-invalid=true] {
  border-color:#ff6b6b
}

.pl-checks {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin:0;
  padding:0;
  border:0
}

.pl-checks legend {
  margin-bottom:6px;
  padding:0
}

.pl-checks label {
  display:flex;
  align-items:center;
  gap:10px;
  min-height:48px;
  padding:0 12px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:14px;
  font-size:.9rem;
  font-weight:500;
  cursor:pointer
}

.pl-checks label:has(input:checked) {
  border-color:#e0787c;
  background:rgba(191,25,34,.14)
}

.pl-checks input {
  width:18px;
  height:18px;
  margin:0;
  accent-color:var(--brand2)
}

.pl-hp {
  position:absolute;
  left:-10000px;
  width:1px;
  height:1px;
  overflow:hidden
}

/* Same look as the primary action on /connect */
.pl-submit {
  min-height:56px;
  border:0;
  border-radius:var(--radius);
  background:linear-gradient(135deg,var(--brand2),var(--deep));
  box-shadow:0 16px 40px rgba(191,25,34,.3),inset 0 1px rgba(255,255,255,.18);
  color:#fff;
  font-size:1.02rem;
  font-weight:700;
  cursor:pointer
}

.pl-submit:hover {
  background:linear-gradient(135deg,#e04a51,#7d1118)
}

.pl-submit:disabled {
  opacity:.6;
  cursor:wait
}

.pl-form-note {
  margin:0;
  color:var(--muted);
  font-size:.78rem;
  text-align:center
}

.pl-status {
  margin:0;
  font-size:.9rem
}

.pl-status:empty {
  display:none
}

.pl-status.is-success {
  padding:12px 14px;
  border-radius:14px;
  background:rgba(46,160,90,.16);
  color:#9be3b5
}

.pl-status.is-error {
  padding:12px 14px;
  border-radius:14px;
  background:rgba(255,80,80,.12);
  color:#ffb3b3
}

@media (prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
}

/* lights.js: the dock steps aside while the quote form is on screen */
.pl-at-form .cx-dock {
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translate(-50%,110%)
}

/* Wide gallery tiles (panoramas) span both columns */
.pl-gallery li.pl-wide {
  grid-column:1/-1;
  aspect-ratio:16/9
}

/* Colors and effects: two stacked videos (lights.js plays one and preloads
   the next), with the reel's label and pause button look */
.pl-fx {
  position:relative;
  margin:0 -16px;
  aspect-ratio:1/1;
  overflow:hidden;
  background:#131517
}

.pl-fx video {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:0
}

.pl-fx video.is-active {
  opacity:1
}

.pl-fx:after {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(to bottom,transparent 65%,rgba(0,0,0,.6))
}

.pl-fx-label {
  position:absolute;
  left:14px;
  bottom:14px;
  z-index:1;
  margin:0;
  padding:6px 12px 6px 10px;
  border-left:3px solid var(--brand2);
  border-radius:4px;
  background:rgba(7,8,9,.55);
  font-size:.82rem;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase
}

.pl-fx-pause {
  position:absolute;
  right:12px;
  bottom:12px;
  z-index:1;
  display:grid;
  place-items:center;
  width:36px;
  height:36px;
  padding:0;
  border:1px solid rgba(255,255,255,.25);
  border-radius:50%;
  background:rgba(7,8,9,.55);
  color:#fff;
  cursor:pointer
}

.pl-fx-pause svg {
  width:12px;
  height:12px;
  fill:currentColor
}

.pl-fx-pause .i-play,.pl-fx.is-paused .pl-fx-pause .i-pause {
  display:none
}

.pl-fx.is-paused .pl-fx-pause .i-play {
  display:block
}

@media (min-width:512px) {
  .pl-fx {
    margin-inline:0;
    border:1px solid var(--line);
    border-radius:var(--radius)
  }
}

/* Six designs: centered rows on every screen, all visible at once */
.pl-fx-chips {
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:8px;
  margin-top:12px
}

.pl-fx-chips button {
  min-height:38px;
  padding:0 14px;
  border:1px solid var(--line);
  border-radius:999px;
  background:rgba(255,255,255,.05);
  color:#dcdcdd;
  font-size:.8rem;
  font-weight:600;
  white-space:nowrap;
  cursor:pointer
}

.pl-fx-chips button[aria-pressed=true] {
  border-color:transparent;
  background:linear-gradient(135deg,var(--brand2),var(--deep));
  color:#fff
}