/* Lead-gen V2: Net Sheet. Tokens from the Figma handoff. */

:root {
    --lgv2-text: #181D27;
    --lgv2-label: #414651;
    --lgv2-text2: #535862;
    --lgv2-text3: #717680;
    --lgv2-placeholder: #A4A7AE;
    --lgv2-border: #D5D7DA;
    --lgv2-divider: #E9EAEB;
    --lgv2-primary: #278AE5;
    --lgv2-link: #2076C5;
    --lgv2-success: #17B26A;
    --lgv2-success-dark: #079455;
    --lgv2-success-bg: #ECFDF3;
    --lgv2-navy: #224D6E;
    --lgv2-teal: #83C7B0;
    --lgv2-danger: #D92D20;
    --lgv2-page: #FAFAFA;
}

/* The old calculator body stays in the page for its scripts; only the V2 root shows. */
.LGV2_Page > *:not(.LGV2_Root) { display: none !important; }
.LGV2_Body, .LGV2_Body.bg_body_colour { background: var(--lgv2-page) !important; }
.LGV2_Root #hl_loading { display: none !important; }

.LGV2_Root {
    font-family: "DM Sans", "Montserrat-Regular", sans-serif;
    color: var(--lgv2-text);
    background: #fff;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
}
.LGV2_Root *, .LGV2_Root *::before, .LGV2_Root *::after { box-sizing: border-box; }
.LGV2_Col { width: 100%; max-width: 480px; display: flex; flex-direction: column; gap: 14px; flex: 1; }
.LGV2_Root > .LGV2_Col { padding: 14px 20px 12px; }
.LGV2_Root section.LGV2_Col { gap: 20px; padding-top: 10px; }
.LGV2_Hidden { display: none !important; }
.LGV2_Root button { font-family: inherit; cursor: pointer; }
.LGV2_Root a, .LGV2_Link { color: var(--lgv2-link); cursor: pointer; text-decoration: none; }
.LGV2_Root :focus-visible { outline: 2px solid var(--lgv2-primary); outline-offset: 2px; }
/* The legacy page's index.css sets path { stroke-width: 4 } and darkmode.css sets
   svg { fill } for its own charts; the V2 icons are Figma's 2px outlines. */
.LGV2_Root svg, .LGV2_Sheet svg, .LGV2_SugPin { fill: none; }
.LGV2_Root svg path, .LGV2_Sheet svg path, .LGV2_SugPin path { stroke-width: 2; fill: none; }
.LGV2_SentIcon svg path { stroke-width: 2.5; }

/* Header */
.LGV2_Head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.LGV2_Agent { display: flex; align-items: center; gap: 10px; min-width: 0; }
.LGV2_Avatar {
    width: 36px; height: 36px; border-radius: 50%; flex: 0 0 36px;
    background: var(--lgv2-navy) center/cover no-repeat; color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 600; overflow: hidden;
}
.LGV2_Avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.LGV2_AgentName { font-size: 14px; font-weight: 600; line-height: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.LGV2_AgentCo { font-size: 12px; color: var(--lgv2-text3); line-height: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.LGV2_StepLabel { font-size: 12px; color: var(--lgv2-text3); white-space: nowrap; }
.LGV2_Segments { display: flex; gap: 6px; }
.LGV2_Segments span { flex: 1; height: 4px; border-radius: 2px; background: var(--lgv2-divider); }
.LGV2_Segments span.is-on { background: var(--lgv2-primary); }
.LGV2_Segments.is-done span { background: var(--lgv2-success); }
.LGV2_Nav { display: flex; align-items: center; gap: 16px; }
.LGV2_NavBtn {
    display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; padding: 0;
    font-size: 14px; font-weight: 500; color: var(--lgv2-label);
}
.LGV2_NavBtn svg { width: 18px; height: 18px; }

/* Type */
.LGV2_Title { font-size: 26px; line-height: 32px; font-weight: 700; margin: 0; }
#lgv2_s_loading .LGV2_Title, #lgv2_s_confirm .LGV2_Title, #lgv2_s_value .LGV2_Title { font-size: 22px; line-height: 28px; }
.LGV2_Sub { font-size: 15px; line-height: 22px; color: var(--lgv2-text2); margin: 0; }
.LGV2_Small { font-size: 13px; line-height: 18px; color: var(--lgv2-text3); }
.LGV2_Legal { font-size: 11px; line-height: 16px; color: var(--lgv2-placeholder); text-align: center; }
.LGV2_Footer { margin-top: auto; padding-top: 12px; }

/* Buttons */
.LGV2_Btn {
    width: 100%; height: 50px; border: 0; border-radius: 84px; background: var(--lgv2-primary); color: #fff;
    font-size: 16px; font-weight: 600;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    transition: filter .15s;
}
.LGV2_Btn svg { width: 18px; height: 18px; flex: 0 0 auto; }
.LGV2_Btn:hover:not(:disabled) { filter: brightness(.92); }
.LGV2_Btn:disabled { background: #B2DDFF; cursor: default; }
.LGV2_Btn--white { background: #fff; color: var(--lgv2-navy); }
.LGV2_Btn--ghost { background: #fff; color: var(--lgv2-text); border: 1px solid var(--lgv2-border); }
.LGV2_Center { text-align: center; }

/* Fields */
.LGV2_Field { display: flex; flex-direction: column; gap: 6px; }
.LGV2_FieldTop { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 14px; font-weight: 500; color: var(--lgv2-label); }
.LGV2_InputWrap {
    display: flex; align-items: center; min-height: 50px; border: 1px solid var(--lgv2-border); border-radius: 12px;
    background: #fff; padding: 0 14px; gap: 8px; box-shadow: 0 1px 2px rgba(16,24,40,.05);
}
.LGV2_InputWrap:focus-within { border: 2px solid var(--lgv2-primary); padding: 0 13px; }
.LGV2_InputWrap.is-error { border-color: var(--lgv2-danger); }
.LGV2_Prefix { color: var(--lgv2-text3); font-size: 15px; display: inline-flex; }
.LGV2_Prefix svg { width: 18px; height: 18px; }
.LGV2_InputWrap input {
    flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 16px; color: var(--lgv2-text); height: 100%; padding: 0;
}
.LGV2_InputWrap input::placeholder { color: var(--lgv2-placeholder); }
/* The wrap draws the focus ring; the old page styles would put the browser's own outline on the input too. */
.LGV2_InputWrap input:focus, .LGV2_InputWrap input:focus-visible, .LGV2_PriceVal input:focus, .LGV2_Slider:focus { outline: none !important; box-shadow: none !important; }
.LGV2_InputWrap input[type="date"] { appearance: none; -webkit-appearance: none; }
.LGV2_Helper { font-size: 13px; color: var(--lgv2-text2); }
.LGV2_Error { font-size: 13px; color: var(--lgv2-danger); }
.LGV2_Chip { font-size: 12px; font-weight: 500; line-height: 18px; padding: 1px 8px; border-radius: 999px; background: #F5F5F5; color: var(--lgv2-label); white-space: nowrap; }
.LGV2_Chip--green { background: var(--lgv2-success-bg); color: #067647; }
.LGV2_Chip--blue { background: #EFF8FF; color: #175CD3; }
.LGV2_Chip--empty { display: none; }

/* Address */
.LGV2_Intro { display: flex; flex-direction: column; gap: 8px; }
.LGV2_Spacer { flex: 1; }
.LGV2_Icon {
    width: 56px; height: 56px; border-radius: 16px; background: var(--lgv2-success-bg); color: var(--lgv2-success);
    display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
}
.LGV2_Icon svg { width: 28px; height: 28px; }
.LGV2_PropCard .LGV2_Icon { width: 44px; height: 44px; border-radius: 12px; background: #EFF8FF; color: var(--lgv2-primary); }
.LGV2_PropCard .LGV2_Icon svg { width: 22px; height: 22px; }
.LGV2_Trust { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 12px; }
.LGV2_Trust svg { width: 14px; height: 14px; }
/* gle_places.js mounts and positions this list on <body> itself, with its own
   inline styles on each <li>; leadgen_v2.js rewrites the rows into two lines. */
.LGV2_Body #GLEPlacesSugg {
    border: 1px solid var(--lgv2-divider) !important; border-radius: 12px !important; margin-top: 6px;
    box-shadow: 0 8px 8px rgba(15,23,41,.08); overflow: hidden; max-width: 480px; background: #fff !important;
    font-family: "DM Sans", "Montserrat-Regular", sans-serif;
}
.LGV2_Body #GLEPlacesSugg ul { margin: 0; padding: 0; list-style: none; }
.LGV2_Body #GLEPlacesSugg li {
    display: flex !important; align-items: center; gap: 10px; padding: 12px 14px !important;
    border-bottom: 0 !important; font-family: inherit !important; font-size: 14px !important; cursor: pointer;
}
.LGV2_Body #GLEPlacesSugg li:first-child { background: #F5FAFF; }
.LGV2_Body #GLEPlacesSugg li:hover { background: #F5F5F5; }
.LGV2_Body #GLEPlacesSugg li img { display: none; }
.LGV2_SugPin { width: 16px; height: 16px; flex: 0 0 16px; color: var(--lgv2-placeholder); }
.LGV2_Body #GLEPlacesSugg li:first-child .LGV2_SugPin { color: var(--lgv2-primary); }
.LGV2_SugText { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.LGV2_SugMain { font-weight: 600; color: var(--lgv2-text); font-size: 14px; line-height: 18px; }
.LGV2_SugSub { font-size: 13px; color: var(--lgv2-text3); line-height: 18px; }
.LGV2_Rel { position: relative; }

@media (min-width: 600px) {
    .LGV2_Root { background: var(--lgv2-page); padding: 24px 16px; }
    .LGV2_Root > .LGV2_Col { background: #fff; border-radius: 16px; border: 1px solid var(--lgv2-divider); flex: 0 0 auto; min-height: 720px; }
}

/* Loading: the HomeLink beacon (teal rings around the house) over a checklist. */
#lgv2_s_loading { align-items: center; padding-top: 32px; gap: 24px; }
#lgv2_s_loading .LGV2_Intro { gap: 6px; width: 100%; }
#lgv2_s_loading .LGV2_Sub { font-size: 14px; }
.LGV2_Beacon { position: relative; width: 168px; height: 168px; flex: 0 0 auto; }
/* The rings are the waves: each one starts at the core, travels out to its
   place and settles there, inner first, then middle, then outer. The three
   hold, fade together, and the cycle starts again. Scale 1 is the ring at
   rest; the start scale is the 64px core over that ring's diameter. */
.LGV2_Beacon span { position: absolute; border-radius: 50%; background: var(--lgv2-teal); opacity: 0; animation: 4.2s cubic-bezier(.22, .61, .36, 1) infinite; }
.LGV2_Beacon span:nth-child(1) { inset: 0; animation-name: lgv2-ring-outer; }
.LGV2_Beacon span:nth-child(2) { inset: 20px; animation-name: lgv2-ring-middle; }
.LGV2_Beacon span:nth-child(3) { inset: 38px; animation-name: lgv2-ring-inner; }
@keyframes lgv2-ring-inner {
    0%        { transform: scale(.696); opacity: 0; }
    4%        { opacity: .4; }
    22%, 82%  { transform: scale(1); opacity: .4; }
    92%, 100% { transform: scale(1); opacity: 0; }
}
@keyframes lgv2-ring-middle {
    0%, 16%   { transform: scale(.5); opacity: 0; }
    20%       { opacity: .24; }
    40%, 82%  { transform: scale(1); opacity: .24; }
    92%, 100% { transform: scale(1); opacity: 0; }
}
@keyframes lgv2-ring-outer {
    0%, 32%   { transform: scale(.381); opacity: 0; }
    36%       { opacity: .14; }
    58%, 82%  { transform: scale(1); opacity: .14; }
    92%, 100% { transform: scale(1); opacity: 0; }
}
.LGV2_Beacon .LGV2_BeaconCore {
    inset: 52px; opacity: 1; color: #fff; background: var(--lgv2-navy); z-index: 1;
    display: flex; align-items: center; justify-content: center;
    animation: lgv2-bob 4.2s ease-in-out infinite;
}
.LGV2_BeaconCore svg { width: 30px; height: 30px; }
@keyframes lgv2-bob { 0%, 100% { transform: scale(1); } 3% { transform: scale(1.06); } 12% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
    .LGV2_Beacon span, .LGV2_Beacon .LGV2_BeaconCore { animation: none; }
    .LGV2_Beacon span:nth-child(1) { opacity: .14; }
    .LGV2_Beacon span:nth-child(2) { opacity: .24; }
    .LGV2_Beacon span:nth-child(3) { opacity: .4; }
}
.LGV2_Checklist { list-style: none; margin: 0; padding: 6px 16px; border: 1px solid var(--lgv2-divider); border-radius: 16px; background: #fff; width: 100%; }
.LGV2_Checklist li { display: flex; align-items: center; gap: 12px; padding: 12px 0; font-size: 15px; font-weight: 400; color: var(--lgv2-placeholder); border-bottom: 1px solid var(--lgv2-divider); }
.LGV2_Checklist li:last-child { border-bottom: 0; }
.LGV2_Checklist li.is-busy, .LGV2_Checklist li.is-found, .LGV2_Checklist li.is-miss { color: var(--lgv2-text); font-weight: 500; }
.LGV2_Checklist li .LGV2_State { margin-left: auto; font-size: 13px; font-weight: 500; color: var(--lgv2-placeholder); }
.LGV2_Checklist li .LGV2_Mark { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--lgv2-border); flex: 0 0 24px; box-sizing: border-box; }
.LGV2_Checklist li.is-busy .LGV2_Mark { border-color: var(--lgv2-primary); border-top-color: rgba(39,138,229,.25); animation: lgv2-spin 1s linear infinite; }
.LGV2_Checklist li.is-busy .LGV2_State { color: var(--lgv2-primary); }
.LGV2_Checklist li.is-found .LGV2_Mark { border-color: var(--lgv2-success); background: var(--lgv2-success) center/14px no-repeat url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-0.8333 -2.2917 14 14' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M10.8333 1.5L4.41667 7.91667L1.5 5'/></svg>"); }
.LGV2_Checklist li.is-found .LGV2_State { color: var(--lgv2-success); }
.LGV2_Checklist li.is-miss .LGV2_State { color: var(--lgv2-text3); }
@keyframes lgv2-spin { to { transform: rotate(360deg); } }

/* Confirm */
.LGV2_Card { background: #fff; border: 1px solid var(--lgv2-divider); border-radius: 16px; padding: 14px 16px; }
.LGV2_PropCard { display: flex; gap: 12px; align-items: center; background: var(--lgv2-page); padding: 14px; }
.LGV2_PropCard .LGV2_Icon { width: 56px; height: 56px; border-radius: 10px; background: #DCEFE8; color: var(--lgv2-navy); }
.LGV2_PropCard .LGV2_Icon svg { width: 26px; height: 26px; }
.LGV2_PropText { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.LGV2_PropAddr { font-size: 15px; font-weight: 600; line-height: 20px; }
.LGV2_PropCity { font-size: 13px; color: var(--lgv2-text3); line-height: 18px; }
.LGV2_PropMeta { font-size: 13px; color: var(--lgv2-text2); line-height: 18px; }
.LGV2_Fields { display: flex; flex-direction: column; gap: 14px; }
.LGV2_PaidOff { font-size: 14px; font-weight: 500; }
.LGV2_PaidOff .LGV2_Link { color: var(--lgv2-primary); }

/* Confirm: one card, label over value, chip and pencil on the right. */
.LGV2_Root #lgv2_s_confirm .LGV2_Sub { font-size: 14px; line-height: 20px; }
.LGV2_Root #lgv2_s_confirm .LGV2_Intro { gap: 6px; }
.LGV2_Root .LGV2_Fields { gap: 0; background: #fff; border: 1px solid var(--lgv2-divider); border-radius: 16px; }
.LGV2_Root .LGV2_Fields .LGV2_Field {
    display: grid; grid-template-columns: minmax(0, 1fr) auto 16px; grid-template-areas: "label chip pen" "input chip pen" "help help help";
    column-gap: 10px; row-gap: 2px; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--lgv2-divider);
}
.LGV2_Root .LGV2_Fields .LGV2_Field:last-child { border-bottom: 0; }
.LGV2_Root .LGV2_Fields .LGV2_FieldTop { display: contents; }
.LGV2_Root .LGV2_Fields .LGV2_FieldTop > span:first-child { grid-area: label; font-size: 13px; font-weight: 400; color: var(--lgv2-text2); }
.LGV2_Root .LGV2_Fields .LGV2_Chip { grid-area: chip; font-size: 11px; padding: 3px 8px; line-height: 14px; }
.LGV2_Root .LGV2_Fields .LGV2_Chip--empty { display: none; }
.LGV2_Pencil { grid-area: pen; width: 16px; height: 16px; padding: 0; border: 0; background: none; color: var(--lgv2-placeholder); display: inline-flex; }
.LGV2_Pencil svg { width: 16px; height: 16px; }
.LGV2_Value { grid-area: input; font-size: 17px; font-weight: 600; line-height: 24px; color: var(--lgv2-text); }
.LGV2_Value.is-empty { color: var(--lgv2-placeholder); }
.LGV2_Root .LGV2_Fields .LGV2_Field:not(.is-editing) .LGV2_InputWrap { display: none; }
.LGV2_Root .LGV2_Fields .LGV2_Field.is-editing .LGV2_Value { display: none; }
.LGV2_Root .LGV2_Fields .LGV2_InputWrap { grid-area: input; border: 0; box-shadow: none; padding: 0; min-height: 0; height: auto; border-radius: 0; gap: 2px; }
.LGV2_Root .LGV2_Fields .LGV2_InputWrap:focus-within { border: 0; box-shadow: none; padding: 0; }
.LGV2_Root .LGV2_Fields .LGV2_InputWrap.is-error { box-shadow: inset 0 -2px 0 var(--lgv2-danger); }
.LGV2_Root .LGV2_Fields .LGV2_InputWrap input,
.LGV2_Root .LGV2_Fields .LGV2_Prefix { font-size: 17px; font-weight: 600; color: var(--lgv2-text); line-height: 24px; height: 24px; }
.LGV2_Root .LGV2_Fields .LGV2_InputWrap input::placeholder { font-weight: 600; color: var(--lgv2-placeholder); }
.LGV2_Root .LGV2_Fields .LGV2_InputWrap input.LGV2_Short { flex: 0 1 auto; width: auto; min-width: 2ch; max-width: 12ch; field-sizing: content; }
@supports not (field-sizing: content) {
    .LGV2_Root .LGV2_Fields .LGV2_InputWrap input.LGV2_Short { width: 5ch; }
}
.LGV2_Root .LGV2_Fields .LGV2_Suffix { font-size: 17px; font-weight: 600; color: var(--lgv2-text); line-height: 24px; }
.LGV2_Suffix { color: var(--lgv2-text3); font-size: 15px; }
.LGV2_Root .LGV2_Fields .LGV2_InputWrap:focus-within input { box-shadow: inset 0 -2px 0 var(--lgv2-primary); }
.LGV2_Root .LGV2_Fields .LGV2_Helper,
.LGV2_Root .LGV2_Fields .LGV2_Loans { grid-area: help; font-size: 12px; }
.LGV2_Loans { margin: 0; font-size: 13px; color: var(--lgv2-text2); }
.LGV2_Loans summary { cursor: pointer; color: var(--lgv2-link); font-weight: 500; list-style: none; }
.LGV2_Loans summary::-webkit-details-marker { display: none; }
.LGV2_Loans ul { margin: 6px 0 0; padding: 0 0 0 16px; }

/* Value (AVM) */
#lgv2_s_value { gap: 18px; }
#lgv2_s_value .LGV2_Intro { gap: 6px; }
.LGV2_Root #lgv2_s_value .LGV2_Sub { font-size: 14px; line-height: 20px; }
.LGV2_ConfRow { display: flex; justify-content: space-between; font-size: 14px; font-weight: 500; color: var(--lgv2-label); }
.LGV2_ConfRow strong { font-weight: 600; }
.LGV2_Chart { display: grid; grid-template-columns: repeat(13, minmax(0, 1fr)); grid-template-rows: 26px 128px; column-gap: 2.5px; align-items: end; }
.LGV2_Chart span { grid-row: 2; border-radius: 4px 4px 0 0; background: #ABEFC6; transition: background .15s; }
.LGV2_Chart span:nth-child(1) { height: 22%; }
.LGV2_Chart span:nth-child(2) { height: 36%; }
.LGV2_Chart span:nth-child(3) { height: 50%; }
.LGV2_Chart span:nth-child(4) { height: 64%; }
.LGV2_Chart span:nth-child(5) { height: 77%; background: #47CD89; }
.LGV2_Chart span:nth-child(6) { height: 89%; background: #47CD89; }
.LGV2_Chart span:nth-child(7) { height: 100%; background: #47CD89; }
.LGV2_Chart span:nth-child(8) { height: 89%; background: #47CD89; }
.LGV2_Chart span:nth-child(9) { height: 77%; background: #47CD89; }
.LGV2_Chart span:nth-child(10) { height: 64%; background: #85E13A; }
.LGV2_Chart span:nth-child(11) { height: 50%; background: #85E13A; }
.LGV2_Chart span:nth-child(12) { height: 36%; background: #85E13A; }
.LGV2_Chart span:nth-child(13) { height: 22%; background: #85E13A; }
.LGV2_Chart span.is-you { background: var(--lgv2-success-dark) !important; }
/* On arrival every bar grows from the baseline to its height, left to right; the count-ups below run alongside. */
.LGV2_Chart span { transform-origin: bottom; }
.LGV2_Chart.is-rising span { animation: lgv2-rise .8s cubic-bezier(.22, .61, .36, 1) both; }
.LGV2_Chart.is-rising span:nth-child(1) { animation-delay: 0ms; }
.LGV2_Chart.is-rising span:nth-child(2) { animation-delay: 45ms; }
.LGV2_Chart.is-rising span:nth-child(3) { animation-delay: 90ms; }
.LGV2_Chart.is-rising span:nth-child(4) { animation-delay: 135ms; }
.LGV2_Chart.is-rising span:nth-child(5) { animation-delay: 180ms; }
.LGV2_Chart.is-rising span:nth-child(6) { animation-delay: 225ms; }
.LGV2_Chart.is-rising span:nth-child(7) { animation-delay: 270ms; }
.LGV2_Chart.is-rising span:nth-child(8) { animation-delay: 315ms; }
.LGV2_Chart.is-rising span:nth-child(9) { animation-delay: 360ms; }
.LGV2_Chart.is-rising span:nth-child(10) { animation-delay: 405ms; }
.LGV2_Chart.is-rising span:nth-child(11) { animation-delay: 450ms; }
.LGV2_Chart.is-rising span:nth-child(12) { animation-delay: 495ms; }
.LGV2_Chart.is-rising span:nth-child(13) { animation-delay: 540ms; }
@keyframes lgv2-rise { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) { .LGV2_Chart.is-rising span { animation: none; } }
.LGV2_YouTag {
    grid-row: 1; grid-column: 7; justify-self: center; align-self: start; position: relative; z-index: 1;
    background: var(--lgv2-text); color: #fff; font-size: 11px; font-weight: 600; padding: 4px 8px; border-radius: 999px; white-space: nowrap;
}
.LGV2_YouTag.is-col-1 { grid-column: 1; justify-self: start; }
.LGV2_YouTag.is-col-2 { grid-column: 2; justify-self: start; }
.LGV2_YouTag.is-col-3 { grid-column: 3; }
.LGV2_YouTag.is-col-4 { grid-column: 4; }
.LGV2_YouTag.is-col-5 { grid-column: 5; }
.LGV2_YouTag.is-col-6 { grid-column: 6; }
.LGV2_YouTag.is-col-7 { grid-column: 7; }
.LGV2_YouTag.is-col-8 { grid-column: 8; }
.LGV2_YouTag.is-col-9 { grid-column: 9; }
.LGV2_YouTag.is-col-10 { grid-column: 10; }
.LGV2_YouTag.is-col-11 { grid-column: 11; }
.LGV2_YouTag.is-col-12 { grid-column: 12; justify-self: end; }
.LGV2_YouTag.is-col-13 { grid-column: 13; justify-self: end; }
.LGV2_YouTag::after { content: ""; position: absolute; left: 50%; bottom: -4px; transform: translateX(-50%); border: 4px solid transparent; border-top-color: var(--lgv2-text); border-bottom: 0; }
.LGV2_Legend { display: flex; justify-content: space-between; gap: 8px; }
.LGV2_Legend div { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--lgv2-text2); flex: 1; }
.LGV2_Legend div:nth-child(2) { align-items: center; text-align: center; }
.LGV2_Legend div:nth-child(3) { align-items: flex-end; text-align: right; }
.LGV2_LegendLabel { display: inline-flex; align-items: center; gap: 4px; }
.LGV2_LegendLabel svg { width: 18px; height: 18px; color: var(--lgv2-success); }
.LGV2_Legend div:first-child .LGV2_LegendLabel svg { color: var(--lgv2-text3); }
.LGV2_Legend strong { font-size: 14px; font-weight: 600; color: #252B37; }
.LGV2_PriceCard {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px 24px; border-radius: 24px; color: #fff;
    background: linear-gradient(90deg, #47CD89 0%, #5CB89E 100%);
}
.LGV2_PriceCard .LGV2_PriceLabel { font-size: 16px; font-weight: 500; white-space: nowrap; }
.LGV2_PriceVal { display: flex; align-items: center; gap: 8px; font-size: 26px; line-height: 32px; font-weight: 700; }
/* Edit mode keeps the card's own type and colour; only an underline marks the field. */
.LGV2_PriceEdit { display: inline-flex; align-items: center; height: 32px; box-shadow: inset 0 -2px 0 rgba(255,255,255,.9); }
.LGV2_PriceVal input { width: auto; min-width: 2ch; max-width: 9ch; height: 32px; line-height: 32px; field-sizing: content; border: 0; background: transparent; padding: 0; margin: 0; font: inherit; color: #fff; text-align: right; caret-color: #fff; }
.LGV2_PriceVal input::placeholder { color: rgba(255,255,255,.6); }
@supports not (field-sizing: content) { .LGV2_PriceVal input { width: 7ch; } }
.LGV2_IconBtn { background: none; border: 0; padding: 0; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; color: #fff; }
.LGV2_IconBtn svg { width: 16px; height: 16px; }
.LGV2_SliderWrap { position: relative; padding: 0; }
.LGV2_Track { position: absolute; left: 0; top: 0; width: 100%; height: 24px; display: block; pointer-events: none; }
.LGV2_TrackBg { fill: var(--lgv2-border); }
.LGV2_TrackFill { fill: var(--lgv2-success); }
.LGV2_TrackTick { fill: #fff; }
.LGV2_Slider { width: 100%; height: 24px; -webkit-appearance: none; appearance: none; background: transparent; outline: none; position: relative; z-index: 2; margin: 0; display: block; }
.LGV2_Slider::-webkit-slider-runnable-track { height: 24px; background: transparent; }
.LGV2_Slider::-moz-range-track { height: 24px; background: transparent; }
.LGV2_Slider::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; border-radius: 50%; background: #fff; border: 0; box-shadow: 0 1px 4px rgba(16,24,40,.3); cursor: pointer; }
.LGV2_Slider::-moz-range-thumb { width: 24px; height: 24px; border-radius: 50%; background: #fff; border: 0; box-shadow: 0 1px 4px rgba(16,24,40,.3); cursor: pointer; }
.LGV2_SliderEnds { display: flex; justify-content: space-between; font-size: 11px; color: var(--lgv2-placeholder); margin-top: 8px; }
.LGV2_Reset { font-size: 13px; font-weight: 500; }
.LGV2_Reset.is-idle { visibility: hidden; }
.LGV2_Reset .LGV2_Link { color: var(--lgv2-primary); }

/* Results: Net Sheet */
#lgv2_s_results { gap: 20px; }
.LGV2_Hero { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.LGV2_HeroLabel { font-size: 14px; font-weight: 500; color: var(--lgv2-text2); }
.LGV2_Net { font-size: 44px; line-height: 52px; font-weight: 700; color: var(--lgv2-success-dark); }
.LGV2_Net.is-neg { color: var(--lgv2-danger); }
.LGV2_Hero .LGV2_Small { font-size: 13px; }
.LGV2_RangePill { display: inline-flex; gap: 4px; font-size: 12px; color: var(--lgv2-text2); background: var(--lgv2-page); border: 1px solid var(--lgv2-divider); border-radius: 999px; padding: 6px 12px; margin-top: 4px; }
.LGV2_RangePill strong { font-weight: 600; color: #252B37; }
.LGV2_Stack { height: 14px; border-radius: 7px; overflow: hidden; }
.LGV2_Stack svg { display: block; width: 100%; height: 14px; }
.LGV2_Stack .is-net { fill: var(--lgv2-success); }
.LGV2_Stack .is-payoff { fill: var(--lgv2-navy); }
.LGV2_Stack .is-broker { fill: var(--lgv2-primary); }
.LGV2_Stack .is-tax { fill: #7A5AF8; }
.LGV2_Stack .is-hoa { fill: #98A2B3; }
.LGV2_Rows { display: flex; flex-direction: column; padding: 4px 16px; }
.LGV2_Row { display: flex; flex-direction: column; gap: 4px; padding: 11px 0; border-top: 1px solid var(--lgv2-divider); font-size: 14px; font-weight: 500; color: var(--lgv2-text3); }
.LGV2_Row:first-child { border-top: 0; font-size: 15px; font-weight: 600; color: var(--lgv2-text); }
.LGV2_Row:first-child strong { font-size: 16px; font-weight: 700; }
.LGV2_RowTop { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.LGV2_RowTop > span { display: inline-flex; align-items: center; }
.LGV2_RowNote { margin: 0; font-size: 12px; line-height: 18px; font-weight: 400; color: var(--lgv2-text3); }
.LGV2_Row .LGV2_Dot { width: 10px; height: 10px; border-radius: 50%; margin-right: 10px; display: inline-block; flex: 0 0 10px; }
.LGV2_Row strong { font-weight: 600; color: var(--lgv2-text); }
.LGV2_Row.is-total { font-weight: 600; font-size: 15px; color: var(--lgv2-text); }
.LGV2_Row.is-total strong { color: var(--lgv2-success-dark); font-size: 16px; font-weight: 700; }
.LGV2_Row.is-total.is-neg strong { color: var(--lgv2-danger); }
.LGV2_CtaCard { background: var(--lgv2-navy); color: #fff; border-radius: 20px; padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.LGV2_CtaCard .LGV2_Agent .LGV2_AgentName, .LGV2_CtaCard .LGV2_Agent .LGV2_AgentCo { color: #fff; }
.LGV2_CtaCard .LGV2_AgentCo { opacity: .75; }
.LGV2_CtaCard .LGV2_Avatar { background-color: var(--lgv2-teal); color: var(--lgv2-navy); width: 44px; height: 44px; flex-basis: 44px; font-size: 15px; }
.LGV2_CtaHead { font-size: 16px; font-weight: 600; margin: 0; }
.LGV2_CtaBody { font-size: 13px; line-height: 18px; margin: 0; opacity: .8; }
.LGV2_CtaSent { display: flex; align-items: center; gap: 10px; background: rgba(255,255,255,.1); border-radius: 12px; padding: 10px 12px; font-size: 14px; }
.LGV2_CtaSent svg { width: 20px; height: 20px; color: var(--lgv2-success); flex: 0 0 20px; }
.LGV2_InlineCta { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--lgv2-primary); background: none; border: 0; padding: 0; align-self: center; text-align: center; max-width: 100%; }
/* One line down to 360px in DM Sans, as in the Figma frame; it may still wrap, never clip, if the font fails to load. */
@media (max-width: 420px) { .LGV2_InlineCta { font-size: clamp(12px, 3.3vw, 14px); } }
.LGV2_InlineCta svg { width: 16px; height: 16px; flex: 0 0 16px; }
.LGV2_Adjust { font-size: 14px; font-weight: 500; }
.LGV2_Adjust .LGV2_Link { color: var(--lgv2-primary); }
.LGV2_Root .LGV2_Legal { line-height: 16px; color: var(--lgv2-placeholder); }
/* Net Sheet CTA card: agent row holds the headline (Figma 4415:1869). */
.LGV2_Root .LGV2_CtaCard { display: grid; grid-template-columns: 44px minmax(0, 1fr); grid-template-areas: "avatar head" "avatar body" "button button" "sent sent"; column-gap: 12px; row-gap: 2px; align-items: center; }
.LGV2_Root .LGV2_CtaCard .LGV2_Agent { display: contents; }
.LGV2_Root .LGV2_CtaCard .LGV2_Agent > .LGV2_Avatar { grid-area: avatar; }
.LGV2_Root .LGV2_CtaCard .LGV2_Agent > div { display: none; }
.LGV2_Root .LGV2_CtaCard .LGV2_CtaHead { grid-area: head; align-self: end; }
.LGV2_Root .LGV2_CtaCard .LGV2_CtaBody { grid-area: body; align-self: start; }
.LGV2_Root .LGV2_CtaCard .LGV2_Btn { grid-area: button; margin-top: 12px; }
.LGV2_Root .LGV2_CtaCard .LGV2_CtaSent { grid-area: sent; margin-top: 12px; }
.LGV2_Root .LGV2_CtaCard .LGV2_CtaSent.LGV2_Hidden, .LGV2_Root .LGV2_CtaCard .LGV2_Btn.LGV2_Hidden { display: none; }

/* Request sheet / modal */
.LGV2_Scrim { position: fixed; inset: 0; background: rgba(16,24,40,.55); z-index: 1050; opacity: 0; transition: opacity .2s; }
.LGV2_Scrim.is-open { opacity: 1; }
/* Phones: the sheet scrolls inside itself if it must, without a visible bar. */
.LGV2_Sheet { scrollbar-width: none; }
.LGV2_Sheet::-webkit-scrollbar { display: none; }
.LGV2_Sheet {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1051; background: #fff; border-radius: 24px 24px 0 0;
    padding: 10px 20px 28px; max-height: 92vh; overflow: auto; transform: translateY(100%); transition: transform .25s ease;
    box-shadow: 0 -4px 12px rgba(10,13,18,.18);
    font-family: "DM Sans", "Montserrat-Regular", sans-serif; color: var(--lgv2-text);
}
.LGV2_Sheet *, .LGV2_Sheet *::before, .LGV2_Sheet *::after { box-sizing: border-box; }
.LGV2_Sheet.is-open { transform: translateY(0); }
.LGV2_Scrim.is-open { opacity: 1; }
.LGV2_Grab { width: 40px; height: 4px; padding: 12px 0; box-sizing: content-box; background: var(--lgv2-border); background-clip: content-box; border-radius: 2px; margin: -12px auto 4px; touch-action: none; cursor: grab; }
.LGV2_SheetHead { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 16px; }
.LGV2_SheetHead .LGV2_Avatar { width: 44px; height: 44px; flex-basis: 44px; }
.LGV2_SheetTitle { font-size: 20px; font-weight: 600; line-height: 26px; margin: 0; }
.LGV2_SheetSub { font-size: 14px; color: var(--lgv2-text2); margin: 2px 0 0; }
.LGV2_Close { margin-left: auto; background: none; border: 0; padding: 0; color: var(--lgv2-placeholder); }
.LGV2_Close svg { width: 20px; height: 20px; }
.LGV2_Form { display: flex; flex-direction: column; gap: 16px; }
.LGV2_Form .LGV2_Field { gap: 6px; }
.LGV2_Form .LGV2_Small { color: var(--lgv2-placeholder); font-weight: 400; }
.LGV2_Chips { display: flex; flex-wrap: wrap; gap: 8px; }
.LGV2_ChipBtn { border: 1px solid var(--lgv2-border); background: #fff; border-radius: 999px; padding: 7px 12px; font-size: 14px; font-weight: 500; color: var(--lgv2-label); }
.LGV2_ChipBtn.is-on { border-color: var(--lgv2-primary); color: #175CD3; background: #EFF8FF; }
.LGV2_Sheet .LGV2_Small:not(.LGV2_FieldTop .LGV2_Small) { font-size: 12px; line-height: 18px; }
.LGV2_Sent { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 12px 0 0; }
.LGV2_SentIcon { width: 56px; height: 56px; border-radius: 50%; background: var(--lgv2-success-bg); color: var(--lgv2-success); display: flex; align-items: center; justify-content: center; }
.LGV2_SentIcon svg { width: 28px; height: 28px; }
.LGV2_Sent h3 { margin: 0; font-size: 20px; font-weight: 600; }
.LGV2_Sent p { margin: 0 0 8px; font-size: 14px; line-height: 20px; color: var(--lgv2-text2); }
.LGV2_Sent .LGV2_Btn--ghost { color: var(--lgv2-label); }
.LGV2_Scrim.LGV2_Hidden, .LGV2_Sheet.LGV2_Hidden { display: none !important; }
body.LGV2_NoScroll { overflow: hidden; }
.LGV2_Dot[data-tone="net"] { background: var(--lgv2-success); }
.LGV2_Dot[data-tone="payoff"] { background: var(--lgv2-navy); }
.LGV2_Dot[data-tone="broker"] { background: var(--lgv2-primary); }
.LGV2_Dot[data-tone="title"] { background: #F79009; }
.LGV2_Dot[data-tone="tax"] { background: #7A5AF8; }
.LGV2_Dot[data-tone="hoa"] { background: #98A2B3; }

/* Desktop: the sheet is a centered card. Decided by the platform class the server
   puts on <body> (user agent), not by width, so a narrow embed on a desktop page
   still gets the card and a phone always gets the sheet. The backdrop is the
   scrolling layer: the card takes its full height and the page behind it scrolls
   when the window is short, so the card never shows a scrollbar of its own. */
.LGV2_Desktop .LGV2_Scrim { overflow-y: auto; display: flex; align-items: flex-start; padding: 24px 16px; box-sizing: border-box; }
.LGV2_Desktop .LGV2_Scrim.LGV2_Hidden { display: none; }
.LGV2_Desktop .LGV2_Sheet {
    position: relative; left: auto; right: auto; bottom: auto; top: auto; margin: auto; width: 100%; max-width: 440px; max-height: none; overflow: visible;
    border-radius: 16px; padding: 20px 20px 24px; box-shadow: 0 20px 24px -4px rgba(10,13,18,.18);
    transform: scale(.98); opacity: 0; transition: opacity .2s, transform .2s;
}
.LGV2_Desktop .LGV2_Sheet.is-open { transform: scale(1); opacity: 1; }
.LGV2_Desktop .LGV2_Grab { display: none; }

/* Address field: the <input> is the whole box so gle_places.js, which measures
   the input, draws its list exactly as wide as the field and flush with it. */
.LGV2_Root .LGV2_InputWrap.LGV2_AddressWrap { display: block; position: relative; border: 0; padding: 0; box-shadow: none; min-height: 0; height: auto; background: transparent; }
.LGV2_Root .LGV2_InputWrap.LGV2_AddressWrap:focus-within { border: 0; padding: 0; box-shadow: none; }
.LGV2_Root .LGV2_AddressWrap .LGV2_Prefix { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); pointer-events: none; z-index: 1; }
.LGV2_Root .LGV2_AddressWrap input {
    display: block; width: 100%; height: 50px; padding: 0 14px 0 44px; border: 1px solid var(--lgv2-border); border-radius: 12px;
    background: #fff; box-shadow: 0 1px 2px rgba(16,24,40,.05); font-size: 16px; color: var(--lgv2-text);
}
.LGV2_Root .LGV2_AddressWrap input:focus { outline: none !important; border: 2px solid var(--lgv2-primary); box-shadow: none !important; padding-left: 43px; }
.LGV2_Body #GLEPlacesSugg { box-sizing: border-box; }
/* Chrome paints autofilled fields pale blue; keep them white like the rest. */
.LGV2_Root input:-webkit-autofill, .LGV2_Sheet input:-webkit-autofill,
.LGV2_Root input:-webkit-autofill:hover, .LGV2_Sheet input:-webkit-autofill:hover,
.LGV2_Root input:-webkit-autofill:focus, .LGV2_Sheet input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px #fff inset; box-shadow: 0 0 0 1000px #fff inset;
    -webkit-text-fill-color: var(--lgv2-text); caret-color: var(--lgv2-text);
}
/* Count-up numbers: the finished value sits invisibly under the live one so the box is final-size from frame one. */
.cu-wrap { display: inline-grid; font-variant-numeric: tabular-nums; text-align: inherit; }
.cu-wrap > .cu-live, .cu-wrap > .cu-ghost { grid-area: 1 / 1; }
.cu-wrap > .cu-ghost { visibility: hidden; }
.LGV2_Row strong { text-align: right; }