
.marketPage .contentSection{
    margin-bottom:26px;
}

.marketHeadlineGrid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:12px;
    margin-top:20px;
}

.marketHeadlineCard{
    min-height:145px;
    padding:19px;
    border:1px solid #dce7eb;
    border-radius:17px;
    background:#fff;
    box-shadow:0 10px 25px rgba(20,54,72,.055);
}

.marketHeadlineCard > span,
.marketMetric > span{
    display:block;
    color:#6d818c;
    font-size:10px;
    font-weight:900;
    letter-spacing:.06em;
    line-height:1.3;
    text-transform:uppercase;
}

.marketHeadlineCard > strong{
    display:block;
    margin-top:12px;
    color:#0b2341;
    font-size:32px;
    line-height:1;
}

.marketHeadlineCard > small{
    display:block;
    margin-top:12px;
    color:#71828b;
    font-size:10px;
    font-weight:700;
    line-height:1.45;
}

.marketHeadlineCardFeatured{
    background:#f3f8f8;
    border-color:#c9dde1;
}

.marketMetricGrid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
    margin-top:18px;
}

.marketMetric{
    padding:18px 20px;
    border:1px solid #dfe8eb;
    border-radius:15px;
    background:#fafcfc;
}

.marketMetric > strong{
    display:block;
    margin-top:7px;
    color:#173f50;
    font-size:24px;
    line-height:1.1;
}

.marketMetric > small{
    display:block;
    margin-top:7px;
    color:#73858d;
    font-size:10px;
    line-height:1.45;
}

.marketBarChart{
    display:grid;
    grid-template-columns:repeat(12,minmax(28px,1fr));
    align-items:end;
    gap:8px;
    min-height:235px;
    margin-top:22px;
    padding:18px 15px 10px;
    border:1px solid #e0e9eb;
    border-radius:18px;
    background:#f8fbfb;
}

.marketBarMonth{
    display:grid;
    grid-template-rows:20px 150px 22px;
    align-items:end;
    text-align:center;
}

.marketBarCount{
    align-self:center;
    color:#526d79;
    font-size:10px;
    font-weight:900;
}

.marketBarTrack{
    position:relative;
    height:150px;
    overflow:hidden;
    border-radius:8px 8px 3px 3px;
    background:#e9f0f1;
}

.marketBar{
    position:absolute;
    right:0;
    bottom:0;
    left:0;
    min-height:5px;
    border-radius:8px 8px 3px 3px;
    background:#4e8795;
}

.marketBarLabel{
    align-self:center;
    color:#657d88;
    font-size:9px;
    font-weight:900;
    text-transform:uppercase;
}

.marketSalesTableWrap{
    margin-top:18px;
    overflow-x:auto;
    border:1px solid #dfe8eb;
    border-radius:16px;
}

.marketSalesTable{
    width:100%;
    min-width:650px;
    border-collapse:collapse;
    background:#fff;
}

.marketSalesTable th{
    padding:11px 13px;
    border-bottom:1px solid #dfe8eb;
    background:#f5f9f9;
    color:#647d88;
    font-size:9px;
    font-weight:900;
    letter-spacing:.05em;
    text-align:left;
    text-transform:uppercase;
}

.marketSalesTable td{
    padding:13px;
    border-bottom:1px solid #edf2f3;
    color:#435e6a;
    font-size:11px;
    line-height:1.35;
    vertical-align:top;
}

.marketSalesTable tr:last-child td{
    border-bottom:0;
}

.marketSalesTable td strong{
    display:block;
    color:#173f50;
    font-size:12px;
}

.marketSalesTable td small{
    display:block;
    margin-top:3px;
    color:#7a8d95;
    font-size:9px;
}

.marketCalculator{
    display:grid;
    grid-template-columns:minmax(0,1.1fr) minmax(280px,.9fr);
    gap:18px;
    margin-top:20px;
}

.marketCalculatorInputs{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
    padding:19px;
    border:1px solid #dce7eb;
    border-radius:18px;
    background:#fff;
}

.marketCalculatorInputs label{
    display:grid;
    gap:6px;
}

.marketCalculatorInputs label > span{
    color:#627985;
    font-size:10px;
    font-weight:900;
    letter-spacing:.04em;
    text-transform:uppercase;
}

.marketCalculator input,
.marketCalculator select{
    width:100%;
    min-height:44px;
    padding:9px 11px;
    border:1px solid #cedcdf;
    border-radius:10px;
    background:#fbfdfd;
    color:#173f50;
    font:inherit;
    font-size:13px;
    font-weight:800;
}

.marketInputSuffix{
    position:relative;
}

.marketInputSuffix input{
    padding-right:34px;
}

.marketInputSuffix em{
    position:absolute;
    top:50%;
    right:12px;
    transform:translateY(-50%);
    color:#73858d;
    font-size:11px;
    font-style:normal;
    font-weight:900;
}

.marketCalculatorResults{
    padding:21px;
    border-radius:18px;
    background:#123e50;
    color:#fff;
}

.marketCalculatorTotal{
    padding-bottom:17px;
    border-bottom:1px solid rgba(255,255,255,.17);
}

.marketCalculatorTotal > span{
    display:block;
    color:rgba(255,255,255,.72);
    font-size:10px;
    font-weight:900;
    letter-spacing:.05em;
    text-transform:uppercase;
}

.marketCalculatorTotal > strong{
    display:block;
    margin-top:8px;
    font-size:34px;
    line-height:1;
}

.marketCalculatorTotal > small{
    display:block;
    margin-top:8px;
    color:rgba(255,255,255,.65);
    font-size:9px;
    line-height:1.4;
}

.marketCalculatorResults dl{
    display:grid;
    gap:0;
    margin:12px 0 0;
}

.marketCalculatorResults dl > div{
    display:flex;
    justify-content:space-between;
    gap:15px;
    padding:8px 0;
    border-bottom:1px solid rgba(255,255,255,.1);
}

.marketCalculatorResults dl > div:last-child{
    border-bottom:0;
}

.marketCalculatorResults dt,
.marketCalculatorResults dd{
    margin:0;
    font-size:10px;
}

.marketCalculatorResults dt{
    color:rgba(255,255,255,.7);
    font-weight:700;
}

.marketCalculatorResults dd{
    color:#fff;
    font-weight:900;
}

.marketCalculatorNote{
    margin:12px 0 0;
    color:#778991;
    font-size:9px;
    line-height:1.55;
}

@media (max-width:900px){
    .marketHeadlineGrid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .marketCalculator{
        grid-template-columns:1fr;
    }
}

@media (max-width:620px){
    .marketHeadlineGrid,
    .marketMetricGrid,
    .marketCalculatorInputs{
        grid-template-columns:1fr;
    }

    .marketBarChart{
        gap:4px;
        padding-right:8px;
        padding-left:8px;
    }

    .marketBarMonth{
        grid-template-rows:20px 120px 22px;
    }

    .marketBarTrack{
        height:120px;
    }

    .marketBarLabel{
        font-size:8px;
    }
}


/*
 * BEACHESMLS MARKET REPORT NOTICE
 * Keep the official artwork readable but visually subordinate to the report.
 */
.soldReportNotice .soldReportLogo{
    display:block;
    width:auto !important;
    max-width:145px !important;
    max-height:52px !important;
    height:auto !important;
    object-fit:contain;
    margin:0 0 10px;
}

.soldReportNotice{
    margin-top:16px;
}

.soldReportNotice p{
    max-width:820px;
}


.marketHeadlineLink{
    display:inline-flex;
    align-items:center;
    gap:5px;
    margin-top:11px;
    color:#0d5f96;
    font-size:9px;
    font-weight:900;
    line-height:1.3;
    text-decoration:none;
    text-transform:uppercase;
}

.marketHeadlineLink::after{
    content:"›";
    font-size:15px;
    line-height:1;
}

.marketHeadlineLink:hover,
.marketHeadlineLink:focus-visible{
    text-decoration:underline;
}

