:root{
  /* autosolve.ca brand: navy surfaces, gold accent, red action, blue secondary */
  --asphalt:#0c1120; --asphalt-2:#101726; --panel:#151c2e; --steel:#1e2a42; --steel-2:#2a3a56;
  --smoke:#8c9caf; --chalk:#eceef1; --amber:#E5A918; --amber-2:#f0c24d; --amber-deep:#c89614;
  --win:#2e6db4; --danger:#DC2626; --low:#E5A918; --green:#35c98a;
  --r:14px; --shadow:0 24px 60px -24px rgba(0,0,0,.8);
  --serif:"Cormorant", Georgia, serif; /* elegant headlines only */
  --display:"Hanken Grotesk", -apple-system, BlinkMacSystemFont, sans-serif;
  --body:"Hanken Grotesk", -apple-system, BlinkMacSystemFont, sans-serif; --mono:"Hanken Grotesk", sans-serif;
  /* aliases so the autosolve.ca header CSS (copied verbatim) resolves */
  --bg:#0c1120; --text:#eceef1; --text-dim:#9baab9; --border:#1e2a42;
  --gold:#E5A918; --gold-light:#f0c24d; --red:#B91C1C; --red-bright:#DC2626; --red-glow:rgba(185,28,28,.35);
  --sans:"Hanken Grotesk", -apple-system, BlinkMacSystemFont, sans-serif; --ease-out:cubic-bezier(0.16,1,0.3,1);
}
*{box-sizing:border-box}
[hidden]{display:none !important}   /* beat .search/.chips display:flex */
html,body{margin:0}
body{
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(229,169,24,.10), transparent 60%),
    radial-gradient(900px 500px at -10% 10%, rgba(46,109,180,.06), transparent 55%),
    var(--asphalt);
  color:var(--chalk); font-family:var(--body); line-height:1.45;
  -webkit-font-smoothing:antialiased; min-height:100vh; overflow-x:hidden;
}
/* film grain */
.grain{position:fixed; inset:0; pointer-events:none; z-index:9; opacity:.04; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}

/* ---- top bar ---- */
.topbar{display:flex; align-items:center; justify-content:space-between; padding:22px clamp(18px,5vw,64px);
  border-bottom:1px solid var(--steel); position:sticky; top:0; z-index:8;
  backdrop-filter:blur(8px); background:linear-gradient(var(--asphalt),rgba(12,17,32,.6));}
.topbar.slim{padding:12px clamp(18px,5vw,64px)}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none; cursor:default}
.brand-logo{height:30px; width:auto; display:block; padding:6px 11px; background:#fff; border-radius:8px}
.brand-tag{font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--smoke); padding-left:12px; border-left:1px solid var(--steel)}
.topnav-link{font-family:var(--mono); font-size:12px; letter-spacing:.04em; color:var(--smoke); text-decoration:none}
.topnav-link:hover{color:var(--amber)}
@media(max-width:560px){ .brand-tag, .topnav-link{display:none} }

/* ===== autosolve.ca site header (copied from autosolve.ca/styles.css) ===== */
body.site-nav{padding-top:84px} /* collapsed (scrolled) nav is a single compact row */
@media(max-width:768px){ body.site-nav{padding-top:92px} } /* mobile keeps the address topbar */
.nav{position:fixed; top:0; left:0; right:0; z-index:1000; padding:22px 40px; padding-top:0;
  background:linear-gradient(to bottom, rgba(8,12,24,.82) 0%, rgba(8,12,24,.48) 55%, rgba(8,12,24,0) 100%);
  transition:padding .5s var(--ease-out), background .5s var(--ease-out), box-shadow .5s ease}
.nav-topbar{max-width:1200px; margin:0 auto; display:flex; align-items:center; justify-content:center; gap:14px;
  padding:10px 0 8px; font-family:var(--sans); font-size:12px; font-weight:500; letter-spacing:.06em; color:var(--text-dim);
  border-bottom:1px solid rgba(255,255,255,.08); margin-bottom:12px}
.nav-address{color:var(--text-dim); display:inline-flex; align-items:center; gap:7px; transition:color .2s ease; text-decoration:none}
.nav-address svg{width:12px; height:12px; color:var(--gold); flex-shrink:0; transition:color .2s ease, transform .2s ease}
a.nav-address:hover{color:var(--text)} a.nav-address:hover svg{color:var(--gold-light); transform:translateY(-1px)}
.nav.scrolled .nav-topbar{display:none}
.nav-address--compact{display:none; font-family:var(--sans); font-size:13px; font-weight:500; letter-spacing:.04em; color:var(--text-dim); align-items:center; gap:7px; transition:color .2s ease; text-decoration:none}
.nav-address--compact svg{width:12px; height:12px; color:var(--gold); flex-shrink:0}
.nav.scrolled .nav-address--compact{display:inline-flex}
.nav.scrolled{background:rgba(12,17,32,.95); backdrop-filter:blur(24px) saturate(1.3); -webkit-backdrop-filter:blur(24px) saturate(1.3);
  padding:14px 40px; box-shadow:0 1px 0 var(--border), 0 4px 24px rgba(0,0,0,.2)}
.nav-inner{max-width:1200px; margin:0 auto; display:flex; align-items:center; justify-content:space-between}
.nav-logo{display:flex; align-items:center; text-decoration:none; cursor:pointer}
.nav-logo img{height:56px; width:auto; transition:height .4s var(--ease-out), opacity .3s ease}
.nav.scrolled .nav-logo img{height:46px}
.nav-logo:hover img{opacity:.8}
.nav-right{display:flex; align-items:center; gap:24px}
.nav-phone{color:var(--text); font-size:15px; font-weight:500; letter-spacing:.04em; text-decoration:none}
.nav-phone:hover{color:var(--gold)}
.nav-services{position:relative}
.nav-link{color:var(--text); font-size:15px; font-weight:500; letter-spacing:.04em; padding:8px 0; cursor:pointer}
.nav-link:hover{color:var(--gold)}
.nav-dropdown{position:absolute; top:calc(100% + 12px); left:50%; transform:translateX(-50%) translateY(6px); min-width:260px;
  background:rgba(12,17,32,.97); backdrop-filter:blur(24px) saturate(1.3); -webkit-backdrop-filter:blur(24px) saturate(1.3);
  border:1px solid var(--border); border-radius:10px; padding:10px 0; opacity:0; visibility:hidden;
  transition:opacity .25s ease, visibility .25s ease, transform .25s var(--ease-out); box-shadow:0 16px 56px rgba(0,0,0,.5); z-index:100}
.nav-services:hover .nav-dropdown{opacity:1; visibility:visible; transform:translateX(-50%) translateY(0)}
.nav-dropdown a{display:block; padding:11px 24px; font-size:14px; font-weight:400; color:var(--text-dim); text-decoration:none; transition:color .2s ease, padding-left .2s ease, background .2s ease}
.nav-dropdown a:hover{color:var(--gold); padding-left:28px; background:rgba(255,255,255,.03)}
.nav .btn{display:inline-block; font-family:var(--sans); font-weight:700; letter-spacing:.16em; text-transform:uppercase; border-radius:5px; cursor:pointer; text-decoration:none;
  padding:11px 24px; font-size:11px; background:var(--red); color:#fff; border:1.5px solid var(--red); transition:all .35s var(--ease-out)}
.nav .btn:hover{background:var(--red-bright); border-color:var(--red-bright); color:#fff; box-shadow:0 4px 20px var(--red-glow); transform:translateY(-2px)}
.nav-toggle{display:none; flex-direction:column; gap:6px; background:none; border:none; cursor:pointer; padding:6px}
.nav-toggle span{display:block; width:22px; height:1.5px; background:var(--text); transition:all .35s var(--ease-out); transform-origin:center}
.nav-toggle.active span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.nav-toggle.active span:nth-child(2){opacity:0; transform:scaleX(0)}
.nav-toggle.active span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
.mobile-menu{display:none; flex-direction:column; padding:12px 40px 28px; max-width:1200px; margin:0 auto; background:rgba(12,17,32,.98)}
.mobile-menu a{padding:16px 0; color:var(--text); font-size:18px; font-weight:400; border-bottom:1px solid var(--border); text-decoration:none; transition:color .3s ease, padding-left .3s ease}
.mobile-menu a:hover{color:var(--gold); padding-left:10px}
.mobile-menu a:last-child{border-bottom:none}
@media(max-width:768px){
  .nav{padding:18px 24px} .nav.scrolled{padding:14px 24px} .mobile-menu{padding:8px 24px 24px}
  .nav-topbar{font-size:11px; padding:6px 0 5px; margin-bottom:8px; letter-spacing:.04em; gap:6px}
  .nav-address svg{width:10px; height:10px} .nav-address--compact{display:none !important}
  .nav.scrolled .nav-topbar{display:flex} .nav.scrolled .nav-logo img{height:42px}
  .nav-phone, .nav .btn, .nav-services{display:none} .nav-toggle{display:flex} .mobile-menu.open{display:flex}
}
.brand-mark{color:var(--amber); font-size:26px; transform:translateY(3px)}
.brand-name{font-family:var(--display); font-weight:900; letter-spacing:.06em; font-size:24px}
.brand-sub{font-family:var(--mono); color:var(--smoke); font-size:12px; letter-spacing:.04em}
.topnav{display:flex; align-items:center; gap:18px}
.topnav-phone{font-family:var(--display); font-weight:700; font-size:15px; color:var(--chalk); text-decoration:none}
.topnav-phone:hover{color:var(--amber)}
.book-btn{font-family:var(--display); font-weight:700; letter-spacing:.02em; font-size:14px; color:#fff; text-decoration:none;
  background:linear-gradient(180deg,#DC2626,#B91C1C); padding:10px 18px; border-radius:10px; box-shadow:0 8px 24px -12px rgba(220,38,38,.6); transition:filter .15s}
.book-btn:hover{filter:brightness(1.08)}
@media(max-width:560px){ .topnav-phone{display:none} }
.advisor-switch{display:flex; align-items:center; gap:10px; cursor:pointer; user-select:none}
.advisor-switch input{display:none}
.advisor-switch .track{width:46px; height:24px; border-radius:20px; background:var(--steel); position:relative; transition:.25s}
.advisor-switch .thumb{position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:var(--smoke); transition:.25s}
.advisor-switch input:checked + .track{background:rgba(220,38,38,.25)}
.advisor-switch input:checked + .track .thumb{left:25px; background:var(--danger)}
.advisor-label{font-family:var(--mono); font-size:11px; letter-spacing:.12em; color:var(--smoke)}
body.advisor .advisor-label{color:var(--danger)}

/* ---- hero ---- */
.hero{padding:clamp(32px,6vw,72px) clamp(18px,5vw,64px) 8px; max-width:1180px; margin:0 auto}
.kicker{font-family:var(--mono); letter-spacing:.28em; font-size:12px; color:var(--amber); margin:0 0 14px}
.hero h1{font-family:var(--display); font-weight:800; font-size:clamp(38px,7vw,76px); line-height:.96; margin:0 0 28px; letter-spacing:-.01em}
.hero h1 em{color:var(--amber); font-style:normal}
.search{display:flex; gap:12px; flex-wrap:wrap}
.size-input{display:flex; align-items:center; background:var(--panel); border:1px solid var(--steel); border-radius:var(--r); overflow:hidden; flex:1; min-width:240px;
  transition:border-color .2s, box-shadow .2s}
.size-input:focus-within{border-color:var(--amber); box-shadow:0 0 0 4px rgba(229,169,24,.12)}
.size-tag{font-family:var(--mono); font-size:12px; letter-spacing:.16em; color:var(--asphalt); background:var(--amber); padding:0 14px; align-self:stretch; display:flex; align-items:center; font-weight:600}
.size-input input{flex:1; background:transparent; border:0; outline:0; color:var(--chalk); font-family:var(--mono); font-size:22px; padding:16px 18px; letter-spacing:.04em}
.go{font-family:var(--display); font-weight:800; letter-spacing:.02em; font-size:18px; padding:0 30px; border:0; border-radius:var(--r); cursor:pointer;
  background:linear-gradient(180deg,#DC2626,#B91C1C); color:#fff; box-shadow:0 10px 30px -12px rgba(220,38,38,.6); transition:transform .15s, filter .2s}
.go:hover{transform:translateY(-2px); filter:brightness(1.06)}
.go span{display:inline-block; transition:transform .2s}
.go:hover span{transform:translateX(4px)}
.size-input.veh{flex:2; min-width:280px}
.size-input.veh input{font-family:var(--body); font-size:16px; letter-spacing:0}
.size-tag.alt{background:var(--steel); color:var(--chalk)}
.size-input.veh:focus-within{border-color:var(--win); box-shadow:0 0 0 4px rgba(46,109,180,.12)}

.lead{font-size:16px; color:var(--smoke); max-width:640px; margin:0 0 22px; line-height:1.5}
.vehicle-widget{display:flex; flex-wrap:wrap; gap:12px; position:relative; min-height:62px}
.vehicle-widget.loading{opacity:.55}
.vehicle-widget:empty::before,.vehicle-widget.loading::after{content:""; position:absolute; left:0; top:22px;
  width:16px; height:16px; border:2px solid var(--steel); border-top-color:var(--amber); border-radius:50%; animation:spin .7s linear infinite}
.veh-field{display:flex; flex-direction:column; gap:5px; min-width:190px; flex:1}
.veh-field span{font-family:var(--mono); font-size:11px; letter-spacing:.1em; color:var(--smoke); text-transform:uppercase; order:-1}
.veh-field select{appearance:none; -webkit-appearance:none; background:var(--panel)
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238a939e' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 16px center;
  border:1px solid var(--steel); border-radius:12px; color:var(--chalk); font-family:var(--body); font-size:16px; padding:14px 38px 14px 16px; cursor:pointer; transition:border-color .2s, box-shadow .2s}
.veh-field select:focus{outline:0; border-color:var(--amber); box-shadow:0 0 0 4px rgba(229,169,24,.12)}
.veh-field select:disabled{opacity:.5; cursor:default}
/* --- rims entry banner (tire page) --- */
.rims-banner{display:flex; align-items:center; gap:14px; text-decoration:none; margin:0 0 26px; padding:14px 18px;
  background:linear-gradient(100deg, rgba(229,169,24,.12), rgba(46,109,180,.10)); border:1px solid var(--steel-2); border-radius:14px;
  color:var(--chalk); font-family:var(--body); font-size:15px; transition:border-color .2s, transform .12s}
.rims-banner:hover{border-color:var(--amber); transform:translateY(-1px)}
.rims-banner b{color:var(--amber-2)}
.rims-banner-ic{font-size:24px; line-height:1}
.rims-banner-go{margin-left:auto; white-space:nowrap; font-family:var(--display); font-weight:800; color:var(--amber); letter-spacing:.02em}
@media(max-width:640px){.rims-banner-go{display:none}}

/* --- wheels / rims page --- */
#wheelControls{max-width:1180px; margin:6px auto 4px; padding:0 clamp(18px,5vw,64px)}
.veh-select{appearance:none; -webkit-appearance:none; flex:1; min-width:170px; background:var(--panel)
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238a939e' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 16px center;
  border:1px solid var(--steel); border-radius:12px; color:var(--chalk); font-family:var(--body); font-size:16px; padding:14px 38px 14px 16px; cursor:pointer; transition:border-color .2s, box-shadow .2s}
.veh-select:focus{outline:0; border-color:var(--amber); box-shadow:0 0 0 4px rgba(229,169,24,.12)}
.veh-select:disabled{opacity:.5; cursor:default}
.wheel-card .img-wrap img{max-height:150px}
.oe-sizes{display:flex; flex-direction:column; gap:10px; margin:18px 0 0}
.oe-badge{font-family:var(--mono); font-size:9px; letter-spacing:.06em; background:var(--amber); color:#1a1305; border-radius:4px; padding:1px 4px; vertical-align:middle}
.oe-badge.alt{background:var(--steel-2); color:var(--chalk)}
.chip-n{font-family:var(--mono); font-size:10px; color:var(--smoke)}
.oth-toggle{cursor:pointer; gap:6px}
.oth-toggle input{width:15px; height:15px; accent-color:var(--amber)}
.wheel-card .specs .spec-winter{color:var(--win); border-color:var(--win)}
.wheel-card .specs .spec-type{color:var(--smoke)}
.cmp-toggle{display:flex; align-items:center; gap:7px; font-family:var(--mono); font-size:12px; color:var(--smoke); margin:0 0 10px; cursor:pointer}
.cmp-toggle input{width:16px; height:16px; accent-color:var(--amber)}
.cmp-wrap{overflow-x:auto}
.cmp-table{width:100%; border-collapse:collapse; font-family:var(--body); color:#16181d}
.cmp-table th{text-align:left; font-family:var(--mono); font-size:11px; text-transform:uppercase; color:#6a7079; padding:8px 10px; white-space:nowrap; vertical-align:middle}
.cmp-table td{padding:8px 10px; border-left:1px solid #e6e8ec; text-align:center; font-size:14px}
.cmp-table tr+tr{border-top:1px solid #eef0f3}
.cmp-img{width:74px; height:74px; object-fit:contain}
.cmp-h{font-weight:700; font-size:13px; margin-top:4px}
.cmp-pick{font-family:var(--display); font-weight:800; font-size:13px; color:#fff; background:linear-gradient(180deg,#DC2626,#B91C1C); border:0; border-radius:9px; padding:9px 12px; cursor:pointer}
.cmp-table td.cmp-pick-col{background:#fff5dc}
/* AI compare review block (in the light compare modal) */
.ai-review-btn{display:block; width:100%; text-align:center; margin:14px 0 0; padding:12px; background:#16181d; color:#fff; border:0; border-radius:12px; font-family:var(--display); font-weight:700; font-size:15px; cursor:pointer; transition:filter .15s}
.ai-review-btn:hover{filter:brightness(1.15)}
.ai-review-btn:disabled{opacity:.7; cursor:default}
.ai-cmp{margin:0 0 14px}
.ai-cmp-verdict{font-family:var(--body); font-size:15px; line-height:1.5; color:#16181d; background:#f7f8fa; border:1px solid #e2e5ea; border-radius:12px; padding:12px 14px}
.ai-cmp-verdict .ai-badge{margin-right:6px}
.ai-cmp-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:10px; margin-top:10px}
.ai-cmp-item{border:1px solid #e2e5ea; border-radius:12px; padding:10px 12px; background:#fff}
.ai-cmp-item.pick{border-color:var(--amber-deep); box-shadow:0 0 0 2px rgba(229,169,24,.2)}
.ai-cmp-h{font-family:var(--display); font-weight:700; font-size:14px; color:#16181d; margin-bottom:6px; display:flex; align-items:center; gap:6px; flex-wrap:wrap}
.ai-pros, .ai-cons{margin:0; padding:0 0 0 16px; font-size:13px; line-height:1.4}
.ai-pros li{color:#16804a; margin:2px 0} .ai-pros li::marker{content:"+ "}
.ai-cons li{color:#9a5b00; margin:2px 0} .ai-cons li::marker{content:"– "}
.mode-switch{font-family:var(--mono); font-size:13px; color:var(--smoke); margin:18px 0 0}
.mode-switch.w-100{flex-basis:100%}
.linklike{background:none; border:0; color:var(--amber); font:inherit; cursor:pointer; padding:0; text-decoration:underline}
.linklike:hover{color:var(--amber-2)}

.ai-summary{margin-top:16px; padding:14px 16px; border:1px solid rgba(229,169,24,.35);
  background:linear-gradient(180deg,rgba(229,169,24,.08),transparent); border-radius:12px;
  font-family:var(--body); font-size:15px; color:var(--chalk); line-height:1.4}
.ai-badge{font-family:var(--mono); font-size:11px; letter-spacing:.14em; color:var(--asphalt);
  background:linear-gradient(180deg,var(--amber-2),var(--amber-deep)); padding:3px 8px; border-radius:6px; margin-right:10px; white-space:nowrap}

.chips{display:flex; gap:8px; flex-wrap:wrap; margin-top:16px}
.chip{font-family:var(--mono); font-size:13px; color:var(--smoke); background:transparent; border:1px solid var(--steel); padding:7px 12px; border-radius:99px; cursor:pointer; transition:.18s}
.chip:hover{color:var(--chalk); border-color:var(--amber); background:rgba(229,169,24,.08)}

.advisor-controls{display:none; align-items:center; gap:18px; margin-top:18px}
body.advisor .advisor-controls{display:flex}
.staff-flag{font-family:var(--mono); font-size:11px; letter-spacing:.18em; color:var(--danger); border:1px dashed var(--danger); padding:4px 10px; border-radius:6px}
.price-mode{display:inline-flex; border:1px solid var(--steel); border-radius:10px; overflow:hidden}
.price-mode button{font-family:var(--mono); font-size:12px; padding:8px 14px; background:transparent; color:var(--smoke); border:0; cursor:pointer}
.price-mode button.active{background:var(--steel); color:var(--chalk)}

/* ---- refine chips ---- */
.results-bar{max-width:1180px; margin:14px auto 0; padding:0 clamp(18px,5vw,64px); display:flex; justify-content:flex-end}
.start-over{font-family:var(--mono); font-size:12px; letter-spacing:.06em; color:var(--smoke); background:none; border:1px solid var(--line,#d8d8d8); border-radius:999px; padding:6px 14px; cursor:pointer; transition:.15s}
.start-over:hover{color:var(--ink,#111); border-color:currentColor}
.refine{max-width:1180px; margin:14px auto 0; padding:0 clamp(18px,5vw,64px); display:flex; align-items:center; gap:14px; flex-wrap:wrap}
.refine-label{font-family:var(--mono); font-size:11px; letter-spacing:.14em; color:var(--smoke); text-transform:uppercase}
.refine-chips{display:flex; gap:8px; flex-wrap:wrap}
.refine-chip{font-family:var(--mono); font-size:13px; color:var(--smoke); background:transparent; border:1px solid var(--steel); padding:8px 14px; border-radius:99px; cursor:pointer; transition:.18s}
.refine-chip:hover{color:var(--chalk); border-color:var(--amber)}
.refine-chip.active{background:rgba(229,169,24,.14); border-color:var(--amber); color:var(--amber-2)}

.call-link{font-family:var(--display); font-weight:900; font-size:30px; color:var(--amber); text-decoration:none; letter-spacing:.02em; display:inline-block; margin-top:6px}
.call-link:hover{color:var(--amber-2)}

/* ---- board ---- (equal-size cards) */
.board{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; align-items:stretch;
  max-width:1180px; margin:30px auto 10px; padding:0 clamp(18px,5vw,64px) 30px}
@media(max-width:880px){.board{grid-template-columns:1fr}}

.card{position:relative; background:linear-gradient(180deg,var(--panel),var(--asphalt-2)); border:1px solid var(--steel);
  border-radius:18px; padding:22px; display:flex; flex-direction:column; gap:14px; box-shadow:var(--shadow); cursor:pointer;
  opacity:0; transform:translateY(24px); animation:rise .6s cubic-bezier(.2,.8,.2,1) forwards; transition:border-color .15s, box-shadow .15s}
.card:nth-child(1){animation-delay:.05s}
.card:nth-child(2){animation-delay:.13s}
.card:nth-child(3){animation-delay:.21s}
@keyframes rise{to{opacity:1; transform:none}}

/* best tier — same size, distinguished by colour/glow only */
.card.best{border-color:var(--amber);
  background:linear-gradient(180deg,rgba(229,169,24,.10),var(--asphalt-2) 40%); box-shadow:0 24px 60px -28px rgba(229,169,24,.4), var(--shadow)}

/* prominent tier label band */
.card .rank{font-family:var(--display); font-weight:800; letter-spacing:.1em; font-size:16px; text-transform:uppercase;
  text-align:center; padding:9px 10px; margin:-22px -22px 2px; border-radius:18px 18px 0 0; color:#0c1120}
.card.good .rank{background:var(--win); color:#fff}
.card.better .rank{background:var(--amber-2)}
.card.best .rank{background:var(--amber)}
.card.best .rank::after{content:" · ★ MOST POPULAR"; font-size:11px; letter-spacing:.06em}
.card.other .rank{display:none}

/* selected highlight (customer pick) — amber ring */
.card.selected{border-color:var(--amber); box-shadow:0 0 0 3px var(--amber), 0 24px 60px -26px rgba(229,169,24,.55), var(--shadow)}

.card-head{display:flex; justify-content:space-between; align-items:center}
.brand-line{font-family:var(--display); font-weight:800; font-size:22px; letter-spacing:.02em}
.stock{font-family:var(--mono); font-size:11px; letter-spacing:.04em; padding:4px 9px; border-radius:99px; border:1px solid currentColor}
.stock.in{color:var(--green)} .stock.low{color:var(--low)} .stock.out{color:var(--danger)} .stock.order{color:var(--smoke)}

.img-wrap{height:170px; display:flex; align-items:center; justify-content:center; position:relative}
.img-wrap::after{content:""; position:absolute; bottom:6px; left:50%; transform:translateX(-50%); width:60%; height:18px; background:radial-gradient(ellipse,rgba(0,0,0,.6),transparent 70%); filter:blur(3px)}
.img-wrap img{max-height:170px; max-width:90%; object-fit:contain; filter:drop-shadow(0 14px 22px rgba(0,0,0,.6))}
.img-wrap img.zoomable{cursor:zoom-in; transition:transform .2s}
.img-wrap img.zoomable:hover{transform:scale(1.05)}

.model{font-family:var(--body); font-weight:700; font-size:18px; margin:0}
.part-ref{font-family:var(--mono); font-size:11px; color:var(--smoke); letter-spacing:.03em; margin:2px 0 0}
.part-ref b{color:var(--chalk); font-weight:600; letter-spacing:.04em}
.reason{font-family:var(--body); font-size:13px; line-height:1.4; color:var(--amber-2); margin:0; font-style:italic}
.specs{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px}
.specs li{font-family:var(--mono); font-size:11px; color:#c4cedb; background:#1c2840; border:1px solid var(--steel-2); padding:4px 8px; border-radius:6px}
.specs li.warranty{color:var(--green); border-color:rgba(53,201,138,.45)}
.specs li.explainable{cursor:help; border-bottom-style:dashed; border-bottom-color:var(--smoke); position:relative}
.specs li.explainable::after{content:"?"; font-size:8px; vertical-align:super; color:var(--amber); margin-left:3px; opacity:.8}
.specs li.explainable:hover{color:var(--chalk); border-color:var(--amber)}

.price{margin-top:auto; padding-top:14px; border-top:1px dashed var(--steel)}
.otd{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap}
.otd-num{font-family:var(--display); font-weight:900; font-size:42px; letter-spacing:-.01em; line-height:1}
.card.best .otd-num{color:var(--amber)}
.otd-unit{font-family:var(--mono); font-size:11px; color:var(--smoke)}
.per{font-family:var(--mono); font-size:13px; color:var(--smoke); margin-top:6px}
.per span{color:var(--chalk)}
.save{margin-top:8px; font-family:var(--mono); font-size:12px; color:var(--win)}
.save s{color:var(--smoke); margin-right:6px}

.staff-box{display:none}
body.advisor .staff-box{display:grid; grid-template-columns:1fr 1fr; gap:6px 14px; padding:12px; margin-top:4px;
  border:1px dashed var(--danger); border-radius:10px; background:rgba(220,38,38,.06)}
.staff-box div{font-family:var(--mono); font-size:12px; color:var(--low)}
.staff-box b{color:var(--chalk); font-weight:600}

.reserve{font-family:var(--display); font-weight:700; letter-spacing:.01em; font-size:16px; padding:14px; border:0; border-radius:12px; cursor:pointer; margin-top:4px;
  background:linear-gradient(180deg,#DC2626,#B91C1C); color:#fff; box-shadow:0 8px 24px -12px rgba(220,38,38,.6); transition:.18s}
.reserve span{display:inline-block; transition:transform .2s}
.reserve:hover{filter:brightness(1.07)}
.reserve:hover span{transform:translateX(4px)}

/* ---- source / special-order card ---- */
.source-card{justify-content:space-between; border-style:dashed; border-color:var(--steel);
  background:linear-gradient(180deg,rgba(229,169,24,.05),var(--asphalt-2))}
.source-card.span-all{grid-column:1 / -1; align-items:center; text-align:center}
.card.saved-pkg{grid-column:1 / -1; max-width:620px; margin:0 auto}
.card.saved-pkg .rank{color:var(--amber)}
.source-card .rank{color:var(--amber)}
.source-body{display:flex; flex-direction:column; gap:10px; align-items:flex-start; padding:8px 0}
.source-card.span-all .source-body{align-items:center; max-width:560px; margin:0 auto}
.source-icon{font-size:40px; color:var(--amber); line-height:1}
.source-card p{color:var(--smoke); font-size:14px; margin:0}
.source-card .reserve{background:transparent; border:1px solid var(--amber); color:var(--amber); box-shadow:none}
.source-card .reserve:hover{background:rgba(229,169,24,.12); filter:none}

/* ---- status / loading ---- */
.status{max-width:1180px; margin:0 auto; padding:0 clamp(18px,5vw,64px); min-height:30px; font-family:var(--mono); font-size:13px; color:var(--smoke)}
.status.err{color:var(--danger)}
.loading .board{opacity:.4; pointer-events:none}
.spinner{display:inline-block; width:13px; height:13px; border:2px solid var(--steel); border-top-color:var(--amber); border-radius:50%; animation:spin .7s linear infinite; vertical-align:-2px; margin-right:8px}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---- other options ---- */
.others{max-width:1180px; margin:10px auto 0; padding:0 clamp(18px,5vw,64px) 20px}
.others-head{font-family:var(--display); font-weight:800; font-size:22px; letter-spacing:.01em; margin:0 0 16px; color:var(--chalk)}
.others-head span{color:var(--amber)}
.others-controls{display:flex; flex-wrap:wrap; align-items:center; gap:14px; margin:-4px 0 16px}
.oth-ctl{font-family:var(--mono); font-size:12px; color:var(--smoke); display:flex; align-items:center; gap:7px; text-transform:uppercase; letter-spacing:.04em}
.oth-ctl select{font-family:var(--body); font-size:13px; text-transform:none; letter-spacing:0; color:var(--chalk); background:var(--panel); border:1px solid var(--steel); border-radius:8px; padding:7px 10px; cursor:pointer}
.oth-ctl select:focus{outline:0; border-color:var(--amber)}
.oth-count{font-family:var(--mono); font-size:11px; color:var(--smoke); margin-left:auto}
.others-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:16px}
.others-more{font-family:var(--mono); font-size:12px; color:var(--smoke); margin:16px 0 0}
.card.other{padding:16px; box-shadow:0 14px 36px -22px rgba(0,0,0,.7)}
.card.other .img-wrap{height:120px}
.card.other .img-wrap img{max-height:120px}
.card.other .otd-num{font-size:30px}
.card.other .model{font-size:16px}
.card.other .reason{font-size:12px}
.card.other .reserve{font-size:14px; padding:11px}

/* ---- modal (image + explanations) ---- */
.modal{position:fixed; inset:0; z-index:50; display:flex; align-items:center; justify-content:center; padding:24px}
.modal-backdrop{position:absolute; inset:0; background:rgba(6,8,10,.78); backdrop-filter:blur(4px)}
.modal-box{position:relative; max-width:min(680px,92vw); max-height:86vh; overflow:auto; background:linear-gradient(180deg,var(--panel),var(--asphalt-2));
  border:1px solid var(--steel); border-radius:16px; padding:26px; box-shadow:var(--shadow); animation:rise .25s ease}
.modal-close{position:absolute; top:10px; right:14px; background:none; border:0; color:var(--smoke); font-size:26px; line-height:1; cursor:pointer}
.modal-close:hover{color:var(--chalk)}
.modal-img{display:block; max-width:100%; max-height:64vh; margin:0 auto; object-fit:contain}
.modal-cap{font-family:var(--mono); font-size:12px; color:var(--smoke); text-align:center; margin-top:12px}

/* ---- tire performance profile (unbranded attribute ratings) ---- */
.perf-slot{margin:4px 0 2px}
.perf-link{background:none; border:0; padding:0; font-family:var(--mono); font-size:12px; color:var(--smoke); cursor:pointer; text-align:left; line-height:1.4}
.perf-link span{color:var(--amber)}
.perf-link:hover{color:var(--chalk)}
.perf{display:flex; flex-direction:column; gap:9px; margin:12px 0 6px}
.perf-row{display:grid; grid-template-columns:130px auto 1fr; align-items:center; gap:12px}
.perf-label{font-family:var(--body); font-size:15px; color:var(--chalk)}
.perf-dots{font-size:14px; letter-spacing:3px}
.perf-dots.l4{color:var(--green)} .perf-dots.l3{color:var(--amber)} .perf-dots.l2{color:var(--smoke)} .perf-dots.l1{color:var(--danger)}
.perf-word{font-family:var(--mono); font-size:11px; color:var(--smoke); text-transform:uppercase; letter-spacing:.06em}
.perf-cap{font-family:var(--mono); font-size:11px; color:var(--smoke); margin:10px 0 0}
.perf-loading{font-family:var(--mono); font-size:13px; color:var(--smoke); display:flex; align-items:center; gap:8px; padding:10px 0}

/* ---- universal image lightbox (layers OVER any modal) ---- */
img.zoomable{cursor:zoom-in}
#lightbox{position:fixed; inset:0; z-index:120; display:flex; align-items:center; justify-content:center; padding:24px}
#lightbox .lb-backdrop{position:absolute; inset:0; background:rgba(4,6,10,.9); backdrop-filter:blur(6px)}
#lightbox .lb-box{position:relative; max-width:min(1100px,96vw); max-height:92vh; display:flex; flex-direction:column; align-items:center; animation:rise .2s ease}
#lightbox .lb-img{max-width:100%; max-height:84vh; object-fit:contain; border-radius:12px; background:#fff; box-shadow:var(--shadow)}
#lightbox .lb-cap{font-family:var(--mono); font-size:13px; color:var(--chalk); text-align:center; margin-top:14px}
#lightbox .lb-close{position:absolute; top:-14px; right:-6px; background:none; border:0; color:#fff; font-size:34px; line-height:1; cursor:pointer; text-shadow:0 2px 8px rgba(0,0,0,.6)}
.modal-title{font-family:var(--display); font-weight:800; font-size:22px; margin:0 0 12px; color:var(--amber)}
.modal-text{font-family:var(--body); font-size:16px; line-height:1.5; color:var(--chalk); margin:0}
.modal-text b{color:var(--amber-2)}
.resv-form{display:flex; flex-direction:column; gap:10px; margin-top:10px}
.resv-form input, .resv-form textarea{font-family:var(--body); font-size:15px; background:var(--asphalt); border:1px solid var(--steel); border-radius:10px; color:var(--chalk); padding:12px 14px; outline:0; resize:vertical}
.resv-form input:focus, .resv-form textarea:focus{border-color:var(--amber); box-shadow:0 0 0 3px rgba(229,169,24,.12)}

/* light (printable) modal — used for the estimate/reserve */
.modal.light .modal-box{background:#fff; color:#16181d}
.modal.light .modal-text.small{font-size:13px; color:#5a6068}
.book-cta{display:block; text-align:center; font-family:var(--display); font-weight:800; letter-spacing:.02em; font-size:17px;
  text-decoration:none; color:#fff; background:linear-gradient(180deg,#DC2626,#B91C1C); padding:15px 20px; border-radius:12px; margin:14px 0 6px;
  box-shadow:0 10px 28px -12px rgba(220,38,38,.6); transition:filter .15s}
.book-cta:hover{filter:brightness(1.08)}
.add-rims-link{display:block; width:100%; text-align:center; margin:10px 0 0; padding:12px; background:none; border:1px dashed #cfd4db; border-radius:12px; color:#16181d; font-family:var(--display); font-weight:700; font-size:15px; cursor:pointer; transition:border-color .15s, background .15s}
.add-rims-link:hover{border-color:var(--amber); background:rgba(229,169,24,.06)}
.share-link{display:block; width:100%; text-align:center; margin:8px 0 0; padding:11px; background:none; border:0; color:#16181d; font-family:var(--display); font-weight:600; font-size:14px; cursor:pointer; text-decoration:underline; text-underline-offset:3px}
.share-link:hover{color:var(--amber-deep)}
/* reservation confirmation (redesigned) */
.confirm-hero{display:flex; align-items:center; gap:14px; margin:0 0 14px}
.confirm-check{flex:0 0 46px; width:46px; height:46px; border-radius:50%; background:linear-gradient(180deg,#34d399,#10b981); color:#fff; font-size:26px; font-weight:800; display:flex; align-items:center; justify-content:center; box-shadow:0 8px 20px -8px rgba(16,185,129,.7)}
.confirm-title{font-family:var(--display); font-weight:800; font-size:24px; color:#16181d; margin:0; line-height:1.05}
.confirm-sub{font-family:var(--body); font-size:14px; color:#5a6068; margin:3px 0 0}
.confirm-otd{display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin:12px 0 4px; padding:12px 14px; border-radius:12px; background:#fff5dc; border:1px solid var(--amber-deep)}
.confirm-otd span{font-family:var(--mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:#7a5a00}
.confirm-otd b{font-family:var(--display); font-weight:800; font-size:24px; color:#a85b00}
.confirm-done{display:block; width:100%; text-align:center; margin:10px 0 0; padding:11px; background:none; border:1px solid #cfd4db; border-radius:12px; color:#5a6068; font-family:var(--display); font-weight:600; font-size:14px; cursor:pointer}
.confirm-done:hover{border-color:#9aa3ad; color:#16181d}
.tpms-toggle{display:flex; align-items:center; gap:9px; margin:12px 2px 0; font-family:var(--body); font-size:14px; color:#3a3f48; cursor:pointer}
.tpms-toggle input{width:16px; height:16px; accent-color:var(--amber); flex:0 0 16px}
.hw-detail{font-family:var(--mono); font-size:12px; color:#7a828c}
.hw-req{font-family:var(--mono); font-size:11px; letter-spacing:.06em; color:var(--amber-deep); text-transform:uppercase}
.modal.light .modal-title{color:#16181d}
.modal.light .modal-text{color:#3a3f48}
.modal.light .modal-text b{color:#16181d}
.modal.light .modal-text.err{color:var(--danger)}
.modal.light .modal-close{color:#9aa3ad}
.modal.light .modal-close:hover{color:#16181d}
.modal.light .estimate{border-color:#e2e5ea}
.modal.light .estimate .erow{color:#16181d; border-bottom-color:#eef0f3}
.modal.light .estimate .erow span:first-child{color:#5a6068}
.modal.light .estimate .erow.sub{border-top-color:#d6dae0}
.modal.light .estimate .erow.total{background:#fff5dc; border-top:2px solid var(--amber-deep)}
.modal.light .estimate .erow.total span{color:#16181d} .modal.light .estimate .erow.total .e-amt{color:#a85b00}
.modal.light .resv-form input, .modal.light .resv-form textarea{background:#fff; border-color:#cfd4db; color:#16181d}
.modal.light .resv-form input::placeholder, .modal.light .resv-form textarea::placeholder{color:#9aa3ad}
.modal.light .resv-form input:focus, .modal.light .resv-form textarea:focus{border-color:var(--amber-deep); box-shadow:0 0 0 3px rgba(229,169,24,.15)}

/* itemized estimate (reserve modal) */
.estimate{margin:8px 0 16px; border:1px solid var(--steel); border-radius:12px; overflow:hidden}
.estimate .erow{display:flex; justify-content:space-between; gap:12px; padding:9px 14px; font-family:var(--body); font-size:14px; color:var(--chalk); border-bottom:1px solid var(--asphalt-2)}
.estimate .erow span:first-child{color:var(--smoke)}
.estimate .erow.sub{border-top:1px solid var(--steel)}
.estimate .erow.total{background:rgba(229,169,24,.1); font-family:var(--display); font-weight:800; font-size:18px; border-bottom:0}
.estimate .erow.total span{color:var(--chalk)} .estimate .erow.total .e-amt{color:var(--amber)}

/* selection summary — image + brand/model/size for the tire and/or rim being quoted */
.sel-summary{display:flex; flex-direction:column; gap:8px; margin:12px 0 4px}
.sel-item{display:flex; align-items:center; gap:12px; padding:9px 11px; border:1px solid var(--steel); border-radius:12px; background:var(--asphalt)}
.sel-thumb{width:54px; height:54px; flex:0 0 54px; object-fit:contain; border-radius:8px; background:#fff}
.sel-thumb-empty{background:var(--asphalt-2)}
.sel-info{display:flex; flex-direction:column; gap:2px; min-width:0}
.sel-kind{font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--smoke)}
.sel-name{font-family:var(--display); font-weight:700; font-size:15px; color:var(--chalk); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.sel-spec{font-family:var(--mono); font-size:12px; color:var(--smoke)}
.custom-fit{font-family:var(--mono); font-size:12px; color:var(--amber-deep); font-weight:600}
/* light (printable estimate) variants */
.modal.light .sel-item{border-color:#e2e5ea; background:#f7f8fa}
.modal.light .sel-name{color:#16181d}
.modal.light .sel-spec, .modal.light .sel-kind{color:#5a6068}
.modal.light .sel-thumb-empty{background:#eef0f3}

/* admin settings */
.settings-wrap{max-width:780px; margin:8px auto 70px; padding:0 clamp(18px,5vw,64px)}
.settings-card{background:var(--panel); border:1px solid var(--steel); border-radius:14px; padding:20px; margin-bottom:18px}
.settings-card h3{font-family:var(--display); font-weight:800; font-size:18px; margin:0 0 4px}
.settings-card p{font-family:var(--mono); font-size:12px; color:var(--smoke); margin:0 0 14px}
.settings-grid{display:grid; grid-template-columns:1fr 130px; gap:10px 14px; align-items:center}
.settings-grid label{font-family:var(--body); color:var(--chalk)}
.set-input{font-family:var(--mono); background:var(--asphalt); border:1px solid var(--steel); border-radius:8px; color:var(--chalk); padding:9px 11px; text-align:right}
.set-input:focus{outline:0; border-color:var(--amber)}
.mk-row{display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; margin-bottom:8px}
.mb-row{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:8px}
.mb-head{display:grid; grid-template-columns:1fr 1fr; gap:8px; font-family:var(--mono); font-size:11px; color:var(--smoke); text-transform:uppercase; margin:10px 0 6px}
.supplier-row{display:flex; align-items:center; gap:10px; padding:9px 2px; font-family:var(--body); font-size:15px; color:var(--chalk); cursor:pointer}
.supplier-row input{width:17px; height:17px; accent-color:var(--amber)}
.sources-health{font-family:var(--mono); font-size:11px; color:var(--smoke); letter-spacing:.02em}
.sources-health .src-ok{color:var(--green)} .sources-health .src-bad{color:var(--danger); font-weight:700} .sources-health .src-off{color:var(--smoke); opacity:.7}
.mk-head{display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; font-family:var(--mono); font-size:11px; color:var(--smoke); text-transform:uppercase; margin-bottom:6px}
.save-bar{display:flex; gap:14px; align-items:center; margin-top:6px}
.modal.loading .modal-box{max-width:420px; text-align:center}
.modal.loading .modal-close{display:none}
.modal-loading{display:flex; flex-direction:column; align-items:center; gap:18px; padding:14px 6px}
.modal-spinner{width:40px; height:40px; border:3px solid var(--steel); border-top-color:var(--amber); border-radius:50%; animation:spin .7s linear infinite}
.modal-load-text{font-family:var(--body); font-size:16px; color:var(--chalk); line-height:1.45}
.modal-load-sub{font-family:var(--mono); font-size:12px; color:var(--smoke); margin-top:-6px; line-height:1.4}

/* ---- admin table ---- */
.new-quote-cta{display:inline-flex; align-items:center; gap:8px; margin:6px 0 18px; padding:14px 26px;
  font-family:var(--display); font-weight:800; letter-spacing:.02em; font-size:16px; text-decoration:none; color:var(--asphalt);
  background:linear-gradient(180deg,var(--amber-2),var(--amber)); border-radius:12px;
  box-shadow:0 10px 28px -12px rgba(229,169,24,.6); transition:filter .15s, transform .15s}
.new-quote-cta:hover{filter:brightness(1.06); transform:translateY(-2px)}
.admin-filters{max-width:1180px; margin:0 auto 12px; padding:0 clamp(18px,5vw,64px); display:flex; flex-wrap:wrap; gap:8px}
/* status pills (on the white table) */
.st-pill{display:inline-flex; align-items:center; font-family:var(--mono); font-size:10px; font-weight:700; letter-spacing:.08em; padding:3px 9px; border-radius:99px}
.st-order{background:#e6f7ef; color:#10804a} .st-request{background:#fdf3e0; color:#a85b00} .st-quote{background:#eef0f3; color:#5a6068}
.admin-table tr.is-order td{background:#f4fbf7} .admin-table tr.is-order:hover td{background:#eaf7f0}
.admin-wrap{max-width:1180px; margin:8px auto 40px; padding:0 clamp(18px,5vw,64px)}
/* white, readable activity table */
.admin-table{width:100%; border-collapse:collapse; font-family:var(--body); font-size:14px; background:#fff; color:#16181d; border-radius:14px; overflow:hidden; box-shadow:var(--shadow)}
.admin-table th{font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:#5a6068; text-align:left; padding:12px 14px; background:#f1f3f6; border-bottom:1px solid #e2e5ea}
.admin-table td{padding:12px 14px; border-bottom:1px solid #eef0f3; color:#16181d}
.admin-table tbody tr{cursor:pointer; transition:background .12s}
.admin-table tbody tr:hover{background:#fff7e6}
.admin-table tbody tr:last-child td{border-bottom:0}
.admin-table .muted{color:#8a929c}
.admin-table b{color:#16181d}
/* rich detail modal (dark, on-site) */
.adm-item{display:flex; gap:12px; padding:12px; margin:10px 0; border:1px solid var(--steel); border-radius:12px; background:var(--asphalt-2)}
.adm-thumb{width:64px; height:64px; flex:0 0 64px; object-fit:contain; border-radius:8px; background:#fff}
.adm-item-info{min-width:0; font-family:var(--body)}
.adm-item-head{font-size:15px; color:var(--chalk)} .adm-item-head b{color:var(--chalk)}
.adm-kind{font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--amber)}
.adm-spec{font-family:var(--mono); font-size:12px; color:var(--smoke); margin:2px 0}
.adm-meta{font-family:var(--mono); font-size:12px; color:var(--smoke); margin-top:3px}
.adm-meta b{color:var(--chalk)}
.adm-sub{font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--smoke); margin:16px 0 6px}

/* ---- saved/shared quote view ---- */
body.saved #vehicleMode, body.saved #sizeForm, body.saved #chips, body.saved .advisor-switch, body.saved #shareRow{display:none !important}
.saved-header{max-width:1180px; margin:6px auto 0; padding:0 clamp(18px,5vw,64px)}
.saved-header h2{font-family:var(--display); font-weight:800; font-size:clamp(24px,4vw,34px); margin:0 0 4px}
.saved-header p{font-family:var(--mono); font-size:13px; color:var(--smoke); margin:0}
.muted{color:var(--smoke)}

/* ---- customer self-share row ---- */
.share-row{max-width:1180px; margin:8px auto 0; padding:0 clamp(18px,5vw,64px); display:flex; align-items:center; gap:14px; flex-wrap:wrap}
.share-btn{font-family:var(--display); font-weight:800; letter-spacing:.04em; font-size:15px; padding:11px 18px; border:1px solid var(--amber); border-radius:12px; background:rgba(229,169,24,.1); color:var(--amber-2); cursor:pointer; transition:.18s}
.share-btn:hover{background:rgba(229,169,24,.2)}
.share-note{font-family:var(--mono); font-size:12px; color:var(--smoke)}

/* ---- advisor: per-card Good/Better/Best picker ---- */
.pick-row{display:flex; align-items:center; gap:6px; margin-top:6px; flex-wrap:wrap}
.pick-row > span{font-family:var(--mono); font-size:10px; letter-spacing:.1em; color:var(--smoke); text-transform:uppercase}
.pick{font-family:var(--mono); font-size:11px; padding:5px 9px; border-radius:8px; border:1px solid var(--steel); background:transparent; color:var(--smoke); cursor:pointer; transition:.15s}
.pick:hover{color:var(--chalk); border-color:var(--amber)}
.pick.on{background:var(--amber); color:var(--asphalt); border-color:var(--amber); font-weight:700}

/* ---- advisor compose bar ---- */
body.advisor{padding-bottom:128px}
.compose-bar{position:fixed; left:0; right:0; bottom:0; z-index:40; display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  padding:14px clamp(18px,5vw,64px); background:rgba(21,28,46,.97); border-top:2px solid var(--amber); backdrop-filter:blur(8px)}
.compose-label{font-family:var(--mono); font-size:12px; letter-spacing:.16em; color:var(--amber)}
.compose-slots{display:flex; gap:12px; flex:1; flex-wrap:wrap}
.cslot{position:relative; display:flex; align-items:center; gap:11px; min-width:238px; padding:10px 14px; border:1px solid var(--steel); border-left:4px solid var(--steel); border-radius:12px; background:var(--panel)}
.cslot[draggable="true"]{cursor:grab}
.cslot.good{border-left-color:var(--win)} .cslot.better{border-left-color:var(--amber-2)} .cslot.best{border-left-color:var(--amber)}
.cslot.empty{justify-content:center; min-height:66px; border-style:dashed; border-left-style:solid}
.cslot.empty em{font-style:normal; font-family:var(--mono); font-size:12px; color:var(--smoke)}
.cslot.drop{outline:2px dashed var(--amber); outline-offset:2px; background:rgba(229,169,24,.08)}
.cslot-x{position:absolute; top:3px; right:7px; background:none; border:0; color:var(--smoke); font-size:18px; line-height:1; cursor:pointer; padding:0 2px}
.cslot-x:hover{color:var(--danger)}
.card[draggable="true"]{cursor:grab}
.card[draggable="true"] img{ -webkit-user-drag:none; user-drag:none }
.cslot-img{width:50px; height:50px; object-fit:contain; flex-shrink:0; filter:drop-shadow(0 4px 8px rgba(0,0,0,.5))}
.cslot-info{display:flex; flex-direction:column; gap:2px; min-width:0}
.cslot-tier{font-family:var(--mono); font-size:10px; letter-spacing:.12em; color:var(--smoke)}
.cslot.good .cslot-tier{color:var(--win)} .cslot.better .cslot-tier{color:var(--amber-2)} .cslot.best .cslot-tier{color:var(--amber)}
.cslot-name{font-family:var(--body); font-weight:700; font-size:15px; color:var(--chalk); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:180px}
.cslot-nums{font-family:var(--mono); font-size:12px; color:var(--smoke)}
.cslot-nums b{color:var(--chalk); font-weight:600}
.compose-send{font-family:var(--display); font-weight:800; font-size:17px; letter-spacing:.04em; padding:14px 26px; border:0; border-radius:12px; cursor:pointer;
  background:linear-gradient(180deg,#DC2626,#B91C1C); color:#fff}
.compose-send:disabled{opacity:.4; cursor:default}

.foot{display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; max-width:1180px; margin:0 auto;
  padding:26px clamp(18px,5vw,64px) 50px; border-top:1px solid var(--steel); color:var(--smoke); font-size:12px; font-family:var(--mono)}
.foot-quote{color:var(--steel)}

/* ---- brand serif headlines (placed last to override component fonts) ---- */
h1, .hero h1, .others-head, .modal-title, .saved-header h2, .settings-card h3, .kicker + h1{
  font-family:var(--serif); letter-spacing:0}
.hero h1{font-weight:700}
.hero h1 em{font-style:italic; font-weight:600}
.others-head, .saved-header h2{font-weight:700}