.sticky-top {
    top: 10em;
}

.lb-bg {
    background-color: #4e964f;
}

/* On-brand green for the primary "New Search" CTA (same green as .lb-bg). */
.lb-btn { background-color: #4e964f; border-color: #4e964f; color: #fff; }
.lb-btn:hover, .lb-btn:focus { background-color: #437f44; border-color: #437f44; color: #fff; }
/* Found-state CTAs (New Search / Share) borrow the loader title's type treatment. */
#llNewSearchBtn, #llShareBtn { text-transform: uppercase; font-weight: 700; letter-spacing: -.02em; }

.arrow-button {
    font-size: 1.9rem;
    cursor: pointer;
}

.arrow-button:hover {

    color: red;
}

.arrow-button:active {
    color: darkgray;
}

/* ===== Pricing-table entrance (plays once when the page loads with ?id) ===== */
#pricingTable { will-change: transform, opacity; }
.ll-enter-down { animation: llEnterDown .5s cubic-bezier(.2,.7,.2,1) both; }
@keyframes llEnterDown { from { opacity: 0; transform: translateY(-26px); } to { opacity: 1; transform: translateY(0); } }

/* ===== Property-lookup left-column panel swap (full-viewport vertical slide) =====
   The search panel and the loader panel trade places in the left column. Each travels a full
   viewport height so it reads as coming from / going to off the screen. While a slide runs we
   lock body scroll (.ll-anim-lock) so the off-screen panel can't add a scrollbar; scrollbar-gutter
   keeps the page width steady when the bar is hidden. */
html { scrollbar-gutter: stable; }
body.ll-anim-lock { overflow: hidden; }
#leftSearchPanel, #lookupPanel { will-change: transform; }
.ll-panel-up-out   { animation: llPanelUpOut   .6s cubic-bezier(.5,0,.75,0) forwards; }
.ll-panel-up-in    { animation: llPanelUpIn    .6s cubic-bezier(.2,.7,.2,1) both; }
.ll-panel-down-out { animation: llPanelDownOut .6s cubic-bezier(.5,0,.75,0) forwards; }
.ll-panel-down-in  { animation: llPanelDownIn  .6s cubic-bezier(.2,.7,.2,1) both; }
@keyframes llPanelUpOut   { from { transform: translateY(0); }      to { transform: translateY(-100vh); } }
@keyframes llPanelUpIn    { from { transform: translateY(100vh); }  to { transform: translateY(0); } }
@keyframes llPanelDownOut { from { transform: translateY(0); }      to { transform: translateY(100vh); } }
@keyframes llPanelDownIn  { from { transform: translateY(-100vh); } to { transform: translateY(0); } }

/* ===== Property-lookup segmented-bar loader ===== */
#lookupLoader .ll-eyebrow { font-size: .62rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #9aa39b; margin-bottom: .15rem; }
#lookupLoader .ll-title { font-size: 1.45rem; font-weight: 700; color: #495057; letter-spacing: -.02em; text-transform: uppercase; line-height: 1.05; margin-bottom: 1rem; transition: color .2s ease; }
#lookupLoader .ll-title.found { color: #2e7d32; }
#lookupLoader .ll-title.notfound { color: #c62828; }
#lookupLoader .ll-title .ll-dots::after { content: ''; animation: llTitleDots 1.4s steps(1, end) infinite; }
@keyframes llTitleDots { 0% { content: ''; } 25% { content: '.'; } 50% { content: '..'; } 75% { content: '...'; } 100% { content: ''; } }

/* "Looking up" address box — pin tile + label/address, mirrors the result card framing */
#lookupLoader .ll-lookup-box { display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin-bottom: 1.1rem; background: #f6f8f6; border: 1px solid #e4e9e3; border-radius: 9px; }
#lookupLoader .ll-lookup-icon { flex: none; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 8px; background: #fff; border: 1px solid #e4e9e3; color: #4e964f; font-size: 1.15rem; }
#lookupLoader .ll-lookup-text { min-width: 0; }
#lookupLoader .ll-lookup-label { font-size: .6rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #9aa39b; }
#lookupLoader .ll-addr {
    font-size: .92rem; color: #212529; font-weight: 600;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

#lookupLoader .ll-segbar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
#lookupLoader .ll-seg { position: relative; height: 15px; border-radius: 4px; background: #f0f2f5; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(26,31,28,.04); transition: background .2s ease; }
#lookupLoader .ll-seg .ll-fill { position: absolute; inset: 0; width: 0%; border-radius: 4px; transition: width .45s ease, background .2s ease; }
#lookupLoader .ll-seg.active .ll-fill { width: 100%; background: linear-gradient(90deg, rgba(78,150,79,0) 0%, rgba(78,150,79,.18) 12%, rgba(78,150,79,.55) 50%, rgba(78,150,79,.18) 88%, rgba(78,150,79,0) 100%); background-size: 220% 100%; animation: llSweep 1.05s linear infinite; }
@keyframes llSweep { 0% { background-position: 120% 0; } 100% { background-position: -120% 0; } }
#lookupLoader .ll-seg.success .ll-fill { width: 100%; background: linear-gradient(90deg, #4e964f 0%, #3d7a3e 100%); box-shadow: 0 0 12px -2px rgba(78,150,79,.5); }
#lookupLoader .ll-seg.failed .ll-fill { width: 100%; background: repeating-linear-gradient(45deg, rgba(107,122,109,.18) 0px, rgba(107,122,109,.18) 6px, rgba(107,122,109,.07) 6px, rgba(107,122,109,.07) 12px); }
#lookupLoader .ll-seg .ll-mark { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%) scale(.4); width: 100%; height: 100%; display: grid; place-items: center; opacity: 0; transition: opacity .2s ease, transform .35s ease; pointer-events: none; }
#lookupLoader .ll-seg .ll-mark i { font-size: 10px; line-height: 1; display: block; }
#lookupLoader .ll-seg.success .ll-mark, #lookupLoader .ll-seg.failed .ll-mark { opacity: 1; transform: translate(-50%,-50%) scale(1); }
#lookupLoader .ll-seg.success .ll-mark { color: #fff; }
#lookupLoader .ll-seg.failed .ll-mark { color: #6c757d; }

#lookupLoader .ll-legend { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; margin-top: 11px; }
#lookupLoader .ll-leg { text-align: center; transition: opacity .35s ease; }
#lookupLoader .ll-leg .ll-leg-n { font-size: .64rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #6c757d; }
#lookupLoader .ll-leg .ll-leg-depth { font-size: .58rem; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: #adb5ad; margin-top: 2px; }
#lookupLoader .ll-leg.active .ll-leg-n { color: #3d7a3e; }
#lookupLoader .ll-leg.active .ll-leg-depth { color: #495057; }
#lookupLoader .ll-leg.success .ll-leg-n, #lookupLoader .ll-leg.success .ll-leg-depth { color: #3d7a3e; }
#lookupLoader .ll-leg.pending { opacity: .5; }
#lookupLoader .ll-leg.failed { opacity: .45; }

#lookupLoader .ll-log { margin-top: 16px; font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .72rem; line-height: 1.5; padding: 6px 8px 8px; background: #f0f2f5; border: 1px solid #e9ece8; border-radius: 6px; min-height: 138px; max-height: 220px; overflow-y: auto; scroll-behavior: smooth; }
#lookupLoader .ll-log::-webkit-scrollbar { width: 8px; }
#lookupLoader .ll-log::-webkit-scrollbar-thumb { background: #dce0db; border-radius: 8px; }
#lookupLoader .ll-log::-webkit-scrollbar-track { background: transparent; }
#lookupLoader .ll-row { display: flex; align-items: flex-start; gap: 9px; padding: 4px 6px; border-radius: 4px; border-left: 2px solid transparent; border-bottom: 1px solid #e9ece8; opacity: 0; transform: translateY(6px); animation: llRowIn .42s cubic-bezier(.2,.7,.3,1) forwards; }
#lookupLoader .ll-row:last-child { border-bottom: 0; }
@keyframes llRowIn { to { opacity: 1; transform: translateY(0); } }
#lookupLoader .ll-row .ll-glyph { flex: none; width: 12px; text-align: center; color: #6c757d; font-weight: 700; line-height: 1.5; }
#lookupLoader .ll-row .ll-ts { flex: none; color: #6c757d; font-variant-numeric: tabular-nums; }
#lookupLoader .ll-row .ll-msg { color: #495057; min-width: 0; }
#lookupLoader .ll-row .ll-msg .ll-em { color: #212529; font-weight: 600; }
#lookupLoader .ll-row.muted .ll-msg, #lookupLoader .ll-row.muted .ll-glyph { color: #6c757d; }
#lookupLoader .ll-row.fail .ll-glyph { color: #c62828; }
#lookupLoader .ll-row.fail .ll-msg .ll-em { color: #c62828; }
#lookupLoader .ll-row.active { background: #f5faf5; border-left-color: #4e964f; }
#lookupLoader .ll-row.active .ll-glyph { color: #4e964f; }
#lookupLoader .ll-row.ok { opacity: 1; transform: none; background: #f5faf5; border-left-color: #2e7d32; }
#lookupLoader .ll-row.ok .ll-glyph { color: #2e7d32; }
#lookupLoader .ll-row.ok .ll-msg { color: #212529; }
#lookupLoader .ll-row.ok .ll-msg .ll-em { color: #2e7d32; }
#lookupLoader .ll-spin { display: inline-block; width: 11px; height: 11px; border-radius: 50%; border: 2px solid #dce0db; border-top-color: #4e964f; animation: llSpin .7s linear infinite; vertical-align: -1px; }
@keyframes llSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .ll-enter-down,
    .ll-panel-up-out, .ll-panel-up-in, .ll-panel-down-out, .ll-panel-down-in,
    #lookupLoader .ll-seg.active .ll-fill, #lookupLoader .ll-spin,
    #lookupLoader .ll-title .ll-dots::after { animation: none !important; }
    #lookupLoader .ll-row { animation: none !important; opacity: 1; transform: none; }
}

/* ===== Locked-estimate teaser card (#lookupTeaserCard) =====
   Shown INSTEAD of #pricingTable when a lookup is teaser-LOCKED: the property WAS found, but
   the value is withheld (the view blanks lot_size + pricing_dict), so this card stands in for
   the suppressed pricing table. It explains WHY the estimate is locked — either a centered
   "Found with Deep Search" confirmation (the property resolved on a deeper source than the
   visitor's plan pays for) or the usage bucket they've spent — and offers the two ways out.

   EVERY animation in here is PURE CSS keyframes that run on element creation. The whole right
   column is re-rendered with live.innerHTML = fresh.innerHTML on every in-place lookup
   (renderFoundResult), so nothing in this card may depend on JS initialization: no
   DOMContentLoaded hook, no querySelector-on-load, no measured heights. The only per-element
   "data" comes from inline style="" written by the template (the usage bar's width) — that is
   markup, not init code, and so it survives the swap. The one interactive control (Compare
   Plans) is a Bootstrap data-bs-toggle trigger, which Bootstrap serves with a DOCUMENT-level
   delegated handler. */
#lookupTeaserCard {
    position: relative;
    margin-bottom: 1rem;
    border: 1px solid #dfe3de;
    border-radius: 14px;
    overflow: hidden;
    background: #ffffff;
    box-shadow: 0 12px 30px -16px rgba(30,38,32,.30);
    will-change: transform, opacity;
}

/* --- (a) header bar --- */
#lookupTeaserCard .ltc-head {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 14px;
    background: #4e964f;
    color: #ffffff;
}
#lookupTeaserCard .ltc-head-title {
    font-size: .82rem; font-weight: 700; letter-spacing: .01em; line-height: 1;
}
#lookupTeaserCard .ltc-head i { font-size: .95rem; line-height: 1; }

/* --- (b) address row --- */
#lookupTeaserCard .ltc-addr-row {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 14px;
    border-bottom: 1px solid #eceeeb;
}
#lookupTeaserCard .ltc-addr-tile {
    flex: none; width: 32px; height: 32px;
    display: grid; place-items: center;
    border-radius: 8px;
    background: #e8f2e8; color: #4e964f;
    font-size: .95rem; line-height: 1;
}
#lookupTeaserCard .ltc-addr-text { min-width: 0; }
#lookupTeaserCard .ltc-addr-label {
    font-size: .58rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
    color: #8a938b; line-height: 1.4;
}
#lookupTeaserCard .ltc-addr-value {
    font-size: .86rem; font-weight: 600; color: #1e2620; line-height: 1.3;
    overflow-wrap: anywhere;
}

/* --- (c/d) FOUND variant (anon / not_in_plan) — .ltc-found on the card ----------------
   The whole card becomes a centered "Found with Deep Search" confirmation: check badge,
   headline, the matched address on its own line, two lines of Deep Search copy, a
   "What does this mean?" link into #lookupHelpModal, then the CTA pair. No header bar in
   this variant. The badge's pop-in is the only animation (one-shot CSS keyframes, so it
   survives the innerHTML re-render like everything else here). */
#lookupTeaserCard.ltc-found { padding: 26px 20px 10px; text-align: center; }
#lookupTeaserCard .ltc-found-badge {
    width: 56px; height: 56px; margin: 4px auto 16px;
    display: grid; place-items: center;
    border-radius: 50%;
    border: 2px solid #4e964f; color: #4e964f;
    font-size: 1.55rem; line-height: 1;
    animation: ltcFoundPop .45s cubic-bezier(.2,.9,.3,1.4) both;
}
@keyframes ltcFoundPop {
    from { transform: scale(.55); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
}
#lookupTeaserCard .ltc-found-title {
    font-size: 1.3rem; font-weight: 800; letter-spacing: -.02em; color: #1e2620;
    margin: 0 0 .45rem;
}
/* the matched address gets its own line rather than being woven into a sentence — it is
   the visitor's own input echoed back, so it carries the "we got the right place" proof
   and should be scannable on its own. Autoescaped by Django, never marked safe. */
#lookupTeaserCard .ltc-found-address {
    margin: 0 0 .7rem;
    font-size: .97rem; font-weight: 700; letter-spacing: -.01em; color: #1e2620;
    line-height: 1.4; overflow-wrap: anywhere;
}
/* two deliberate lines (.ltc-found-line is display:block) — "what happened" then "what it
   costs you" — so the pair never reflows into one ragged paragraph. */
#lookupTeaserCard .ltc-found-copy {
    max-width: 46ch; margin: 0 auto .85rem;
    font-size: .84rem; line-height: 1.6; color: #4a544c;
}
#lookupTeaserCard .ltc-found-copy strong { color: #1e2620; font-weight: 700; }
#lookupTeaserCard .ltc-found-line { display: block; }

/* "What does this mean?" — opens #lookupHelpModal (the tier-cascade diagram), which lives
   outside #lookupResultCol so it survives this column's innerHTML swap; Bootstrap's modal
   data-api is document-delegated, so this trigger works after a re-render too. Ink with a
   standing underline: it is an explainer, not a CTA, so it takes no accent colour. */
#lookupTeaserCard .ltc-found-help {
    display: inline-flex; align-items: center; gap: 6px;
    margin: 0 0 2px; padding: 0;
    border: 0; background: transparent;
    color: #1e2620; text-decoration: underline; text-underline-offset: 3px;
    font-size: .8rem; font-weight: 700; line-height: 1.3;
    cursor: pointer;
    transition: color .2s ease;
}
#lookupTeaserCard .ltc-found-help:hover,
#lookupTeaserCard .ltc-found-help:focus-visible { color: #000000; outline: none; }
#lookupTeaserCard .ltc-found-help i {
    font-size: .82rem; line-height: 1; color: #6b756c; text-decoration: none;
}

/* found-variant action overrides: the primary shrinks from full-width to a centered
   button, and the compare-plans secondary ('not_in_plan') darkens to ink with a STANDING
   underline (the design shows it always underlined, not hover-grown) — the hover chevron
   nudge stays. The 'anon' login link is NOT a secondary CTA; it styles itself below. */
#lookupTeaserCard.ltc-found .ltc-actions { align-items: center; padding: 16px 16px 10px; }
#lookupTeaserCard.ltc-found #lookupTeaserUnlockBtn { width: auto; padding: 11px 26px; border-radius: 8px; }
#lookupTeaserCard.ltc-found #lookupTeaserPlansBtn { color: #1e2620; margin-top: 2px; font-weight: 700; }
#lookupTeaserCard.ltc-found #lookupTeaserPlansBtn:hover,
#lookupTeaserCard.ltc-found #lookupTeaserPlansBtn:focus-visible { color: #000000; }
#lookupTeaserCard.ltc-found #lookupTeaserPlansBtn::after { left: 12px; right: 12px; }

/* --- (e) usage panel (instant_out / credits_out) — replaces (c)+(d) --- */
#lookupTeaserCard .ltc-usage { margin: 14px; padding: 14px; border-radius: 12px; background: #fdefe0; border: 1px solid #f6dcc0; }
#lookupTeaserCard .ltc-usage-head { display: flex; align-items: flex-start; gap: 11px; }
#lookupTeaserCard .ltc-usage-tile {
    flex: none; width: 36px; height: 36px;
    display: grid; place-items: center;
    border-radius: 10px;
    background: #ffffff; color: #e8730c;
    font-size: 1.05rem; line-height: 1;
    box-shadow: 0 2px 6px -3px rgba(232,115,12,.5);
}
#lookupTeaserCard .ltc-usage-title { font-size: .92rem; font-weight: 700; color: #1e2620; letter-spacing: -.01em; margin: 0 0 .2rem; }
#lookupTeaserCard .ltc-usage-body { font-size: .8rem; line-height: 1.5; color: #4a544c; margin: 0; }
#lookupTeaserCard .ltc-usage-meter { margin-top: 12px; }
#lookupTeaserCard .ltc-meter-labels { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 5px; }
#lookupTeaserCard .ltc-meter-name {
    font-size: .64rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #4a544c;
}
#lookupTeaserCard .ltc-meter-count {
    font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .78rem; font-weight: 700; color: #e8730c; white-space: nowrap;
}
#lookupTeaserCard .ltc-meter-track {
    width: 100%; height: 8px; border-radius: 99px; background: #f1f0ee; overflow: hidden;
}
#lookupTeaserCard .ltc-meter-fill {
    display: block; height: 100%; border-radius: 99px;
    background: linear-gradient(90deg, #f0913c 0%, #e8730c 100%);
    transform-origin: left center;
    animation: ltcMeterGrow .9s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes ltcMeterGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
#lookupTeaserCard .ltc-meter-caption { margin: 6px 0 0; font-size: .68rem; color: #8a938b; }

/* --- (f) CTAs — always two, stacked: dark primary, then the compare link. BOTH are used
   in every teaser state (found / instant_out / credits_out) so the action area is one shape
   the visitor learns once; the .ltc-found overrides above only recolor/resize them. --- */
#lookupTeaserCard .ltc-actions {
    display: flex; flex-direction: column; align-items: stretch;
    padding: 6px 16px 16px;
}

/* PRIMARY — dark ink button. Idle it is completely still; the only motion is the arrow,
   which slides out of the label's right edge on hover (width 0 -> 16px). */
#lookupTeaserUnlockBtn {
    position: relative; overflow: hidden;
    display: flex; align-items: center; justify-content: center; gap: 7px;
    width: 100%; padding: 11px;
    border: 1px solid #1e2620; border-radius: 6px;
    background: #1e2620;
    color: #ffffff; text-decoration: none;
    font-size: 13.5px; font-weight: 600; line-height: 1.2;
}
/* the fill deliberately does NOT change on hover — the arrow reveal is the whole tell */
#lookupTeaserUnlockBtn:hover,
#lookupTeaserUnlockBtn:focus-visible { color: #ffffff; outline: none; }
#lookupTeaserUnlockBtn .ltc-cta-label { white-space: nowrap; }
#lookupTeaserUnlockBtn .ltc-cta-arrow {
    display: inline-flex; align-items: center; overflow: hidden;
    width: 0; opacity: 0; transform: translateX(-6px);
    transition: width .3s ease, opacity .3s ease, transform .3s ease;
}
#lookupTeaserUnlockBtn:hover .ltc-cta-arrow,
#lookupTeaserUnlockBtn:focus-visible .ltc-cta-arrow {
    width: 16px; opacity: 1; transform: translateX(0);
}

/* reassurance line between the two CTAs */
#lookupTeaserCard .ltc-reassure {
    display: flex; align-items: flex-start; justify-content: center; gap: 6px;
    margin: 6px 0 10px; padding: 0 24px;
    font-size: 12px; line-height: 1.4; color: #8a938b; text-align: center;
}
#lookupTeaserCard .ltc-reassure i { color: #4e964f; font-size: 12px; flex: none; line-height: 1.4; }

/* SECONDARY — reads as a plain hyperlink (trailing chevron), not a button, so it never
   competes with the primary. #lookupTeaserPlansBtn opens #plansModal via the delegated
   data-plans-modal-open handler. The underline grows out from the centre on hover; the
   chevron nudges right with it. */
#lookupTeaserPlansBtn {
    position: relative;
    display: flex; align-items: center; justify-content: center; gap: 7px;
    align-self: center; width: fit-content; margin: 0 auto;
    padding: 6px 14px 8px;
    border: 0; background: transparent;
    color: #0d6efd; text-decoration: none;
    font-size: 12px; font-weight: 600; line-height: 1.2;
    cursor: pointer;
    transition: color .2s ease;
}
#lookupTeaserPlansBtn:hover,
#lookupTeaserPlansBtn:focus-visible { color: #0a58ca; outline: none; }
#lookupTeaserPlansBtn::after {
    content: '';
    position: absolute; left: 50%; right: 50%; bottom: 2px;
    height: 1.5px; background: currentColor;
    transition: left .28s ease, right .28s ease;
}
#lookupTeaserPlansBtn:hover::after,
#lookupTeaserPlansBtn:focus-visible::after { left: 12px; right: 12px; }
#lookupTeaserPlansBtn .ltc-plans-chevron {
    display: inline-flex; align-items: center;
    font-size: 10px;
    transition: transform .25s ease;
}
#lookupTeaserPlansBtn:hover .ltc-plans-chevron,
#lookupTeaserPlansBtn:focus-visible .ltc-plans-chevron { transform: translateX(3px); }

/* LOGIN (found/anon variant only) — a footnote, not a CTA: no chevron, no standing
   underline, normal weight. The question sits in muted body colour and only "Log in"
   takes the link blue, so the row stays subordinate to the "View Plans" primary above
   (returning users are hunting for it; new visitors shouldn't be pulled off the CTA). */
#lookupTeaserLoginLink {
    align-self: center; width: fit-content;
    margin: 8px auto 0; padding: 2px 6px;
    color: #8a938b; text-decoration: none;
    font-size: 12px; font-weight: 400; line-height: 1.4; text-align: center;
}
#lookupTeaserLoginLink:focus-visible { outline: none; }
#lookupTeaserLoginLink .ltc-login-action {
    color: #0d6efd;
    transition: color .2s ease;
}
#lookupTeaserLoginLink:hover .ltc-login-action,
#lookupTeaserLoginLink:focus-visible .ltc-login-action { color: #0a58ca; text-decoration: underline; }

@media (prefers-reduced-motion: reduce) {
    #lookupTeaserCard .ltc-found-badge,
    #lookupTeaserCard .ltc-meter-fill { animation: none !important; }
    /* with the keyframes off, paint the settled end-state */
    #lookupTeaserCard .ltc-meter-fill { transform: scaleX(1); }
    /* the CTA hover reveals are transitions, not keyframes — leave them, but don't slide */
    #lookupTeaserUnlockBtn .ltc-cta-arrow,
    #lookupTeaserPlansBtn::after,
    #lookupTeaserPlansBtn .ltc-plans-chevron { transition: none; }
}

/* ===== "Compare plans & credits" modal (#plansModal) =====
   Extracted to the shared css/plans-modal.css (linked at the top of this block) when the
   modal became the reusable blocks/plans_modal.html — only the page-local trigger styling
   (#lookupTeaserPlansBtn, above) still lives here. */

/* ===== Mobile bottom action bar + state-driven layout (<= md) =====
   A fixed bottom bar surfaces the per-state actions on small screens; desktop is left
   untouched (every rule that changes layout is gated to < 768px). The bar's buttons proxy
   to the existing desktop controls, so behavior stays single-sourced. body[data-ll-mobile]
   drives which page regions are visible per state (idle / searching / success / found /
   notfound), mirroring the ChargeLoader state machine; #llMobileBar[data-state] drives
   which button group shows. Both default to display:none so nothing leaks onto desktop. */
.ll-mbar { display: none; }
.ll-mbar-group { display: none; gap: .5rem; }
#llMobileSuccess { display: none; }
/* Mobile-only "Adjust" sheet: hidden by default so it never renders on desktop; the
   <768px media query flips it to a fixed bottom sheet. */
#llAdjustSheet { display: none; }
/* Faux-disabled: looks disabled (Bootstrap's .65 opacity) but stays clickable so a tap on the
   Search button re-opens the anon limit modal. Omitting pointer-events:none is the whole point. */
.ll-fauxdisabled { opacity: .65; cursor: not-allowed; }
@keyframes llSuccessIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes llSuccessPop { from { transform: scale(.5); opacity: 0; } to { transform: scale(1); opacity: 1; } }

@media (max-width: 767.98px) {
    /* The inline desktop Search button is replaced by the bottom-bar Search on mobile. */
    #searchButton { display: none !important; }

    /* iOS Safari auto-zooms the page when focusing any input whose font-size is < 16px.
       These inputs inherit Bootstrap's .form-control-sm (.875rem / 14px), so focusing them
       jolts the viewport. Forcing 16px on mobile stops the zoom without disabling pinch-zoom
       site-wide (which the viewport-meta approach would). Desktop styling is untouched. */
    #inputStreet,
    #inputZip,
    #propertySize,
    #llSheetLotSize { font-size: 16px; }

    /* The Lot Size adjustment is a desktop power-override; the mobile starting screen stays
       focused on just the address entry (the lookup supplies the real lot size, and the
       hidden #propertySize input keeps its default value for any downstream reads). */
    #lotSizeAdjustCard { display: none !important; }

    /* The loader-card "Try again" is replaced by the bottom-bar Try again on mobile, so
       a not-found doesn't surface two of them. The mobile button proxies a .click() to
       #llTryAgainBtn, so hiding the wrapper here doesn't break it. */
    #llTryAgainWrap { display: none !important; }

    /* Results stay hidden until there's a found result; idle shows just the inputs, and
       searching / notfound show just the loader. */
    body[data-ll-mobile="idle"] #lookupResultCol,
    body[data-ll-mobile="searching"] #lookupResultCol,
    body[data-ll-mobile="success"] #lookupResultCol,
    body[data-ll-mobile="notfound"] #lookupResultCol { display: none !important; }

    /* On a found result the whole left column (search + adjustments panel AND the loader
       panel) steps aside so the results own the screen. In the in-app search flow animateIn()
       already slid #leftSearchPanel off the top (via d-none), but a page opened DIRECTLY on a
       ?id=<uuid> result boots straight into the found state without ever running that slide —
       so without this rule the search panel would sit above the result on mobile. Hiding it
       here lands both entry paths on the same results-only view. (Desktop is untouched — this
       whole block is gated to <768px. "New Search" returns to idle and the panel reappears.) */
    body[data-ll-mobile="found"] #leftSearchPanel,
    body[data-ll-mobile="found"] #lookupPanel { display: none !important; }

    /* "Adjust" bottom sheet (found state): a viewport-anchored wrapper whose inner card
       (.list-group) slides up from below over a dimmed backdrop, while the property
       details + pricing stay put behind it. It is NOT the desktop #lotSizeAdjustCard —
       that card lives inside #leftSearchPanel, whose will-change:transform makes it the
       containing block for any fixed descendant (which trapped the sheet at the top of
       the page). This wrapper sits at the bar's DOM level (no transformed ancestor), so
       position:fixed anchors to the viewport. Its input mirrors #propertySize and fires
       the same live-pricing update; see the MobileBar controller.

       Hiding math: the wrapper is pinned flush to the viewport bottom (bottom:0) and its
       bottom padding (~ the bar's height) floats the card just above the bar. Pinning to
       the bottom is what makes translateY(100%) tuck the WHOLE thing off-screen no matter
       how tall the card grows; the extra +2.5rem also buries the card's upward box-shadow
       (which sits above the bar in z-order) so nothing smudges the bar while closed. Both
       terms are height-independent, so the sheet hides cleanly at any content size. (The
       old approach floated the card at bottom:4.7rem and hid it with translateY(160%) — a
       fraction of the card's OWN height — so any content that out-grew that ratio left the
       card peeking above the bar while "closed".) */
    #llAdjustSheet {
        display: block;
        position: fixed; left: 0; right: 0; bottom: 0;
        /* Below the bar (1041) so the card slides up from BEHIND the bar (and tucks back
           behind it) instead of sliding over it; they don't overlap at rest. Still above
           the backdrop (1039) so the open card itself isn't dimmed. */
        z-index: 1040;
        padding: 0 .6rem calc(4.6rem + env(safe-area-inset-bottom, 0px));
        transform: translateY(calc(100% + 2.5rem));
        transition: transform .3s cubic-bezier(.2,.7,.2,1);
        /* The wrapper itself never catches taps — only the card does — so its transparent
           bottom-padding band (which overlaps the bar) leaves the bar's buttons tappable. */
        pointer-events: none;
    }
    #llAdjustSheet .list-group {
        max-height: 65vh; overflow-y: auto;
        border-radius: .6rem;
        box-shadow: 0 -10px 30px -8px rgba(26,31,28,.30);
        pointer-events: auto;
    }
    body.ll-adjust-open #llAdjustSheet { transform: translateY(0); }

    /* Dimmed backdrop behind the sheet (tap to close). Sits above the results but BELOW
       both the sheet (1040) and the bar (1041), so the open card isn't dimmed and the
       bar's Adjust button stays bright + tappable to close as well. */
    #llAdjustBackdrop {
        position: fixed; inset: 0; z-index: 1039;
        background: rgba(26,31,28,.38);
        opacity: 0; visibility: hidden;
        transition: opacity .3s ease, visibility .3s ease;
    }
    body[data-ll-mobile="found"].ll-adjust-open #llAdjustBackdrop {
        opacity: 1; visibility: visible;
    }

    /* Manual fallback: "Manual" on a not-found unwinds the loader (abort slides the search
       panel back + adds d-none to #lookupPanel) and switches here so the user can enter the
       lot size by hand. Reveal the lot-size override card (hidden on every other mobile
       screen, line above) and keep the pricing column visible — "manual" is deliberately
       absent from the #lookupResultCol hide list above — so prices update live as they type. */
    body[data-ll-mobile="manual"] #lotSizeAdjustCard { display: flex !important; }

    /* In manual mode the located property-lookup card (#propertyInfo) isn't needed — the
       user is overriding the lot size by hand, so focus the screen on the adjustment input
       + live pricing. Only the Adjust-from-found path actually renders #propertyInfo, so on
       the idle/not-found manual entries this is a harmless no-op. */
    body[data-ll-mobile="manual"] #propertyInfo { display: none !important; }

    /* A sticky column makes no sense once it's a full-width mobile block. */
    #lookupResultCol { position: static !important; top: auto !important; }

    /* On mobile the teaser leads the result column, above the property details card.
       Flexbox order reshuffles it without touching the DOM, so the in-place result
       re-render keeps working. Source order stays property-info → teaser → pricing for
       desktop. Both teaser variants are covered: the LOCKED card (#lookupTeaserCard) and
       the preview/not-enforced info banner (#lookupTeaserBanner) — only one of the two
       ever renders, and whichever it is must lead the column. */
    #lookupResultCol { display: flex; flex-direction: column; }
    #lookupResultCol > #lookupTeaserBanner,
    #lookupResultCol > #lookupTeaserCard { order: -1; }

    /* Leave room for the fixed bar so it never covers the last row of content. */
    body { padding-bottom: 5.5rem; }

    /* ---- the bar itself ---- */
    .ll-mbar {
        display: flex;
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 1041;
        padding: .6rem .75rem calc(.6rem + env(safe-area-inset-bottom, 0px));
        background: #fff; border-top: 1px solid #e4e9e3;
        box-shadow: 0 -4px 16px -6px rgba(26,31,28,.18);
    }
    .ll-mbar-group { width: 100%; align-items: stretch; }
    .ll-mbar[data-state="idle"]      .ll-mbar-group[data-for="idle"],
    .ll-mbar[data-state="searching"] .ll-mbar-group[data-for="searching"],
    .ll-mbar[data-state="found"]     .ll-mbar-group[data-for="found"],
    .ll-mbar[data-state="notfound"]  .ll-mbar-group[data-for="notfound"],
    .ll-mbar[data-state="manual"]    .ll-mbar-group[data-for="manual"] { display: flex; }
    /* During the success splash the overlay covers the screen — hide the bar entirely. */
    .ll-mbar[data-state="success"] { display: none; }
    .ll-mbar .btn { font-weight: 600; }

    /* ---- brief full-screen "Property found!" success splash ---- */
    body[data-ll-mobile="success"] #llMobileSuccess {
        display: flex; flex-direction: column; align-items: center; justify-content: center;
        position: fixed; inset: 0; z-index: 2000; padding: 2rem;
        background: #fff; text-align: center;
        animation: llSuccessIn .35s cubic-bezier(.2,.7,.2,1) both;
    }
    #llMobileSuccess .ll-ms-check {
        width: 86px; height: 86px; border-radius: 50%;
        display: grid; place-items: center; margin-bottom: 1.1rem;
        background: #e8f3e8; color: #2e7d32; font-size: 2.6rem;
        animation: llSuccessPop .45s cubic-bezier(.2,.9,.3,1.4) both;
    }
    #llMobileSuccess .ll-ms-title {
        font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em;
        text-transform: uppercase; color: #2e7d32; margin-bottom: .4rem;
    }
    #llMobileSuccess .ll-ms-addr { color: #495057; font-weight: 600; }
}
@media (max-width: 767.98px) and (prefers-reduced-motion: reduce) {
    body[data-ll-mobile="success"] #llMobileSuccess,
    #llMobileSuccess .ll-ms-check { animation: none !important; }
}

/* ===== "How property lookup works" help affordance + modal =====
   A small question-mark (?) button sits inline in the Property Lookup card header,
   right after the title, and opens #lookupHelpModal — a diagram of the tier cascade
   a lookup runs through: "Standard Search" (Tier 1) resolves most addresses, and on
   paid plans "Deep Search" (Tiers 2-4) keeps going until the property is found. All
   modal rules are scoped to the modal id. The button lives in #leftSearchPanel's
   address card (idle state) so it's reachable before a search starts, not just once
   #lookupLoader is showing. */
.ll-help-btn {
    width: 22px; height: 22px; padding: 0; line-height: 1; flex-shrink: 0;
    display: inline-grid; place-items: center;
    border: 1px solid rgba(255,255,255,.6); border-radius: 50%;
    background: transparent; color: #fff; font-size: .85rem; cursor: pointer;
    transition: background .15s ease, color .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.ll-help-btn:hover,
.ll-help-btn:focus-visible {
    background: #fff; color: #4e964f; border-color: #fff;
    box-shadow: 0 2px 9px -2px rgba(0,0,0,.4); outline: none;
}

#lookupHelpModal .modal-content { border-radius: 14px; overflow: hidden; }
#lookupHelpModal .modal-header { background-color: #4e964f; }
#lookupHelpModal .modal-title { font-weight: 700; letter-spacing: -.01em; }
/* Tinted band + hairline settles the action row against the white body — same greens as
   the explainer below it. Set explicitly rather than leaning on Bootstrap's default
   footer border, whose --bs-border-color grey is cooler than this modal's palette. */
#lookupHelpModal .modal-footer {
    background-color: #f4f7f4;
    border-top: 1px solid #e4e8e3;
}

/* --- lede: the card's opening deck — says WHY the cascade exists before the panel
   below it shows HOW. Unboxed type on the card's white: the explainer under it is
   already a panel, and a second frame here would read as clutter.
   It carries no measure cap and no centring on purpose. Flush left and full width, it
   shares its left edge with the heading, the panel and the cascade, and its line length
   is already the one the panel's own rows run to — so it reads as part of the card
   rather than a block sat on top of it. Type sits one step under .lhm-intro-txt's ink
   at the same 13.5px, keeping it connective prose beneath the 13px heading rather than
   a competing second heading. Vertical rhythm is the card's flex gap — margins here
   would stack on top of it. --- */
#lookupHelpModal .lhm-lede {
    margin: 0;
    font-size: 13.5px; line-height: 1.55; color: #5f6f61;
}

/* --- card: frames the whole explainer under a "How it works" heading --- */
#lookupHelpModal .lhm-card {
    border: 1px solid #dce0db; border-radius: 12px; background: #fff;
    box-shadow: 0 1px 2px rgba(30,38,32,.04);
    padding: 16px 18px;
    display: flex; flex-direction: column; gap: 16px;
}
/* The rule under the heading is the head's own border-bottom rather than an <hr>, which
   would need its Bootstrap opacity/border resets undone to render as a hairline. */
#lookupHelpModal .lhm-card-head {
    display: flex; align-items: center; gap: 8px;
    padding-bottom: 12px;
    border-bottom: 1px solid #e9ece8;
    font-size: 13px; font-weight: 700; color: #1a1f1c;
}
#lookupHelpModal .lhm-card-head i { color: #4e964f; font-size: 15px; line-height: 1; }

/* --- intro panel: what each of the two searches does, one icon-chip row each --- */
#lookupHelpModal .lhm-intro {
    border: 1px solid #e9ece8; border-radius: 10px;
    background: linear-gradient(180deg, #fafcfa, #f5f8f5);
    padding: 15px 17px; margin-bottom: 4px;
    display: flex; flex-direction: column; gap: 12px;
}
#lookupHelpModal .lhm-intro-row { display: flex; align-items: flex-start; gap: 12px; }
#lookupHelpModal .lhm-intro-ic {
    flex-shrink: 0; width: 26px; height: 26px; margin-top: 1px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 8px; font-size: 12px;
}
#lookupHelpModal .lhm-intro-txt { font-size: 13.5px; line-height: 1.5; color: #4a5248; }
#lookupHelpModal .lhm-intro-txt strong { font-weight: 700; }
#lookupHelpModal .lhm-intro-row--std .lhm-intro-ic { background: #e3efe3; border: 1px solid #cfe3cf; color: #3d7a3e; }
#lookupHelpModal .lhm-intro-row--std .lhm-intro-txt strong { color: #3d7a3e; }
#lookupHelpModal .lhm-intro-row--deep .lhm-intro-ic { background: #e2f1f4; border: 1px solid #c6e4ea; color: #147a8c; }
#lookupHelpModal .lhm-intro-row--deep .lhm-intro-txt strong { color: #2b8fb5; }
/* Negative margin absorbs 1px of the flex gap on each side so the rule sits optically
   centred between the two rows rather than 12px clear of both. */
#lookupHelpModal .lhm-intro-sep { height: 1px; background: #e9ece8; margin: -1px 0; }

/* --- tier cascade diagram: Tier 1 (Standard) then Tiers 2-4 (Deep, paid plans) ---
   The two groups sit side by side only once .modal-lg actually widens to 800px, which
   Bootstrap does at >=992px. Below that the dialog is either the 500px .modal-lg default
   or (under 768px) a full-viewport sheet — never wide enough for four cards in a row, so
   the whole cascade stacks and the arrows turn to point down. */
#lookupHelpModal .lhm-flow { display: flex; align-items: stretch; gap: 10px; }
#lookupHelpModal .lhm-group {
    position: relative; display: flex; align-items: stretch;
    border-radius: 12px; padding: 22px 14px 14px;
}
#lookupHelpModal .lhm-group-label {
    position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%);
    background: #fff; padding: 0 12px; white-space: nowrap;
    font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
#lookupHelpModal .lhm-group--std { flex: 0 0 186px; border: 2px solid #4e964f; background: #f4f9f4; }
#lookupHelpModal .lhm-group--std .lhm-group-label { color: #3d7a3e; }
#lookupHelpModal .lhm-group--deep { flex: 1; gap: 9px; border: 2px solid #bcdfe5; background: #f7fcfd; }
#lookupHelpModal .lhm-group--deep .lhm-group-label { color: #2b9db0; }

#lookupHelpModal .lhm-tier {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px;
    border: 1px solid #dce0db; border-radius: 10px; background: #fff;
    padding: 13px 10px; text-align: center;
}
#lookupHelpModal .lhm-tier-name { font-size: 14px; font-weight: 700; color: #1a1f1c; white-space: nowrap; }
#lookupHelpModal .lhm-group--std .lhm-tier-name { font-size: 15px; color: #3d7a3e; }
#lookupHelpModal .lhm-tier svg { margin: 2px 0; overflow: visible; }
/* One-word depth name qualifying the "Tier N" above it — weighted up from the muted
   sentence this used to hold so a lone word reads as a deliberate label, not a fragment. */
#lookupHelpModal .lhm-tier-desc { font-size: 12.5px; font-weight: 600; line-height: 1.4; color: #5f6f61; }
/* margin-top:auto keeps the coverage chips bottom-aligned across cards whose stacked
   database glyphs are deliberately unequal in height. */
#lookupHelpModal .lhm-cov { margin-top: auto; font-size: 12px; border-radius: 8px; padding: 6px 12px; color: #6b7a6d; }
#lookupHelpModal .lhm-cov b { font-family: var(--bs-font-monospace); font-weight: 700; }
#lookupHelpModal .lhm-group--std .lhm-cov { background: #eaf3ea; border: 1px solid #cfe3cf; }
#lookupHelpModal .lhm-group--std .lhm-cov b { color: #3d7a3e; }
#lookupHelpModal .lhm-group--deep .lhm-cov { background: #e6f4f6; border: 1px solid #cbe7ec; }
#lookupHelpModal .lhm-group--deep .lhm-cov b { color: #147a8c; }

#lookupHelpModal .lhm-arrow { flex: 0 0 auto; display: flex; align-items: center; line-height: 1; }
#lookupHelpModal .lhm-arrow--main { color: #4e964f; font-size: 24px; }
#lookupHelpModal .lhm-arrow--sub { color: #147a8c; font-size: 18px; }

@media (max-width: 991.98px) {
    #lookupHelpModal .lhm-flow,
    #lookupHelpModal .lhm-group--deep { flex-direction: column; }
    #lookupHelpModal .lhm-group--std { flex: 0 0 auto; }
    #lookupHelpModal .lhm-arrow { justify-content: center; }
    #lookupHelpModal .lhm-arrow i { display: block; transform: rotate(90deg); }
}

/* --- mobile: .modal-fullscreen-md-down turns the dialog into a full-viewport sheet, so
   the rounded corners/shadow come off and the nested paddings (body > card > intro >
   group > tier) tighten to hand the saved width back to the content. --- */
@media (max-width: 767.98px) {
    #lookupHelpModal .modal-content { border-radius: 0; box-shadow: none !important; }
    #lookupHelpModal .lhm-card { border-radius: 10px; padding: 13px 11px; gap: 13px; }
    #lookupHelpModal .lhm-intro { padding: 13px 12px; }
    #lookupHelpModal .lhm-intro-row { gap: 10px; }
    #lookupHelpModal .lhm-group { padding: 20px 9px 9px; }
    #lookupHelpModal .lhm-tier { padding: 12px 8px; }
    /* Full-bleed tap target — the sheet has no visible dialog edge to sit against. The
       margin reset drops Bootstrap's .modal-footer > * side gap, which would otherwise
       shrink the button off the footer's padding edges. */
    #lookupHelpModal #lhmDismissBtn { width: 100%; margin-left: 0; margin-right: 0; }
}