/* LandLens for Google Maps & Earth, the home page's extension band
   (resources/views/landlens/home/chrome-extension.blade.php). Scoped under .ll and built on the tokens
   ll-home.css defines there. A dark band carrying a faint survey grid, the real capture of the extension
   lifted on the right, and notes that sit over what they name in it. */

/* the orange pill button; a sibling of hbtn-dark, hbtn-white and hbtn-ghost */
.ll .hbtn-o { background: var(--p500); border-color: var(--p600); color: var(--ink); box-shadow: 0 1px 2px rgba(16, 24, 40, .2), 0 16px 34px -14px rgba(255, 103, 37, .7); }
.ll .hbtn-o .arr { background: var(--ink); color: #fff; }
.ll .hbtn-o:hover { background: var(--p400); box-shadow: 0 1px 2px rgba(16, 24, 40, .2), 0 22px 44px -14px rgba(255, 103, 37, .85); }
.ll .hbtn-o:hover .arr { background: #fff; color: var(--ink); }

.ll .ext-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 4.4fr) minmax(0, 7.6fr);
  align-items: center;
  gap: 48px;
  padding: 64px 0 64px 60px;
  border-radius: 28px;
  border: 1px solid var(--d9);
  background:
    radial-gradient(60% 80% at 82% 40%, rgba(255, 103, 37, .26), rgba(255, 103, 37, 0) 70%),
    radial-gradient(40% 50% at 8% 100%, rgba(131, 231, 238, .08), rgba(131, 231, 238, 0) 70%),
    var(--d5);
  box-shadow: var(--sh3);
  color: #a9afba;
}
/* a survey sheet's grid, faint, fading out toward the copy so the text stays clean */
.ll .ext-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(252, 252, 252, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(252, 252, 252, .05) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: linear-gradient(90deg, transparent 18%, #000 62%);
  mask-image: linear-gradient(90deg, transparent 18%, #000 62%);
}

.ll .ext-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; }
.ll .ext-copy h2 { color: #fcfcfc; font-size: 50px; }
.ll .ext-copy .hl { color: var(--p400); }
.ll .ext-lede { font-size: 17px; max-width: 470px; color: #a9afba; }

.ll .ext-steps { display: flex; flex-direction: column; width: 100%; max-width: 470px; margin-top: 4px; counter-reset: none; }
.ll .ext-steps li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; padding: 15px 0; border-top: 1px solid rgba(252, 252, 252, .08); }
.ll .ext-steps li:last-child { border-bottom: 1px solid rgba(252, 252, 252, .08); }
.ll .ext-n { font-family: var(--mono); font-size: 13px; line-height: 24px; color: var(--p400); letter-spacing: .04em; }
.ll .ext-t { display: flex; flex-direction: column; gap: 3px; color: #fcfcfc; font-size: 16px; font-weight: 500; line-height: 24px; }
.ll .ext-t small { color: #8f96a3; font-size: 14.5px; font-weight: 400; line-height: 1.5; }

.ll .ext-cta { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin-top: 6px; }
.ll .ext-meta { font-size: 13.5px; color: #8f96a3; max-width: 400px; }

/* the capture, bleeding off the card's right edge */
.ll .ext-stage { position: relative; margin: 0; padding: 36px 0 44px; }
.ll .ext-shot {
  position: relative;
  border-radius: 18px 0 0 18px;
  overflow: hidden;
  border: 1px solid var(--s8);
  border-right: 0;
  background: var(--d7);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .3), 0 40px 80px -30px rgba(0, 0, 0, .7);
  transition: transform .7s var(--ease), box-shadow .7s var(--ease);
}
.ll .ext-card:hover .ext-shot { transform: translateY(-4px); box-shadow: 0 2px 6px rgba(0, 0, 0, .3), 0 50px 90px -30px rgba(0, 0, 0, .8); }
.ll .ext-shot img { width: 100%; height: auto; aspect-ratio: 1400 / 860; object-fit: cover; }
.ll .ext-host {
  position: absolute; left: 14px; bottom: 14px;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 12px 5px 9px; border-radius: 999px;
  background: rgba(15, 18, 23, .78); border: 1px solid rgba(252, 252, 252, .14);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  font-family: var(--mono); font-size: 12px; color: #fcfcfc;
}
.ll .ext-host i, .ll .ext-note i { display: grid; place-items: center; }
.ll .ext-host .sv-ico { width: 15px; height: 15px; }

.ll .ext-note {
  position: absolute; z-index: 2;
  display: inline-flex; align-items: center; gap: 9px;
  padding: 8px 14px 8px 8px; border-radius: 999px;
  background: #fff; border: 1px solid var(--s2);
  box-shadow: 0 1px 2px rgba(16, 24, 40, .1), 0 18px 36px -14px rgba(0, 0, 0, .55);
  color: var(--ink); font-size: 13.5px; font-weight: 500; line-height: 1.3; white-space: nowrap;
  animation: ll-ext-bob 7s ease-in-out infinite;
}
.ll .ext-note i { width: 26px; height: 26px; flex: none; border-radius: 50%; background: var(--p100); color: var(--p700); }
.ll .ext-note .sv-ico { width: 15px; height: 15px; stroke-width: 1.8; }
/* each note over what it names in the capture: the outlined parcel, the Pulse grid, Google's side panel */
.ll .ext-note-a { left: 30%; top: 7%; }
.ll .ext-note-b { right: 4%; bottom: 7%; animation-delay: -2.4s; }
.ll .ext-note-c { left: -5%; top: 74%; animation-delay: -4.6s; }
.ll .ext-cap { position: absolute; left: 0; bottom: 6px; font-family: var(--mono); font-size: 11.5px; color: #6f7684; }

@keyframes ll-ext-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }

@container ll (max-width: 1120px) {
  .ll .ext-card { grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 56px 0 0 40px; }
  .ll .ext-copy { padding-right: 40px; }
  .ll .ext-copy h2 { font-size: 44px; }
  .ll .ext-stage { padding: 30px 0 48px; }
  .ll .ext-note-c { left: 2%; }
}
@container ll (max-width: 760px) {
  .ll .ext-card { padding: 40px 0 0 22px; border-radius: 24px; }
  .ll .ext-copy { padding-right: 22px; gap: 18px; }
  .ll .ext-copy h2 { font-size: 34px; }
  .ll .ext-lede { font-size: 16px; }
  .ll .ext-cta, .ll .ext-cta .hbtn { width: 100%; }
  .ll .ext-shot { border-radius: 14px 0 0 14px; }
  .ll .ext-card:hover .ext-shot { transform: none; }
  .ll .ext-stage { padding: 26px 0 40px; }
  .ll .ext-note { font-size: 12px; padding: 6px 11px 6px 6px; gap: 7px; }
  .ll .ext-note i { width: 22px; height: 22px; }
  .ll .ext-note-a { left: 6%; top: 4%; }
  .ll .ext-note-b { right: 4%; bottom: 3%; }
  .ll .ext-note-c { display: none; }
  .ll .ext-cap { display: none; }
  .ll .ext-stage { padding-bottom: 34px; }
}
@media (prefers-reduced-motion: reduce) {
  .ll .ext-note { animation: none; }
  .ll .ext-shot, .ll .ext-card:hover .ext-shot { transition: none; transform: none; }
}