/* Find a rental (/listings): centred search with one pill bar, then the street art above the footer. */
body.public-design #main-content .ls-hero { padding:56px 24px 28px; background:radial-gradient(1200px 360px at 85% 0%,#E2FAF3 0%,rgba(226,250,243,0) 60%),linear-gradient(180deg,#F7F4FF 0%,#FFFFFF 100%); }
body.public-design #main-content .ls-inner { max-width:880px; margin:0 auto; text-align:center; }
body.public-design #main-content .ls-eyebrow { display:block; margin:0 0 10px; color:#0B5CAD; font-size:13px; font-weight:700; letter-spacing:.14em; line-height:1.4; text-transform:uppercase; }
body.public-design #main-content .ls-hero h1.ls-title { margin:0 0 12px; color:#042238; font:600 44px/1.15 "Poppins","Open Sans",Arial,sans-serif !important; letter-spacing:-.01em; text-wrap:balance; }
body.public-design #main-content .ls-lede { max-width:52ch; margin:0 auto 28px; color:#475569; font-size:18px; line-height:1.55; }

/* One pill bar: icon, field and the Find rental button share one rounded control. */
body.public-design #main-content form.ls-search { display:flex; align-items:center; gap:8px; max-width:720px; margin:0 auto; padding:6px 6px 6px 8px; background:#fff; border:1.5px solid #D6CDF7; border-radius:999px; box-shadow:0 12px 32px -20px rgba(66,40,160,.45); }
body.public-design #main-content form.ls-search:focus-within { border-color:var(--brand-deep-purple,#6B48E0); box-shadow:0 0 0 3px rgba(107,72,224,.18); }
body.public-design #main-content .ls-field { display:flex; flex:1; align-items:center; gap:10px; min-width:0; margin:0; padding:0 10px; }
body.public-design #main-content .ls-field > i { flex:none; color:#64748b; font-size:18px; }
body.public-design #main-content form.ls-search input.ls-input { flex:1; min-width:0; height:52px; min-height:52px; padding:0; border:0 !important; background:transparent !important; box-shadow:none !important; color:var(--text,#0f172a); font-size:17px !important; outline:none; }
body.public-design #main-content form.ls-search input.ls-input::placeholder { color:#64748b; font-size:17px; }
/* The shared public button (public-button-hover.css) on a pill: white with green edges that grow inward and meet over
   half a second, then the label turns white. Same colours and timing; only the round ends differ, so it opts out of the shared rule. */
body.public-design #main-content form.ls-search .ls-go { flex:none; min-height:52px; padding:0 26px; border:1px solid #D7DBE3; border-radius:999px; background-color:#fff; background-image:linear-gradient(#00C434,#00C434),linear-gradient(#00C434,#00C434); background-repeat:no-repeat; background-position:0 0,100% 0; background-size:7px 100%,7px 100%; background-origin:border-box; background-clip:border-box; color:#1B1C1A; font:700 15px/1 "Open Sans",Arial,sans-serif; cursor:pointer; transition:background-size 500ms ease-out,color 120ms ease-out 500ms,border-color 120ms ease-out 500ms; }
body.public-design #main-content form.ls-search .ls-go:is(:hover,:focus-visible) { background-size:50.5% 100%,50.5% 100%; border-color:#00C434; color:#fff; }
body.public-design #main-content form.ls-search .ls-go:focus-visible { outline:2px solid #042238; outline-offset:3px; }
@media (prefers-reduced-motion:reduce) { body.public-design #main-content form.ls-search .ls-go { transition:none; } }
body.public-design #main-content .ls-help { margin:12px 0 0; color:#475569; font-size:14px; line-height:1.5; }

/* Fitted Sky note with the information icon. */
body.public-design #main-content .ls-note { display:inline-flex; align-items:center; gap:8px; margin:18px auto 0; padding:8px 14px; border-radius:6px; background:var(--hint-bg,#C9ECFF); color:#042238; font-size:14px; line-height:1.45; text-align:left; }
body.public-design #main-content .ls-note > i { flex:none; font-size:16px; }

/* Street art, edge to edge just above the footer; it crops at the sides on phones. */
body.public-design #main-content .ls-band { overflow:hidden; margin-top:8px; line-height:0; }
body.public-design #main-content .ls-band img { display:block; width:100%; max-width:none; height:auto; }

@media (max-width:600px) {
  body.public-design #main-content .ls-hero { padding:32px 16px 16px; }
  body.public-design #main-content .ls-hero h1.ls-title { font-size:30px !important; line-height:1.2 !important; }
  body.public-design #main-content .ls-lede { margin-bottom:20px; font-size:16px; }
  body.public-design #main-content form.ls-search { flex-direction:column; align-items:stretch; padding:6px; border-radius:16px; }
  body.public-design #main-content form.ls-search .ls-go { width:100%; border-radius:12px; }
  body.public-design #main-content .ls-band img { width:180%; margin-left:-40%; }
}