
/* OneDealer Finance Flex · Luxury Automotive Edition 0.7.6.
   Precision luxury: restrained navy, flat pearl-white surfaces, cinematic owned hero,
   no neon/no outer glow; style-only overrides above established FF functionality. */
:root{--ff-ink:#122d4a;--ff-navy:#0b253f;--ff-blue:#106bc3;--ff-ice:#f5f7f9;--ff-stroke:#e1e6eb;--ff-muted:#69809a}
body{background:#f5f7f9!important;color:var(--ff-ink)}
.utility{display:none!important}
.header{height:62px;padding:0 clamp(24px,3.4vw,62px);border-bottom:1px solid #e4e8ec;background:#fff}
.header .ff-back-link{display:none}
.header img{width:157px}
.header nav{gap:26px;align-items:center}
.header nav a{font-size:12px;font-weight:650;color:#3f5770}
.header nav a.active{color:var(--ff-blue);border-bottom:2px solid #1674cf;padding:23px 0 21px}
.header .environment{font-size:10px;padding:7px 10px;color:#346c5b;background:#edf6f1}
.shell{max-width:none;padding:0}

/* Full-width cinematic photographic hero — brand artwork already in repository. */
.ff-hero{
 position:relative;isolation:isolate;overflow:hidden;width:100%;min-height:268px;
 padding:30px clamp(28px,4.1vw,74px) 24px;
 display:flex;gap:35px;justify-content:space-between;align-items:flex-start;
 background:
   linear-gradient(90deg,rgba(239,245,250,.98) 0%,rgba(239,245,250,.96) 24%,rgba(239,245,250,.72) 37%,rgba(231,239,246,.09) 70%,rgba(10,27,43,.18) 100%),
   url("/assets/hero-three-brands.webp") right 49% / cover no-repeat;
 border:0;border-radius:0!important;box-shadow:none!important
}
.ff-hero::before{
 content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
 background:linear-gradient(0deg,rgba(8,32,57,.13) 0%,transparent 35%)
}
.ff-hero-copy{position:relative;z-index:1;flex:0 1 630px;max-width:620px}
.ff-hero .eyebrow{color:#0c3f70;letter-spacing:.24em;font-size:10px}
.ff-hero h1{margin:13px 0 12px;font:750 clamp(26px,2.55vw,39px)/1.11 Montserrat,Inter,sans-serif;letter-spacing:-.048em;color:#092d4d}
.ff-hero h1 em{color:#0e72cf}
.ff-hero p{max-width:530px;margin:0;color:#365573;font-size:12px;line-height:1.65}
.ff-hero-benefits{display:flex;flex-wrap:wrap;gap:20px;margin-top:22px;color:#1c4568;font-size:10px;font-weight:600}
.ff-hero-benefits span{display:inline-flex;gap:9px;align-items:center}
.ff-hero-benefits span::before{content:"";display:inline-block;width:6px;height:6px;border:1px solid #3578b1;border-radius:50%}
.ff-hero-side{
 position:relative;z-index:1;flex:0 0 255px;max-width:255px;min-height:164px;
 background:rgba(13,28,43,.79);color:#fff;
 border:1px solid rgba(220,234,246,.3);border-radius:13px;
 box-shadow:0 3px 11px rgba(3,16,29,.12);padding:16px 18px;
 -webkit-backdrop-filter:blur(11px);backdrop-filter:blur(11px)
}
.ff-hero-side strong{display:flex;gap:9px;align-items:center;font:600 18px Montserrat,Inter,sans-serif}
.ff-hero-smart-tag{font:700 9px Inter,sans-serif;border:1px solid #478fc7;padding:3px 6px;border-radius:20px;color:#9fd7ff}
.ff-hero-side>span{display:block;color:#e3edf7;font-size:11px;line-height:1.55;margin:9px 0}
.ff-hero-side small{display:block;font-size:9px;color:#9eb4c9;line-height:1.4}
.ff-hero-side button{border:0;background:none;color:#c4eaff;font:650 11px Inter,sans-serif;padding:10px 0 0;cursor:pointer}
.ff-hero-side button:hover{text-decoration:underline}
.ff-mobile-budget{display:none}
.shell>.tabs{
 display:flex;width:fit-content;max-width:calc(100% - 56px);margin:12px clamp(28px,3.6vw,60px) 10px;
 padding:3px;gap:0;border:1px solid #e1e7ed;border-radius:9px;box-shadow:none;background:#fff
}
.shell>.tabs button{font-size:11px;padding:8px 14px;color:#6d8093;border-radius:7px;font-weight:650}
.shell>.tabs button.selected{background:#0e3558;color:#fff;box-shadow:none}

/* Core split: generous space for real stock results, compact interactive rail. */
#panel-sim{max-width:1740px;margin:0 auto 28px;padding:0 clamp(24px,3.4vw,62px)}
#panel-sim .ff-intro-note{display:none!important}
#panel-sim .ff-explore-layout{display:grid;grid-template-columns:minmax(305px,31fr) minmax(0,69fr);gap:20px;align-items:start}
#panel-sim .card{background:#fff;border:1px solid #e1e7ed;box-shadow:0 3px 15px rgba(18,49,78,.045);border-radius:14px}
#panel-sim .ff-builder{padding:20px 18px 18px}
#panel-sim .ff-builder>.section-head{margin-bottom:17px}
#panel-sim .ff-builder>.section-head .eyebrow{font-size:10px;color:#3c739e;letter-spacing:.15em}
#panel-sim .ff-builder>.section-head h2{font:700 18px/1.3 Montserrat;margin:4px 0 5px;letter-spacing:-.02em;color:#112d48}
#panel-sim .ff-panel-desc{color:#667b8f;font-size:11px;margin:0}
#panel-sim .ff-builder .ff-pills{display:flex;flex-wrap:nowrap;gap:0;background:#f0f3f6;border:1px solid #e3e8ed;border-radius:10px;margin-bottom:16px;padding:3px}
#panel-sim .ff-builder .ff-pills>button{flex:1;min-width:0;padding:9px 8px;font-size:11px;font-weight:650;background:transparent;border:0;border-radius:8px;color:#375671;white-space:nowrap}
#panel-sim .ff-builder .ff-pills>button.on{color:#fff;background:#163e62;box-shadow:0 2px 5px rgba(10,38,63,.13)}
#panel-sim .ff-big-field{
 margin-bottom:13px;padding:16px 14px 13px;background:linear-gradient(155deg,#f7fafc,#f0f5f9);
 border:1px solid #e1eaf1;border-radius:11px;box-shadow:none
}
#panel-sim .ff-big-field>label{font-size:11px;color:#36516b}
#panel-sim .ff-slider-value{margin:6px 0 3px}
#panel-sim .ff-slider-value strong{font:750 29px Montserrat;color:#103e65;letter-spacing:-.045em}
#panel-sim .ff-slider-value small{font-size:12px;color:#71879b}
#panel-sim input[type=range]{
 width:100%;height:5px;margin:11px 0;background:linear-gradient(90deg,#1977c8,#c5d5e3);
 box-shadow:none;border-radius:9px;accent-color:#1977c8
}
#panel-sim input[type=range]::-webkit-slider-thumb{width:17px;height:17px;background:#fff;border:4px solid #1477ce;box-shadow:0 1px 3px rgba(18,53,90,.18)}
#panel-sim input[type=range]::-moz-range-thumb{width:11px;height:11px;background:#fff;border:4px solid #1477ce;box-shadow:none}
#panel-sim .ff-slider-ends{font-size:10px;color:#71869a}
#panel-sim .ff-big-field .field{margin-top:8px!important;margin-bottom:0}
#panel-sim .ff-big-field .field input{background:rgba(255,255,255,.76);padding:9px 11px;min-height:38px;border-color:#dce5ee;font-size:12px}
#panel-sim .ff-slider-box{padding-bottom:12px;margin-bottom:13px;border-bottom:1px solid #e7ecef}
#panel-sim .ff-range-head{font-size:11px;color:#284b69}
#panel-sim .ff-range-head b{font-size:14px;color:#176bb8}
#panel-sim .ff-slider-box>small{font-size:9px;color:#778b9c}
#panel-sim .ff-advanced{
 margin:8px 0;border:1px solid #e3e9ef;border-radius:10px;background:#f8fafb;box-shadow:none
}
#panel-sim .ff-advanced>summary{display:flex;align-items:center;gap:6px;padding:10px 11px;color:#2a4865;font-size:11px;font-weight:650;cursor:pointer;list-style:none}
#panel-sim .ff-advanced>summary::-webkit-details-marker{display:none}
#panel-sim .ff-advanced>summary small{font-size:10px;color:#8798a8;font-weight:450}
#panel-sim .ff-advanced>summary:after{content:"⌄";margin-left:auto;font-size:15px}
#panel-sim .ff-advanced[open]>summary:after{content:"⌃"}
#panel-sim .ff-advanced .ff-car-choice{margin:0 8px 9px;padding:9px;background:white}
#panel-sim .ff-advanced .ff-pills{flex-wrap:wrap}
#panel-sim .ff-advanced .ff-pills>label{font-size:10px;padding:7px}
#panel-sim .ff-bank-details .field{padding:0 11px 10px}
#panel-sim .ff-toggle{margin:10px 0 12px;font-size:10.5px;color:#5d7386}
#panel-sim #calculate{padding:12px 14px;min-height:42px;border-radius:9px;background:#103a60;border-color:#103a60;font-size:11px;font-weight:700;box-shadow:none}
#panel-sim #calculate:hover{background:#19547f}
#panel-sim .ff-market-panel{display:grid;gap:12px;min-width:0;align-content:start}

/* Single-piece satin summary, like a luxury cockpit instrument panel. */
#panel-sim .ff-results{
 padding:16px 21px 16px;border:1px solid #203f5d;border-radius:13px;
 background:linear-gradient(112deg,#0a2034,#153550 67%,#183c59);
 color:#fff;box-shadow:0 4px 15px rgba(13,35,58,.11);position:static
}
#panel-sim .ff-results>.section-head{display:flex;align-items:center;gap:13px;margin-bottom:12px}
#panel-sim .ff-results>.section-head .eyebrow{display:none}
#panel-sim .ff-results>.section-head h2{font:650 13px Montserrat;color:#f4f8fd;margin:0}
#panel-sim .ff-result-hero{
 display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:stretch;gap:0;
 padding:0;margin:0;border:0;background:transparent;border-radius:0;box-shadow:none
}
#panel-sim .ff-result-hero .ff-metric{
 display:flex;flex-direction:column;gap:5px;padding:9px 14px 7px;min-width:0;position:relative
}
#panel-sim .ff-result-hero .ff-metric:first-child{padding-left:0}
#panel-sim .ff-result-hero .ff-metric:not(:first-child){border-left:1px solid rgba(234,244,255,.20)}
#panel-sim .ff-result-hero .ff-metric span{display:block;font-size:10px;line-height:1.3;color:#c2d1de}
#panel-sim .ff-result-hero .ff-metric strong{font:750 clamp(16px,1.65vw,24px)/1.16 Montserrat,Inter;color:#fff;letter-spacing:-.025em;overflow-wrap:anywhere}
#panel-sim .ff-result-hero .ff-metric-cap strong{color:#dfe8f0}
#panel-sim .ff-result-hero .ff-metric small{color:#a9bfce;font-size:9px;line-height:1.35}
#panel-sim .ff-secondary-actions{
 display:flex;flex-wrap:wrap;align-items:center;gap:8px 13px;
 background:transparent;padding:0 4px
}
#panel-sim .ff-secondary-actions .ff-finance-details{margin:0;border:0;flex:0 1 auto}
#panel-sim .ff-secondary-actions .ff-finance-details>summary{color:#266d9e;padding:8px 0;font-size:11px;font-weight:650}
#panel-sim .ff-secondary-actions .ff-finance-details[open]{flex:1 1 100%;background:#fff;border:1px solid #e3eaf0;border-radius:11px;padding:5px 13px}
#panel-sim .ff-secondary-actions .stats{margin:8px 0 12px}
#panel-sim .ff-secondary-actions .ff-hint{margin:0;flex:1 1 180px;padding:0;background:none;border:0;color:#78889a;line-height:1.4;font-size:10px}
#panel-sim .ff-secondary-actions .ff-actions{display:flex;gap:7px;margin:0;align-items:center}
#panel-sim .ff-secondary-actions .ff-actions button{min-height:33px;padding:8px 11px;font-size:10px;border-radius:8px}
#panel-sim .ff-secondary-actions .ff-actions .primary{color:#fff;background:#166fbc;border:1px solid #166fbc}
#panel-sim .ff-secondary-actions .ff-actions .secondary{background:#fff;color:#195985;border:1px solid #d0dce6}
#panel-sim .ff-secondary-actions .footnote{margin:0;flex:1 1 100%;color:#8a98a7;font-size:9px;line-height:1.35}

/* Curadoria resembles the sober premium vehicle grid in the approved reference. */
#panel-sim .ff-discover{margin:0;padding:17px 18px 16px;min-width:0;box-shadow:0 3px 15px rgba(18,49,78,.045)}
#panel-sim .ff-discover .section-head{display:grid;grid-template-columns:1fr auto;column-gap:10px;row-gap:3px;margin-bottom:15px;align-items:baseline}
#panel-sim .ff-discover .section-head .eyebrow{grid-column:1/-1;font-size:9px;letter-spacing:.18em;color:#7a8da1}
#panel-sim .ff-discover .section-head h2{grid-column:1;font:700 17px Montserrat;letter-spacing:-.025em;color:#112d48;margin:0}
#panel-sim .ff-discover .section-head .ff-match-count{grid-column:2;color:#507189;font-size:10px;font-weight:650;white-space:normal;margin:0;text-align:right}
#panel-sim .ff-discover .section-head p{grid-column:1/-1;font-size:10px;line-height:1.4;color:#74869a;max-width:750px;margin-top:4px}
#panel-sim .ff-discover-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
#panel-sim .ff-auto-card{
 display:flex;flex-direction:column;overflow:hidden;border-radius:11px;
 border:1px solid #e2e7eb;background:#fff;box-shadow:none;min-width:0;
 transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease
}
#panel-sim .ff-auto-card:hover{transform:translateY(-2px);border-color:#b9cfdf;box-shadow:0 7px 18px rgba(10,31,55,.08)}
#panel-sim .ff-auto-card>img,#panel-sim .ff-photo-empty{height:142px;width:100%;object-fit:cover}
#panel-sim .ff-photo-empty{background:linear-gradient(125deg,#dce5eb,#edf2f6);font-size:12px;color:#758899}
#panel-sim .ff-auto-info{padding:11px 12px 12px;display:flex;flex-direction:column;flex:1;min-width:0}
#panel-sim .ff-auto-info small{font-size:9px;letter-spacing:.11em;color:#718399}
#panel-sim .ff-auto-info h3{font:700 16px Montserrat;letter-spacing:-.025em;color:#142d48;margin:5px 0 3px}
#panel-sim .ff-auto-info p{font-size:10px;color:#6f8296;margin:0 0 8px;line-height:1.35}
#panel-sim .ff-price-line{display:flex;align-items:baseline;justify-content:space-between;gap:6px;flex-wrap:wrap;margin:7px 0}
#panel-sim .ff-price-line strong{font:750 15px Montserrat;color:#0c3152}
#panel-sim .ff-price-line span{font-size:10px;color:#758a9c}
#panel-sim .ff-match{font-size:9px;font-weight:650;padding:5px 8px;background:#edf6f0;color:#2e7551;width:max-content}
#panel-sim .ff-match.near{background:#faf3e7;color:#8c6538}
#panel-sim .ff-auto-actions{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:auto;padding-top:10px}
#panel-sim .ff-auto-actions button,#panel-sim .ff-auto-actions a{
 display:flex;align-items:center;justify-content:center;text-align:center;
 padding:9px 6px;min-height:35px;font-size:10px;font-weight:650;border-radius:8px
}
#panel-sim .ff-auto-actions button{color:#fff;background:#103a5f;border:1px solid #103a5f}
#panel-sim .ff-auto-actions a{color:#143957;background:#fff;border:1px solid #d5e0ea}
#panel-sim .ff-empty{
 padding:26px 22px;background:#f8fafb;border:1px dashed #c9d5de;border-radius:11px;color:#63788b;min-height:145px;line-height:1.55
}
#panel-sim .ff-empty strong{font-size:13px;color:#24455e}
#panel-sim .ff-empty-link{color:#176ba5;font-weight:650}

/* All remaining stages and footer remain available and aligned to the new width. */
#panel-smart,#panel-request,#panel-mine{max-width:1450px;margin:20px auto;padding:0 clamp(24px,3.4vw,62px)}
.footer{max-width:1570px;margin:0 auto;padding:20px clamp(24px,3.4vw,62px) 30px;border-top:1px solid #e5ebef}
@media(min-width:1600px){.ff-hero{min-height:284px;padding-top:37px}}
@media(max-width:1280px){
 .ff-hero{min-height:250px;padding-left:36px;padding-right:36px}
 .ff-hero h1{font-size:31px}
 #panel-sim .ff-explore-layout{grid-template-columns:minmax(310px,36fr) minmax(0,64fr)}
 #panel-sim .ff-discover-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 #panel-sim .ff-result-hero .ff-metric{padding-left:11px;padding-right:11px}
 #panel-sim .ff-result-hero .ff-metric strong{font-size:17px}
}
@media(max-width:950px){
 .header{height:auto;min-height:65px;flex-wrap:wrap;gap:8px;padding:12px 25px}
 .header nav{flex-wrap:wrap;gap:13px}
 .header nav a.active{padding:5px 0}
 .ff-hero{min-height:255px;padding:22px 26px}
 .ff-hero-copy{max-width:550px}
 .ff-hero-side{max-width:200px;flex-basis:200px;padding:13px}
 #panel-sim .ff-explore-layout{grid-template-columns:1fr;gap:14px}
 #panel-sim{padding:0 24px}
 #panel-sim .ff-builder{max-width:none}
 #panel-sim .ff-market-panel{grid-template-columns:1fr}
 #panel-sim .ff-discover-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
 #panel-sim .ff-result-hero .ff-metric strong{font-size:20px}
}
@media(max-width:700px){
 .ff-hero{min-height:230px;padding:24px 20px;background-position:center,right center}
 .ff-hero h1{font-size:29px}
 .ff-hero p{font-size:11px}
 .ff-hero-benefits{gap:9px;margin-top:14px;font-size:9px}
 .ff-hero-side{display:none}
 .shell>.tabs{margin:10px 16px 12px;max-width:calc(100% - 32px);overflow-x:auto}
 .shell>.tabs button{white-space:nowrap;padding:10px 11px;font-size:10px}
 #panel-sim{padding:0 15px}
 #panel-sim .ff-results{padding:14px}
 #panel-sim .ff-result-hero{grid-template-columns:repeat(2,minmax(0,1fr))}
 #panel-sim .ff-result-hero .ff-metric{min-height:76px;padding:10px 12px}
 #panel-sim .ff-result-hero .ff-metric:nth-child(3){border-left:0;border-top:1px solid rgba(234,244,255,.19)}
 #panel-sim .ff-result-hero .ff-metric:nth-child(4){border-top:1px solid rgba(234,244,255,.19)}
 #panel-sim .ff-discover-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .ff-mobile-budget{display:flex;position:sticky;top:0;z-index:20;align-items:center;gap:9px;margin:0;padding:9px 16px;background:#102d48;color:#fff;font-size:10px}
 .ff-mobile-budget strong{font-size:11px}.ff-mobile-budget a{margin-left:auto;color:#d0ebff;text-decoration:none}
}
@media(max-width:520px){
 .header img{width:135px}
 .ff-hero{padding:23px 17px;min-height:246px}
 .ff-hero h1{font-size:27px}
 .ff-hero-benefits span:nth-child(3){display:none}
 #panel-sim .ff-discover-grid{grid-template-columns:1fr}
 #panel-sim .ff-discover .section-head{grid-template-columns:1fr}
 #panel-sim .ff-discover .section-head .ff-match-count{grid-column:1;grid-row:auto;text-align:left}
 #panel-sim .ff-auto-card>img,#panel-sim .ff-photo-empty{height:190px}
 #panel-sim .ff-secondary-actions .ff-actions{width:100%;flex-wrap:wrap}
 #panel-sim .ff-secondary-actions .ff-actions button{flex:1}
}
@media(prefers-reduced-motion:reduce){#panel-sim .ff-auto-card{transition:none}}
