/* YPages home redesign — stats band + real-data charts.
   Amber brand: --amber #F5B301 accent, charcoal ink, white surfaces. */
.hx {
    --amber: #4b47ee;
    --amber-d: #5E1180;
    --ink: #1F2430;
    --muted: #8A909B;
    --line: #ECECF3;
    --surface: #ffffff;
    --bg: #FBF7EF;
    font-family: inherit;
    color: var(--ink);
}

.hx-wrap { max-width: 1120px; margin: 0 auto; padding: 0 20px; }
.hx-section { margin: 46px auto; }
.hx-h2 { text-align: center; font-size: 26px; font-weight: 800; color: var(--ink); margin: 0 0 6px; }
.hx-sub { text-align: center; color: var(--muted); font-size: 15px; margin: 0 0 26px; }

/* ---- stats band ---- */
.hx-stats-band {
    background: linear-gradient(180deg, #FDFBFE 0%, #F4ECF9 100%);
    border: 1px solid #EBDCF5;
    border-radius: 20px;
    padding: 30px 26px;
}
.hx-stats-title { text-align: center; font-size: 20px; font-weight: 800; margin: 0 0 22px; }
.hx-stats-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px;
}
.hx-stat {
    display: flex; align-items: center; gap: 14px;
    background: var(--surface); border: 1px solid #EBDCF5; border-radius: 14px;
    padding: 18px 20px;
}
.hx-stat__icon {
    width: 46px; height: 46px; flex: 0 0 46px; border-radius: 12px;
    display: grid; place-items: center; font-size: 20px;
    background: #F1E6F7; color: var(--amber-d);
}
.hx-stat__num { font-size: 26px; font-weight: 800; color: var(--amber-d); line-height: 1.05; }
.hx-stat__label { font-size: 13px; color: var(--muted); margin-top: 2px; }

/* ---- chart cards ---- */
.hx-charts { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
.hx-card {
    background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
    padding: 18px 18px 14px; box-shadow: 0 6px 20px rgba(31,36,48,.05);
    min-width: 0;
}
.hx-card__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.hx-card__title { font-size: 14.5px; font-weight: 700; color: var(--ink); }
.hx-card__tag {
    font-size: 11px; color: var(--muted); background: #F5F5F9;
    border-radius: 999px; padding: 3px 10px; white-space: nowrap;
}
.hx-chart { width: 100%; }

/* bar chart marks */
.hx-bar { transition: opacity .15s; }
.hx-bar:hover { opacity: .85; }
.hx-bar-label { font-size: 9px; fill: var(--muted); }
.hx-bar-value { font-size: 10.5px; font-weight: 700; fill: var(--ink); }
.hx-axis { stroke: #EDEDF2; stroke-width: 1; }

/* donut */
.hx-donut-center-num { font-size: 20px; font-weight: 800; fill: var(--ink); }
.hx-donut-center-lbl { font-size: 10px; fill: var(--muted); }
.hx-legend { list-style: none; margin: 6px 0 0; padding: 0; }
.hx-legend li { display: flex; align-items: center; gap: 8px; font-size: 12.5px; padding: 3px 0; color: var(--ink); }
.hx-legend .dot { width: 10px; height: 10px; border-radius: 3px; flex: 0 0 10px; }
.hx-legend .pct { margin-left: auto; color: var(--muted); font-weight: 600; }

/* tooltip */
.hx-tip {
    position: fixed; z-index: 999; pointer-events: none; opacity: 0;
    background: #1F2430; color: #fff; font-size: 12px; padding: 6px 10px;
    border-radius: 8px; transform: translate(-50%, -130%); white-space: nowrap;
    transition: opacity .1s;
}
.hx-tip b { color: var(--amber); }

/* reveal animation */
.hx-reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
.hx-reveal.is-in { opacity: 1; transform: none; }

@media (max-width: 900px) {
    .hx-charts { grid-template-columns: 1fr; }
    .hx-stats-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
    .hx-stats-grid { grid-template-columns: 1fr; }
}

/* ===== v2 overrides: wider band, white bg, fill-the-card, responsive ===== */
.hx-wrap { max-width: none !important; margin: 0 !important; padding: 0 50px !important; }
.hx-stats-band {
    background: #ffffff !important;
    border: 1px solid #ECECF3 !important;
    box-shadow: 0 10px 34px rgba(31,36,48,.06);
}
.hx-stat { border-color: #ECECF3 !important; background: #fff !important; }

/* charts fill their cards, equal height */
.hx-charts { grid-template-columns: 1fr 1fr 1fr; gap: 18px; align-items: stretch; }
.hx-card { display: flex; flex-direction: column; min-height: 420px; }
#hxCatChart, #hxCityChart, #hxStateDonut { flex: 1 1 auto; min-height: 0; width: 100%; }
.hx-card svg { width: 100%; height: 100%; }
.hx-legend { flex: 0 0 auto; }

/* responsive */
@media (max-width: 1024px) {
    .hx-charts { grid-template-columns: 1fr 1fr; }
    .hx-card:nth-child(3) { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
    .hx-wrap { padding: 0 16px !important; }
    .hx-charts { grid-template-columns: 1fr; }
    .hx-card:nth-child(3) { grid-column: auto; }
    .hx-card { min-height: 340px; }
    .hx-stats-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 460px) {
    .hx-stats-grid { grid-template-columns: 1fr !important; }
}


/* ===== v3 stat cards + colorful charts ===== */
/* band = light hero header, no heavy border */
.hx-stats-band { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 8px 0 0 !important; }
.hx-band-head { background: linear-gradient(180deg,#FBF7FF 0%, #eef0ff 100%); border:1px solid #ECE3F6;
    border-radius: 20px; padding: 26px 30px; margin-bottom: 20px; }
.hx-stats-title { text-align: left !important; font-size: 24px; font-weight: 800; margin: 0 0 6px !important; color: #241a2e; }
.hx-stats-sub { color: #6b6577; font-size: 15px; }

/* stat cards row (5 across) */
.hx-stats-grid { grid-template-columns: repeat(5, 1fr) !important; gap: 14px !important; margin-bottom: 22px !important; }
.hx-stat {
    display: block !important; position: relative; align-items: initial !important;
    background: #fff !important; border: 1px solid #ECECF3 !important; border-radius: 16px;
    padding: 18px 18px 16px !important; box-shadow: 0 8px 24px rgba(31,36,48,.06);
    transition: transform .3s ease, box-shadow .3s ease; overflow: hidden; min-width: 0;
}
.hx-stat:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(31,36,48,.12); }
.hx-stat__icon {
    width: 46px !important; height: 46px !important; flex: none !important; border-radius: 50% !important;
    display: grid; place-items: center; font-size: 20px; margin-bottom: 14px;
    color: #fff !important; background: var(--c, #7C3AED) !important;
    box-shadow: 0 8px 18px color-mix(in srgb, var(--c, #7C3AED) 40%, transparent);
}
.hx-stat__num { font-size: 27px !important; font-weight: 800; color: var(--c, #7C3AED) !important; line-height: 1.05; }
.hx-stat__label { font-size: 13.5px !important; color: #8A909B; margin-top: 3px !important; }
.hx-stat__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.hx-stat__pill { order: 1; }
.hx-stat__pill {
    font-size: 11.5px; font-weight: 700; white-space: nowrap;
    color: var(--c, #7C3AED); background: color-mix(in srgb, var(--c, #7C3AED) 12%, #fff);
    border-radius: 999px; padding: 4px 10px;
}
.hx-spark { display: block; width: calc(100% + 36px); height: 56px; flex: 1 1 100%; order: 2; margin: 14px -18px -16px; }

/* chart cards: colorful bar/wave gridlines */
.hx-grid { stroke: #EEF0F4; stroke-width: 1; }
.hx-axis-lbl { font-size: 9.5px; fill: #A9AEB9; }
.hx-bar-label { font-size: 10px; fill: #6b7280; font-weight: 600; }
.hx-bar-value { font-size: 11px; font-weight: 800; fill: #2b2f3a; }
.hx-bar { transition: opacity .15s; }
.hx-bar:hover { opacity: .85; }

/* donut card: chart left, legend right */
.hx-card--donut { display: flex; flex-direction: column; }
.hx-card--donut .hx-donut-wrap { flex: 1 1 auto; display: flex; align-items: center; gap: 10px; min-height: 0; }
.hx-card--donut #hxStateDonut { flex: 1 1 58%; min-width: 0; height: 100%; }
.hx-card--donut .hx-legend { flex: 1 1 42%; margin: 0; display: flex; flex-direction: column; justify-content: center; gap: 12px; }
.hx-legend li { display: flex; align-items: center; gap: 9px; font-size: 13px; padding: 0; color: #2b2f3a; font-weight: 600; }
.hx-legend .dot { width: 11px; height: 11px; border-radius: 50%; flex: 0 0 11px; }
.hx-legend .nm { flex: 1 1 auto; }
.hx-legend .pct { margin-left: auto; text-align: right; font-weight: 800; color: #2b2f3a; display: flex; flex-direction: column; line-height: 1.15; }
.hx-legend .pct small { font-weight: 600; color: #9aa0ab; font-size: 11px; }
.hx-donut-center-num { font-size: 26px; font-weight: 800; fill: #241a2e; }
.hx-donut-center-lbl { font-size: 11px; fill: #9aa0ab; }
.hx-tip b { color: #C77DFF; }

@media (max-width: 1180px) { .hx-stats-grid { gap: 11px !important; } .hx-stat { padding: 15px 12px 14px !important; } .hx-stat__num { font-size: 21px !important; } .hx-spark { height: 48px; margin: 12px -12px -14px; width: calc(100% + 24px); } }
@media (max-width: 820px)  { .hx-card--donut .hx-donut-wrap { flex-direction: column; } .hx-card--donut #hxStateDonut { flex: none; width: 100%; height: 220px; } }
@media (max-width: 620px)  { .hx-stats-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 14px !important; } .hx-stat__num { font-size: 24px !important; } .hx-spark { display: block; height: 50px; } }


/* compact vertical stat cards: icon + heading in a row, number below, mini animated graph */
.hx-stats-grid { gap: 12px !important; }
.hx-stat { padding: 13px 14px 11px !important; border-radius: 14px !important; box-shadow: 0 6px 18px rgba(31,36,48,.06) !important; }
.hx-stat__top { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; }
.hx-stat__icon { width: 34px !important; height: 34px !important; font-size: 15px !important; margin-bottom: 0 !important; }
.hx-stat__label { font-size: 12.5px !important; color: #241a2e !important; font-weight: 700 !important; margin: 0 !important; line-height: 1.15 !important; }
.hx-stat__num { font-size: 22px !important; margin-top: 0 !important; }
.hx-stat__foot { justify-content: flex-start !important; margin-top: 8px !important; }
.hx-stat__pill { font-size: 10.5px !important; padding: 3px 9px !important; }
.hx-spark { height: 40px !important; width: calc(100% + 28px) !important; margin: 10px -14px -11px !important; }
@media (max-width: 1180px){ .hx-stat__num { font-size: 19px !important; } .hx-spark { height: 36px !important; } }
@media (max-width: 620px){ .hx-stats-grid { grid-template-columns: repeat(2, 1fr) !important; } }


/* per-section distinct card designs ================================= */

/* Real Estate — full-image overlay cards */
.feat--realestate .feat-card{height:290px;}
.feat--realestate .feat-head{position:absolute;inset:0;height:100%;}
.feat--realestate .feat-head:before,.feat--realestate .feat-head:after{display:none;}
.feat--realestate .feat-avatar{display:none;}
.feat--realestate .feat-water{top:auto;bottom:16px;right:16px;font-size:30px;opacity:.45;z-index:2;}
.feat--realestate .feat-imgshade{background:linear-gradient(to top,rgba(12,6,20,.82),rgba(12,6,20,.2) 58%,transparent) !important;}
.feat--realestate .feat-body{position:absolute;left:0;right:0;bottom:0;padding:20px 18px 18px;z-index:3;
    background:linear-gradient(to top,rgba(12,6,20,.9),rgba(12,6,20,.35) 64%,transparent);}
.feat--realestate .feat-name{color:#fff !important;}
.feat--realestate .feat-city{color:#e8e0f5 !important;}
.feat--realestate .feat-tag{background:rgba(255,255,255,.18);color:#fff;}
.feat--realestate .feat-cta{color:#FFCB4D;max-height:24px;opacity:1;transform:none;}

/* Roommates — horizontal split, 2 per row */
.feat--roommates .feat-grid{grid-template-columns:repeat(2,1fr);}
.feat--roommates .feat-card{display:flex;flex-direction:row;height:154px;}
.feat--roommates .feat-head{width:44%;height:100%;flex:none;}
.feat--roommates .feat-head:before,.feat--roommates .feat-head:after{display:none;}
.feat--roommates .feat-avatar{width:46px;height:46px;left:12px;bottom:12px;}
.feat--roommates .feat-body{flex:1;display:flex;flex-direction:column;justify-content:center;padding:16px 20px;}
.feat--roommates .feat-cta{opacity:1;transform:none;max-height:24px;margin-top:8px;}

/* Vehicles — dark showroom card */
.feat--vehicles .feat-card{background:#181528 !important;border-color:#2a2440 !important;}
.feat--vehicles .feat-head{height:128px;}
.feat--vehicles .feat-avatar{display:none;}
.feat--vehicles .feat-body{background:#181528;}
.feat--vehicles .feat-name{color:#fff !important;}
.feat--vehicles .feat-city{color:#a89fc4 !important;}
.feat--vehicles .feat-tag{background:rgba(245,158,11,.16);color:#F59E0B;}
.feat--vehicles .feat-cta{color:#F59E0B;}
.feat--vehicles .feat-card:hover{box-shadow:0 26px 50px rgba(0,0,0,.4);}

/* Jobs — clean text card, no photo, icon tile + left accent */
.feat--jobs .feat-head{display:none;}
.feat--jobs .feat-card{border-left:4px solid #0891B2;}
.feat--jobs .feat-body{padding:22px 20px;position:relative;min-height:150px;}
.feat--jobs .feat-body:after{content:"\f0b1";font-family:"FontAwesome";position:absolute;top:20px;right:18px;
    width:46px;height:46px;border-radius:13px;background:#E0F5FA;color:#0891B2;display:grid;place-items:center;font-size:19px;}
.feat--jobs .feat-name{padding-right:56px;font-size:16px;}
.feat--jobs .feat-tag{background:#E0F5FA;color:#0891B2;}
.feat--jobs .feat-cta{opacity:1;transform:none;max-height:24px;margin-top:12px;color:#0891B2;}

/* Pets — playful pastel, centered, rounded */
.feat--pets .feat-card{border-radius:26px;text-align:center;background:#FFF4FA !important;border-color:#F8D3E6 !important;}
.feat--pets .feat-head{height:150px;border-radius:22px;margin:10px 10px 0;overflow:hidden;}
.feat--pets .feat-head:before,.feat--pets .feat-head:after,.feat--pets .feat-water{display:none;}
.feat--pets .feat-avatar{display:none;}
.feat--pets .feat-body{padding:14px 18px 18px;display:flex;flex-direction:column;align-items:center;}
.feat--pets .feat-name{font-size:17px;}
.feat--pets .feat-tag{margin:0 auto 8px;background:#FCE7F3;color:#DB2777;}
.feat--pets .feat-cta{color:#EC4899;opacity:1;transform:none;max-height:24px;}

/* Deals — coupon / ticket style */
.feat--deals .feat-card{border:2px dashed #22A559;background:#F5FBF7 !important;box-shadow:0 8px 20px rgba(22,163,74,.10);}
.feat--deals .feat-card:hover{box-shadow:0 20px 40px rgba(22,163,74,.2);border-color:#16A34A;}
.feat--deals .feat-head{height:120px;margin:9px 9px 0;border-radius:12px;overflow:hidden;}
.feat--deals .feat-head:before,.feat--deals .feat-head:after,.feat--deals .feat-water{display:none;}
.feat--deals .feat-avatar{display:none;}
.feat--deals .feat-badge{background:#16A34A;border-color:transparent;}
.feat--deals .feat-body{padding:14px 18px 16px;}
.feat--deals .feat-tag{background:#DCFCE7;color:#15803D;}
.feat--deals .feat-cta{color:#16A34A;opacity:1;transform:none;max-height:24px;}

/* responsive for variants */
@media(max-width:1000px){.feat--realestate .feat-grid{grid-template-columns:repeat(3,1fr);}}
@media(max-width:720px){
    .feat--realestate .feat-grid,.feat--roommates .feat-grid{grid-template-columns:repeat(2,1fr);}
    .feat--roommates .feat-card{flex-direction:column;height:auto;}
    .feat--roommates .feat-head{width:100%;height:120px;}
}
@media(max-width:430px){.feat--realestate .feat-grid,.feat--roommates .feat-grid{grid-template-columns:1fr;}}


/* card variant refinements v2 ===================================== */

/* Vehicles: clean amber card + centered car icon (CarMax images don't hotlink) */
.feat--vehicles .feat-card{background:#fff !important;border-color:#F3E7D0 !important;}
.feat--vehicles .feat-body{background:#fff !important;}
.feat--vehicles .feat-name{color:#241a2e !important;}
.feat--vehicles .feat-city{color:#8a8f99 !important;}
.feat--vehicles .feat-head,.feat--vehicles .feat-head--img{background:linear-gradient(135deg,#F59E0B,#EA7C0A) !important;height:122px !important;}
.feat--vehicles .feat-imgshade{display:none !important;}
.feat--vehicles .feat-water{top:50% !important;left:50% !important;right:auto !important;bottom:auto !important;transform:translate(-50%,-50%);font-size:46px;opacity:.92;color:#fff;}
.feat--vehicles .feat-card:hover .feat-water{transform:translate(-50%,-50%) scale(1.12) rotate(-6deg);}
.feat--vehicles .feat-tag{background:#FEF3E2;color:#C2740A;}
.feat--vehicles .feat-cta{color:#C2740A;}
.feat--vehicles .feat-card:hover{box-shadow:0 26px 50px rgba(245,158,11,.26);}

/* Roommates: fill the panel with ONE big centered icon, drop the scattered bits */
.feat--roommates .feat-water{top:50% !important;left:50% !important;right:auto !important;bottom:auto !important;transform:translate(-50%,-50%);font-size:46px;opacity:.9;color:#fff;}
.feat--roommates .feat-avatar{display:none !important;}
.feat--roommates .feat-card:hover .feat-water{transform:translate(-50%,-50%) scale(1.12);}

/* Deals: green gradient + tag icon instead of a broken image box */
.feat--deals .feat-head,.feat--deals .feat-head--img{background:linear-gradient(135deg,#16A34A,#0E7A38) !important;}
.feat--deals .feat-imgshade{display:none !important;}
.feat--deals .feat-water{display:block !important;top:50% !important;left:50% !important;right:auto !important;bottom:auto !important;transform:translate(-50%,-50%);font-size:40px;opacity:.94;color:#fff;}
.feat--deals .feat-card:hover .feat-water{transform:translate(-50%,-50%) scale(1.12) rotate(-6deg);}

/* Pets: clean centered paw icon when a photo is missing */
.feat--pets .feat-head:not(.feat-head--img){display:flex;align-items:center;justify-content:center;}
.feat--pets .feat-head:not(.feat-head--img) .feat-water{display:block !important;position:static;transform:none;font-size:42px;opacity:.92;color:#fff;}


/* mockup dashboard polish ========================================= */
/* top 4 category cards */
.catcards{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin:6px 0 0;padding:0 50px;}
.catcard{display:flex;align-items:center;gap:16px;background:#fff;border:1px solid #ECECF3;border-radius:16px;padding:19px 22px;
    text-decoration:none !important;box-shadow:0 8px 22px rgba(31,36,48,.06);transition:transform .3s ease,box-shadow .3s ease;}
.catcard:hover{transform:translateY(-4px);box-shadow:0 18px 38px rgba(75,71,238,.14);}
.catcard__ic{width:56px;height:56px;flex:none;border-radius:15px;display:grid;place-items:center;font-size:22px;background:#eef0ff;color:#4b47ee;}
.catcard__tx{display:flex;flex-direction:column;min-width:0;}
.catcard__name{font-size:15.5px;font-weight:800;color:#241a2e;line-height:1.25;}
.catcard__sub{font-size:13px;color:#8a8f99;margin-top:3px;}
.catcard--more .catcard__ic{background:#FDF0F6;color:#EC4899;}
@media(max-width:1000px){.catcards{grid-template-columns:repeat(2,1fr);padding:0 18px;}}
@media(max-width:560px){.catcards{grid-template-columns:1fr;}}

/* stat cards match mockup */
.hx-stat{padding:16px 18px 14px !important;position:relative;}
.hx-stat__top{gap:12px !important;margin-bottom:12px !important;}
.hx-stat__icon{width:44px !important;height:44px !important;border-radius:13px !important;font-size:18px !important;}
.hx-stat__label{font-size:14px !important;color:#4a4757 !important;font-weight:700 !important;}
.hx-stat__num{font-size:27px !important;letter-spacing:-.5px;margin-top:0 !important;}
.hx-stat__dots{position:absolute;top:15px;right:16px;color:#c7c9d1;font-size:16px;line-height:1;font-weight:800;}
.hx-stat__foot{margin-top:8px !important;justify-content:space-between !important;}
.hx-stat__trend{display:inline-flex;align-items:center;gap:4px;font-size:12.5px;font-weight:800;color:#16A34A;white-space:nowrap;}
.hx-stat__trend i{font-size:10px;}
.hx-spark{height:54px !important;margin:8px -18px -14px !important;width:calc(100% + 36px) !important;}
@media(max-width:1180px){.hx-stat__num{font-size:22px !important;}.hx-spark{height:46px !important;}}


/* graphs equal heights + centered donut + professional spacing ===== */
.hx-charts{align-items:stretch !important;}
.hx-card{min-height:0 !important;padding:18px 18px 16px !important;}
.hx-card__head{margin-bottom:14px !important;}
#hxCatChart, #hxCityChart{height:320px !important;flex:0 0 320px !important;min-height:0 !important;}
.hx-card--donut .hx-donut-wrap{height:320px !important;flex:0 0 320px !important;align-items:center !important;}
.hx-card--donut #hxStateDonut{height:100% !important;flex:1 1 56% !important;}
.hx-card--donut .hx-legend{flex:1 1 44% !important;}


/* clickable dashboard links ===================================== */
a.hx-stat{text-decoration:none !important;color:inherit;cursor:pointer;display:block;}
.hx-tag-link{text-decoration:none !important;cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:background .25s ease,color .25s ease;}
.hx-tag-link i{font-size:9px;transition:transform .25s ease;}
.hx-tag-link:hover{background:#4b47ee !important;color:#fff !important;}
.hx-tag-link:hover i{transform:translateX(3px);}


/* Roommates v2 profile cards (unique, professional) =============== */
.feat--roommates .feat-grid{grid-template-columns:repeat(4,1fr) !important;}
.feat--roommates .feat-card{display:block !important;height:auto !important;text-align:center;background:#fff !important;border:1px solid #ECE7F5 !important;overflow:visible !important;}
.feat--roommates .feat-head{position:relative;width:100% !important;height:72px !important;border-radius:20px 20px 0 0 !important;background:linear-gradient(135deg,#7C3AED,#9B5DE5) !important;}
.feat--roommates .feat-head:before,.feat--roommates .feat-head:after{display:none !important;}
.feat--roommates .feat-badge{left:14px !important;top:12px !important;}
.feat--roommates .feat-water{display:none !important;}
.feat--roommates .feat-avatar{display:grid !important;position:absolute !important;left:50% !important;top:auto !important;bottom:-30px !important;transform:translateX(-50%) !important;width:64px !important;height:64px !important;border-radius:50% !important;border:4px solid #fff !important;background:linear-gradient(135deg,#7C3AED,#9B5DE5) !important;font-size:24px !important;color:#fff !important;box-shadow:0 10px 22px rgba(124,58,237,.32) !important;z-index:3;}
.feat--roommates .feat-card:hover .feat-avatar{transform:translateX(-50%) scale(1.07) !important;}
.feat--roommates .feat-body{padding:44px 18px 20px !important;display:flex;flex-direction:column;align-items:center;gap:2px;}
.feat--roommates .feat-name{font-size:16.5px;}
.feat--roommates .feat-tag{margin:6px auto 8px !important;background:#eef0ff !important;color:#7C3AED !important;}
.feat--roommates .feat-city{color:#8a8f99 !important;justify-content:center;}
.feat--roommates .feat-cta{opacity:1 !important;transform:none !important;max-height:none !important;margin-top:14px;display:inline-flex;background:linear-gradient(135deg,#7C3AED,#9B5DE5);color:#fff !important;padding:9px 22px;border-radius:999px;font-size:13px;box-shadow:0 8px 18px rgba(124,58,237,.28);transition:transform .3s ease,box-shadow .3s ease;}
.feat--roommates .feat-card:hover .feat-cta{transform:translateY(-2px);box-shadow:0 14px 28px rgba(124,58,237,.4);}
@media(max-width:1000px){.feat--roommates .feat-grid{grid-template-columns:repeat(2,1fr) !important;}}
@media(max-width:520px){.feat--roommates .feat-grid{grid-template-columns:1fr !important;}}


/* roommate cards enriched ========================================= */
.feat--roommates .rm-price{font-size:24px;font-weight:800;color:#7C3AED;line-height:1;margin-bottom:6px;}
.feat--roommates .rm-price small{font-size:12px;color:#8a8f99;font-weight:600;}
.feat--roommates .rm-meta{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;margin:2px 0 6px;}
.feat--roommates .rm-chip{font-size:11px;font-weight:600;color:#5a4a68;background:#F5F2FA;border:1px solid #ECE7F5;border-radius:999px;padding:4px 10px;display:inline-flex;align-items:center;gap:5px;}
.feat--roommates .rm-chip i{color:#9a7bb0;font-size:10px;}
.feat--roommates .feat-name{font-size:13.5px !important;color:#8a8f99 !important;font-weight:600 !important;margin:-2px 0 2px;}


/* HP5 fixes: ratings, roommate photos, car images, deal %, jobs grid ==== */
.feat-rating{display:flex;align-items:center;gap:2px;margin:-4px 0 10px;}
.feat-rating i{color:#F5B301;font-size:12px;}
.feat-rating i.fa-star-o{color:#E3DCEC;}
.feat-rating b{margin-left:6px;color:#241a2e;font-size:13px;}
.feat-avatar--photo{overflow:hidden !important;padding:0 !important;background:#fff !important;}
.feat-avatar--photo img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block;}
.feat--roommates .feat-avatar--photo{display:block !important;}
.deal-pct{position:absolute;right:12px;top:12px;z-index:3;background:#fff;color:#16A34A;font-size:14px;font-weight:800;padding:6px 12px;border-radius:999px;box-shadow:0 6px 14px rgba(0,0,0,.15);}
.feat--vehicles .feat-head{height:150px !important;}
.feat--vehicles .feat-water{display:none !important;}
.feat--vehicles .feat-imgshade{display:block !important;background:linear-gradient(180deg,rgba(0,0,0,.06),rgba(0,0,0,.42)) !important;}
.jobs-layout{display:grid;grid-template-columns:2fr 1fr;gap:24px;}
.jobs-cities{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;align-content:start;}
.jobs-city{display:flex;align-items:center;justify-content:space-between;gap:10px;background:#fff;border:1px solid #E6F4F8;border-radius:12px;padding:12px 16px;text-decoration:none !important;transition:all .25s ease;}
.jobs-city:hover{border-color:#0891B2;box-shadow:0 8px 18px rgba(8,145,178,.14);transform:translateY(-2px);}
.jobs-city__n{font-size:14px;font-weight:700;color:#241a2e;}
.jobs-city__n i{color:#0891B2;margin-right:6px;}
.jobs-city__c{font-size:12px;font-weight:800;color:#0891B2;background:#E0F5FA;border-radius:999px;padding:3px 10px;white-space:nowrap;}
.jobs-feat{display:flex;flex-direction:column;background:linear-gradient(160deg,#0891B2,#0e6d84);border-radius:18px;padding:26px 24px;text-decoration:none !important;color:#fff !important;box-shadow:0 16px 34px rgba(8,145,178,.28);transition:transform .3s ease,box-shadow .3s ease;}
.jobs-feat:hover{transform:translateY(-4px);box-shadow:0 24px 46px rgba(8,145,178,.4);}
.jobs-feat__ic{width:52px;height:52px;border-radius:14px;background:rgba(255,255,255,.16);display:grid;place-items:center;font-size:22px;margin-bottom:16px;}
.jobs-feat__t{font-size:19px;font-weight:800;line-height:1.25;margin-bottom:6px;}
.jobs-feat__cat{font-size:13px;opacity:.85;margin-bottom:10px;}
.jobs-feat__loc{font-size:13px;opacity:.9;margin-bottom:8px;}
.jobs-feat__sal{font-size:15px;font-weight:800;margin-bottom:18px;}
.jobs-feat__btn{margin-top:auto;display:inline-flex;align-items:center;gap:8px;background:#fff;color:#0891B2 !important;font-weight:800;font-size:13px;padding:10px 20px;border-radius:999px;width:max-content;}
@media(max-width:900px){.jobs-layout{grid-template-columns:1fr;}.jobs-cities{grid-template-columns:1fr;}}


/* realestate specs overlay ======================================= */
.feat--realestate .re-price{color:#fff !important;font-size:21px;font-weight:800;line-height:1;margin-bottom:6px;text-shadow:0 2px 8px rgba(0,0,0,.45);}
.feat--realestate .re-specs{display:flex;flex-wrap:wrap;gap:14px;margin:2px 0 8px;}
.feat--realestate .re-specs span{color:#f0e8fa;font-size:12.5px;font-weight:600;display:inline-flex;align-items:center;gap:5px;}
.feat--realestate .re-specs i{color:#FFCB4D;font-size:11px;}