/* BluonSearch for distributors: /bluonsearch and its A/B variant /bluonsearch-b.
   From the "Parts You Already Stock" / "SKU List to Sales" exports (11/9). Every class is prefixed bs-
   and everything is scoped under .bs-root (the page's <main>), so nothing collides with bundle.css or
   the nav. The product screens are drawn in the product's own look (Montserrat titles); the page
   itself uses DM Sans / DM Mono and the site's tokens. */
/* Bluon landing-page base: bluon.com's own system (DM Sans 400 headings with tight tracking, DM Mono eyebrows,
   24px bordered cards, pill buttons, floating glass nav, deep-blue glass bands), tuned for long-form product pages.
   Light only, like bluon.com. */
.bs-root{
  color-scheme:light;
  --ink:var(--background-default); --ink-2:rgba(6,6,6,.78); --ink-3:rgba(6,6,6,.56); --ink-4:rgba(6,6,6,.38);
  --line:rgba(6,6,6,.12); --line-2:rgba(6,6,6,.07);
  --bg:var(--contrast-primary); --bg-2:#f6f8fb; --bg-3:var(--background-secondary);
  --blue:var(--brand-primary); --blue-h:#0052cc; --blue-2:var(--background-hover-brand); --blue-t:var(--additional-lightblue); --blue-08:rgba(0,99,242,.08); --blue-16:rgba(0,99,242,.16);
  --navy:#0a2a7a; --navy-2:#05174a;
  --on-dark:#ffffff; --on-dark-2:rgba(255,255,255,.8); --on-dark-3:rgba(255,255,255,.56); --on-dark-4:rgba(255,255,255,.36);
  --glass:rgba(6,6,6,.26); --glass-line:rgba(255,255,255,.14); --glass-2:rgba(255,255,255,.06);
  --ok-t:#e2f6e7; --ok:#0f6f35; --ok-dot:#1fb255;
  --warn-t:#fff1d9; --warn:#8a5300;
  --shadow-1:0 1px 2px rgba(6,6,6,.04),0 8px 24px rgba(6,6,6,.06);
  --shadow-2:0 2px 6px rgba(6,6,6,.04),0 28px 70px rgba(6,6,6,.13);
  --ease:cubic-bezier(.22,.8,.28,1);
  --r-s:12px; --r-m:16px; --r-l:24px;
  --sans:"DM Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"DM Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
.bs-root,.bs-root *{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:96px}
.bs-root{position:relative;isolation:isolate;background:var(--bg);color:var(--ink);font:400 18px/1.55 var(--sans);font-optical-sizing:auto;-webkit-font-smoothing:antialiased;overflow-x:clip}
:where(.bs-root) a{color:inherit;text-decoration:none}
:where(.bs-root) p{margin:0}
:where(.bs-root) h1,:where(.bs-root) h2,:where(.bs-root) h3,:where(.bs-root) h4{margin:0;font-weight:400;text-wrap:balance;color:inherit;letter-spacing:normal;line-height:inherit}
.bs-wrap{max-width:1240px;margin-inline:auto;padding-inline:clamp(16px,4vw,40px)}
.bs-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* type */
.bs-eyebrow{font:500 12.5px/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--blue)}
.bs-eyebrow.bs-mute{color:var(--ink-3)}
.bs-display{font-size:clamp(42px,5.4vw,72px);line-height:1.1;letter-spacing:-.02em}
.bs-h2{font-size:clamp(32px,3.6vw,48px);line-height:1.15;letter-spacing:-.018em}
.bs-h3{font-size:clamp(20px,1.6vw,23px);line-height:1.3;letter-spacing:-.008em}
.bs-lede{font-size:clamp(18px,1.45vw,20px);line-height:1.6;color:var(--ink-2);max-width:34em}
.bs-body{color:var(--ink-2)}
.bs-fine{font:400 12.5px/1.5 var(--mono);letter-spacing:.02em;color:var(--ink-3)}
.bs-num{font-variant-numeric:tabular-nums}

/* buttons */
.bs-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;height:52px;padding:0 24px;border-radius:999px;font:500 16px/1 var(--sans);letter-spacing:0;white-space:nowrap;border:1px solid transparent;cursor:pointer;transition:background-color .25s ease,border-color .25s ease,color .25s ease,transform .15s ease}
.bs-btn:active{transform:translateY(1px)}
.bs-btn:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.bs-btn-primary{background:var(--blue);color:#fff}
.bs-btn-primary:hover{background:var(--blue-h)}
.bs-btn-ghost{border-color:rgba(6,6,6,.16);color:var(--ink);background:transparent}
.bs-btn-ghost:hover{background:rgba(6,6,6,.05)}
.bs-btn-white{background:#fff;color:var(--ink)}
.bs-btn-white:hover{background:var(--blue-t)}
.bs-btn-glass{border-color:rgba(255,255,255,.28);color:#fff}
.bs-btn-glass:hover{background:rgba(255,255,255,.1)}
.bs-btn.bs-sm{height:40px;padding:0 18px;font-size:15px}
.bs-roll{display:block;height:1.2em;line-height:1.2em;overflow:hidden}
.bs-roll>span{display:block;transition:transform .35s var(--ease)}
.bs-btn:hover .bs-roll>span{transform:translateY(-100%)}
.bs-btn .bs-arr{width:15px;height:15px;flex:none;transition:transform .35s var(--ease)}
.bs-btn:hover .bs-arr{transform:translateX(3px)}
.bs-cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px}















/* surfaces */
.bs-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-l)}
.bs-section{padding-block:clamp(72px,10vw,136px)}
.bs-section.bs-tight{padding-block:clamp(48px,7vw,88px)}
.bs-head{display:grid;gap:16px;max-width:46rem}
.bs-head.bs-center{margin-inline:auto;text-align:center;justify-items:center}

/* deep-blue band, after bluon.com's hn2-dark */
.bs-dark{position:relative;color:var(--on-dark);background:
  radial-gradient(60% 70% at 85% 0%,rgba(51,135,255,.42),transparent 62%),
  radial-gradient(55% 65% at 0% 100%,rgba(0,99,242,.38),transparent 60%),
  radial-gradient(40% 40% at 50% 55%,rgba(10,42,122,.6),transparent 70%),
  linear-gradient(180deg,var(--navy),var(--navy-2));overflow:hidden}
.bs-dark .bs-eyebrow{color:var(--on-dark-3)}
.bs-dark .bs-lede,.bs-dark .bs-body{color:var(--on-dark-2)}
.bs-dark .bs-fine{color:var(--on-dark-3)}
.bs-glass{background:var(--glass);border:1px solid var(--glass-line);border-radius:var(--r-l);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}

/* status pills */
.bs-pill{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:999px;font:500 12.5px/1 var(--sans);letter-spacing:-.005em;white-space:nowrap}
.bs-pill.bs-blue{background:var(--blue-08);color:var(--blue)}
.bs-pill.bs-ok{background:var(--ok-t);color:var(--ok)}
.bs-pill.bs-warn{background:var(--warn-t);color:var(--warn)}
.bs-pill.bs-mute{background:var(--bg-3);color:var(--ink-2)}
.bs-pill .bs-dot{width:6px;height:6px;border-radius:50%;background:currentColor}

/* FAQ rows, after bluon.com's business-case rows */
.bs-faq{display:grid;gap:12px}
.bs-faq details{background:#fff;border:1px solid var(--line);border-radius:var(--r-l);transition:border-color .25s ease}
.bs-faq details:hover,.bs-faq details[open]{border-color:var(--blue)}
.bs-faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 26px;font-size:clamp(18px,1.5vw,21px);letter-spacing:-.02em}
.bs-faq summary::-webkit-details-marker{display:none}
.bs-faq summary:focus-visible{outline:2px solid var(--blue);outline-offset:-2px;border-radius:var(--r-l)}
.bs-faq .bs-chev{flex:none;width:32px;height:32px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;color:var(--ink-3);transition:transform .25s ease,background-color .25s ease,color .25s ease,border-color .25s ease}
.bs-faq .bs-chev svg{width:12px;height:12px}
.bs-faq details:hover .bs-chev,.bs-faq details[open] .bs-chev{background:var(--blue);border-color:var(--blue);color:#fff}
.bs-faq details[open] .bs-chev{transform:rotate(180deg)}
.bs-faq .bs-a{padding:0 26px 24px;color:var(--ink-2);max-width:44em}

/* logo row */
.bs-logos{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:clamp(12px,2.4vw,36px);align-items:center;color:var(--ink);opacity:.62}
.bs-logos span{display:block}
.bs-logos svg{display:block;width:100%;height:auto;max-height:64px}

/* footer */




/* reveal on scroll (only below-the-fold items are hidden, and only once JS runs) */



@media (max-width:860px){
  
  .bs-logos{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width:560px){
  .bs-root{font-size:17px}
  
  .bs-btn{height:50px;padding:0 20px}
  .bs-faq summary{padding:18px 18px}
  .bs-faq .bs-a{padding:0 18px 20px}
}
@media (prefers-reduced-motion:reduce){
  
  .bs-roll>span,.bs-btn .bs-arr,.bs-btn{transition:none}
}

/* Round 10 (11/3): the BluonSearch page for distributors, rebuilt from research on what each product is.
   The page speaks bluon.com (DM Sans, pill buttons, one deep-blue band). The pictures are the real BluonSearch,
   Parts Finder Plug-In, Master Mechanic and PartsConnect screens, rebuilt in the product's own look: Montserrat
   titles, grey canvas, white cards, "Original Part", "Compatible Parts Available for Purchase", replacement score
   bars. Content only: bluon.com brings the header and footer. */

.bs-root{
  --ui-blue:#1b5ff5; --ui-blue-t:#e8efff; --ui-canvas:#f2f4f7; --ui-line:#e3e7ee; --ui-ink:#1d2533; --ui-ink-2:#4a5568;
  --ui-ink-3:#8a93a3; --ui-ok:#0f8a46; --ui-ok-t:#e2f5e9; --ui-na:#e6e9ee; --ui-shop:#c45a12; --ui-shop-t:#fdf0e6;
  --ui-title:"Montserrat",var(--sans);
}

/* page rhythm */
.bs-sec{padding-block:clamp(56px,7vw,104px)}
.bs-sec.bs-tight{padding-top:0}
.bs-sec.bs-strip{padding-block:0}
.bs-kicker{font:500 14.5px/1.2 var(--sans);color:var(--blue)}
.bs-sh{display:grid;gap:16px;max-width:44rem}
.bs-sh p{font-size:clamp(17px,1.35vw,19px);line-height:1.6;color:var(--ink-2);text-wrap:pretty;max-width:34em}
.bs-newtag{display:inline-flex;align-items:center;height:20px;padding:0 8px;border-radius:999px;background:var(--blue);color:#fff;font:500 11.5px/1 var(--sans);vertical-align:3px;margin-left:6px}

/* hero */
.bs-h10{position:relative;padding-block:clamp(28px,5vw,72px) clamp(64px,8vw,112px)}
.bs-h10::before{content:"";position:absolute;inset:-120px 0 auto;height:760px;z-index:-1;pointer-events:none;background:radial-gradient(42% 52% at 76% 38%,rgba(0,99,242,.11),transparent 70%)}
.bs-h10 .bs-grid{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(36px,5vw,72px);align-items:center}
.bs-h10 .bs-copy{display:grid;gap:22px;justify-items:start}
.bs-h10 .bs-display{font-size:clamp(40px,4.6vw,64px)}
.bs-h10 .bs-display span{display:block}
.bs-h10 .bs-lede{max-width:29em}
.bs-ex{font:400 13.5px/1.4 var(--sans);color:var(--ink-3);margin-top:12px}

/* the picture: today's search behind, BluonSearch in front */
.bs-pic{position:relative;padding:92px 0 0 56px}
.bs-today{position:absolute;left:0;top:0;width:min(70%,400px);padding:12px 14px 40px;border-radius:16px;background:#f6f7f9;border:1px solid var(--line);box-shadow:0 1px 2px rgba(6,6,6,.04),0 10px 28px rgba(6,6,6,.06);display:grid;gap:12px}
.bs-today .bs-lbl{font:500 13px/1 var(--sans);color:var(--ink-3)}
.bs-today .bs-nr{display:inline-flex;align-items:center;gap:6px;margin-left:auto;padding-right:8px;font:500 13px/1 var(--sans);color:#b42318;white-space:nowrap}
.bs-today .bs-nr svg{width:15px;height:15px;flex:none}
.bs-pic .bs-ui-win{position:relative;z-index:1}

/* product UI */
.bs-ui{font-family:var(--sans);color:var(--ui-ink);font-size:14px;line-height:1.35}
.bs-ui-win{background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow-2);overflow:hidden}
.bs-ui-top{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;padding:0 18px;background:#fff;border-bottom:1px solid var(--ui-line)}
.bs-ui-brand{font:700 13px/1 var(--ui-title);color:var(--ui-blue);padding:14px 0;letter-spacing:-.01em}
.bs-ui-tabs{display:flex;gap:4px}
.bs-ui-tabs span{padding:13px 12px 11px;font:600 13px/1 var(--ui-title);color:var(--ui-ink-3);border-bottom:2px solid transparent;white-space:nowrap}
.bs-ui-tabs span.bs-on{color:var(--ui-blue);border-bottom-color:var(--ui-blue);background:var(--ui-blue-t);border-radius:8px 8px 0 0}
.bs-ui-body{background:var(--ui-canvas);padding:14px;display:grid;gap:12px}
.bs-ui-search{display:flex;align-items:center;gap:10px;height:44px;padding:0 6px 0 14px;border-radius:999px;background:#fff;border:1.5px solid var(--ui-blue);font-size:15px;color:var(--ui-ink)}
.bs-ui-search.bs-plain{border-color:var(--ui-line)}
.bs-ui-search svg{width:17px;height:17px;color:var(--ui-ink-3);flex:none}
.bs-ui-search .bs-q{flex:1;min-width:0;white-space:nowrap;overflow:hidden}
.bs-ui-search .bs-scan{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border-radius:999px;background:var(--ui-blue);color:#fff;font:600 12.5px/1 var(--ui-title)}
.bs-ui-search .bs-scan svg{width:15px;height:15px;color:#fff}
.bs-ui-res{display:grid;gap:12px}
.bs-ui-back{font:600 12.5px/1 var(--ui-title);color:var(--ui-blue);padding:6px 4px 2px}
.bs-ui-card{background:#fff;border-radius:12px;padding:16px 18px;display:grid;gap:12px}
.bs-ui-h{font:600 15px/1.25 var(--ui-title);color:var(--ui-ink);display:flex;align-items:center;gap:8px}
.bs-ui-count{display:inline-flex;align-items:center;justify-content:center;min-width:26px;height:26px;padding:0 7px;border-radius:999px;background:var(--ui-blue-t);color:var(--ui-ink);font:600 12.5px/1 var(--ui-title)}
.bs-ui-hrow{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px}
.bs-ui-filter{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 11px;border-radius:999px;background:var(--ui-ok-t);color:var(--ui-ok);font:600 12px/1 var(--ui-title)}
.bs-ui-filter::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.bs-ui-img{width:44px;height:44px;border-radius:10px;background:#f3f5f8;border:1px solid var(--ui-line);display:flex;align-items:center;justify-content:center;flex:none;color:#2b3445}
.bs-ui-img svg{width:24px;height:24px}
.bs-ui-orig{display:flex;gap:14px;align-items:flex-start}
.bs-ui-orig div{display:grid;gap:5px;min-width:0}
.bs-ui-orig b{font:600 14px/1.3 var(--ui-title)}
.bs-ui-orig span{font-size:13px;color:var(--ui-ink-2)}
.bs-ui-orig i,.bs-ui-rep i.bs-sep{font-style:normal;color:var(--ui-ink-3);margin:0 6px}
.bs-ui-na{justify-self:start;display:inline-flex;align-items:center;height:24px;padding:0 11px;border-radius:999px;background:var(--ui-na);color:#9aa2b1!important;font:600 11.5px/1 var(--ui-title)}
.bs-ui-rep{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:4px 12px;align-items:center;padding-top:12px;border-top:1px solid var(--ui-line)}
.bs-ui-rep .bs-w{display:grid;gap:5px;min-width:0}
.bs-ui-rep b{font:600 13.5px/1.25 var(--ui-title)}
.bs-ui-rep b span{font-weight:500;color:var(--ui-ink-2)}
.bs-sc{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:var(--ui-ink-2)}
.bs-bars{display:inline-flex;gap:2px}
.bs-bars b{width:3px;height:12px;border-radius:1px;background:var(--ui-blue)}
.bs-bars b.bs-off{background:#cfd8ea}
.bs-ui-cat{display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:999px;background:var(--ui-ok-t);color:var(--ui-ok);font:600 11.5px/1 var(--ui-title);white-space:nowrap}
.bs-ui-3p{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 14px;padding:11px 12px;border-radius:10px;background:var(--ui-blue-t);font-size:13px;color:var(--ui-ink)}
.bs-ui-3p b{font-family:var(--ui-title);font-weight:600}
.bs-ui-3p .bs-who{display:flex;flex-wrap:wrap;gap:6px}
.bs-ui-3p .bs-who span{display:inline-flex;align-items:center;height:24px;padding:0 9px;border-radius:999px;background:#fff;color:var(--ui-blue);font:600 11.5px/1 var(--ui-title)}

/* the database, in numbers */
.bs-facts10{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.bs-facts10 div{display:grid;gap:6px;padding:24px 22px;border-left:1px solid var(--line)}
.bs-facts10 div:first-child{border-left:0;padding-left:0}
.bs-facts10 b{font-weight:400;font-size:clamp(30px,3.2vw,44px);line-height:1;letter-spacing:-.035em}
.bs-facts10 span{font-size:15px;color:var(--ink-3)}
.bs-facts-cap{font:500 14.5px/1 var(--sans);color:var(--ink-3);margin-bottom:16px}
.bs-sec.bs-strip+.bs-sec{padding-top:clamp(72px,8vw,112px)}

/* the counter: three steps of one lookup */
.bs-flow3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.2vw,28px);margin-top:clamp(36px,4.5vw,56px)}
.bs-fstep3{display:grid;grid-template-rows:auto 1fr;gap:18px}
.bs-fstep3 .bs-cap{display:grid;gap:6px}
.bs-fstep3 .bs-cap .bs-n{font:500 14px/1 var(--sans);color:var(--blue)}
.bs-fstep3 .bs-cap b{font-weight:500;font-size:19px;letter-spacing:-.012em}
.bs-fstep3 .bs-cap span{font-size:15.5px;line-height:1.5;color:var(--ink-2);text-wrap:pretty}
.bs-fstep3 .bs-ui-win{box-shadow:0 1px 2px rgba(6,6,6,.04),0 16px 40px rgba(6,6,6,.08)}
.bs-fstep3 .bs-ui-body{min-height:250px;align-content:start}
.bs-ui-sugg{list-style:none;margin:0;padding:0;background:#fff;border-radius:12px;display:grid}
.bs-ui-sugg li{display:grid;gap:3px;padding:11px 14px;border-top:1px solid var(--ui-line)}
.bs-ui-sugg li:first-child{border-top:0}
.bs-ui-sugg b{font:600 13.5px/1.2 var(--ui-title)}
.bs-ui-sugg span{font-size:12.5px;color:var(--ui-ink-3)}
.bs-ui-model{display:flex;align-items:center;gap:12px}
.bs-ui-model div{display:grid;gap:3px}
.bs-ui-model b{font:700 16px/1.1 var(--ui-title)}
.bs-ui-model span{font-size:12.5px;color:var(--ui-ink-2)}
.bs-ui-chips{display:flex;flex-wrap:wrap;gap:6px}
.bs-ui-chips span{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border-radius:999px;background:#fff;border:1px solid var(--ui-line);font:600 12px/1 var(--ui-title);color:var(--ui-ink-2)}
.bs-ui-chips svg{width:14px;height:14px;color:var(--ui-blue)}
.bs-ui-list{list-style:none;margin:0;padding:0;display:grid;background:#fff;border-radius:12px}
.bs-ui-list li{display:flex;align-items:center;gap:10px;padding:10px 14px;border-top:1px solid var(--ui-line);font:600 13px/1.2 var(--ui-title)}
.bs-ui-list li:first-child{border-top:0}
.bs-ui-list li svg{width:18px;height:18px;color:var(--ui-ink-2);flex:none}
.bs-ui-list li em{margin-left:auto;font:500 12px/1 var(--sans);font-style:normal;color:var(--ui-ink-3)}

/* rows: words on one side, the screen on the other */
.bs-row10{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:clamp(36px,5vw,80px);align-items:center}
.bs-row10.bs-flip{grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr)}
.bs-row10.bs-flip>.bs-t{order:2}
.bs-row10>.bs-t{display:grid;gap:16px;align-content:center}
.bs-row10>.bs-t p{font-size:clamp(17px,1.35vw,19px);line-height:1.6;color:var(--ink-2);max-width:30em;text-wrap:pretty}
.bs-row10>.bs-t .bs-fine2{font-size:15.5px;line-height:1.55;color:var(--ink-3)}
.bs-dark .bs-row10>.bs-t p{color:var(--on-dark-2)}
.bs-dark .bs-row10>.bs-t .bs-fine2{color:var(--on-dark-3)}
.bs-dark .bs-row10 .bs-h2{color:#fff}
.bs-dark .bs-kicker{color:#8db8ff}

/* your website with the Plug-In inside */
.bs-store{background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow-2);overflow:hidden}
.bs-store-bar{display:flex;align-items:center;gap:8px;padding:10px 14px;background:#eef1f5;border-bottom:1px solid var(--line-2)}
.bs-store-bar i{width:9px;height:9px;border-radius:50%;background:#d5dae2}
.bs-store-bar span{margin-left:8px;flex:1;max-width:260px;height:26px;border-radius:999px;background:#fff;border:1px solid var(--line);font:400 12px/26px var(--sans);color:var(--ink-3);padding:0 12px}
.bs-store-head{display:flex;align-items:center;gap:14px;padding:12px 16px;border-bottom:1px solid var(--ui-line)}
.bs-store-head .bs-logo{display:inline-flex;align-items:center;gap:8px;font:700 14px/1 var(--ui-title);color:var(--ui-ink);white-space:nowrap}
.bs-store-head .bs-logo i{width:22px;height:22px;border-radius:6px;background:var(--ui-shop)}
.bs-store-head .bs-ssearch{flex:1;min-width:0;height:34px;border-radius:999px;border:1px solid var(--ui-line);font-size:12.5px;line-height:32px;color:var(--ui-ink-3);padding:0 14px;white-space:nowrap;overflow:hidden}
.bs-store-head .bs-cart{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border-radius:999px;background:var(--ui-shop);color:#fff;font:600 12px/1 var(--ui-title)}
.bs-store-head .bs-cart svg{width:15px;height:15px}
.bs-store .bs-plug{margin:14px;border:1px solid var(--ui-line);border-radius:14px;overflow:hidden;background:#fff}
.bs-plug-head{display:flex;align-items:center;gap:12px;padding:14px 16px 6px}
.bs-plug-head div{display:grid;gap:3px}
.bs-plug-head b{font:700 15.5px/1.2 var(--ui-title)}
.bs-plug-head b em{font-style:italic;color:var(--ui-shop)}
.bs-plug-head span{font-size:12.5px;color:var(--ui-ink-2)}
.bs-store .bs-ui-tabs{padding:0 16px}
.bs-store .bs-ui-tabs span.bs-on{color:var(--ui-shop);border-bottom-color:var(--ui-shop);background:var(--ui-shop-t)}
.bs-store .bs-ui-body{border-top:1px solid var(--ui-line)}
.bs-store .bs-ui-search{border-color:var(--ui-shop)}
.bs-store .bs-ui-count{background:var(--ui-shop-t)}
.bs-shop-btn{display:inline-flex;align-items:center;height:28px;padding:0 12px;border-radius:999px;background:var(--ui-shop);color:#fff;font:600 11.5px/1 var(--ui-title);white-space:nowrap}
.bs-store .bs-bars b{background:var(--ui-shop)}

/* Master Mechanic */
.bs-mm10{background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow-2);overflow:hidden;font-size:14px}
.bs-mm-top{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--ui-line);font:600 14px/1.2 var(--ui-title)}
.bs-mm-top svg{width:18px;height:18px;color:var(--ui-ink-2);flex:none}
.bs-mm-body{padding:16px 18px;display:grid;gap:12px}
.bs-mm-found{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ui-ink-3)}
.bs-mm-found svg{width:15px;height:15px}
.bs-mm-who{display:flex;align-items:center;gap:8px;font:600 13.5px/1 var(--ui-title)}
.bs-mm-who i{width:24px;height:24px;border-radius:50%;background:var(--ui-blue);color:#fff;display:flex;align-items:center;justify-content:center;font-style:normal}
.bs-mm-who i svg{width:14px;height:14px}
.bs-mm-bub{justify-self:start;max-width:92%;padding:11px 14px;border-radius:14px;background:#f4f5f7;font-size:14.5px;line-height:1.45;text-wrap:pretty}
.bs-mm-bub.bs-ans{background:var(--ui-blue-t)}
.bs-mm-card{display:grid;grid-template-columns:52px minmax(0,1fr);gap:4px 14px;padding:14px;border:1px solid var(--ui-line);border-radius:14px}
.bs-mm-card .bs-ui-img{grid-row:1 / 3;width:52px;height:52px}
.bs-mm-card b{font:700 15px/1.2 var(--ui-title)}
.bs-mm-card .bs-type{justify-self:start;display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:999px;background:var(--ui-blue-t);color:var(--ui-blue);font:600 11.5px/1 var(--ui-title)}
.bs-mm-stats{grid-column:1 / -1;display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:8px}
.bs-mm-stats span{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:var(--ui-ink-2)}
.bs-mm-stats svg{width:16px;height:16px;color:var(--ui-blue)}
.bs-mm-chips{display:flex;flex-wrap:wrap;gap:6px}
.bs-mm-chips span{display:inline-flex;align-items:center;height:30px;padding:0 12px;border-radius:999px;border:1px solid var(--ui-line);font-size:12.5px;color:var(--ui-ink-2);background:#fff}
.bs-mm-chips span.bs-on{border-color:var(--ui-blue);color:var(--ui-blue);background:var(--ui-blue-t)}
.bs-mm-ask{display:flex;align-items:center;gap:8px;margin:2px 18px 16px;padding:8px 8px 8px 14px;border:1px solid var(--ui-line);border-radius:16px;color:var(--ui-ink-3);font-size:13.5px}
.bs-mm-ask span.bs-f{flex:1}
.bs-mm-ask em{font-style:normal;display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border-radius:999px;border:1px solid var(--ui-blue);color:var(--ui-blue);font:600 11.5px/1 var(--ui-title)}
.bs-mm-ask em svg{width:13px;height:13px}
.bs-mm-ask i{width:30px;height:30px;border-radius:50%;border:1px solid var(--ui-line);display:flex;align-items:center;justify-content:center}
.bs-mm-ask i svg{width:15px;height:15px}

/* PartsConnect, in the Bluon app */
.bs-phone3{width:300px;max-width:100%;margin-inline:auto;padding:10px;border-radius:44px;background:#05080f;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1),0 40px 90px rgba(0,0,0,.4)}
.bs-phone3 .bs-scr{border-radius:35px;background:var(--ui-canvas);color:var(--ui-ink);overflow:hidden;display:flex;flex-direction:column;min-height:480px;font-size:14px}
.bs-phone3 .bs-notch{height:34px;display:flex;align-items:center;justify-content:center;background:#fff}
.bs-phone3 .bs-notch i{width:92px;height:24px;border-radius:14px;background:#05080f}
.bs-phone3 .bs-apptop{display:flex;align-items:center;justify-content:space-between;padding:4px 16px 12px;background:#fff;border-bottom:1px solid var(--ui-line)}
.bs-phone3 .bs-apptop b{font:700 17px/1 var(--ui-title);color:var(--ui-blue);letter-spacing:-.03em}
.bs-phone3 .bs-apptop span{width:18px;height:2px;background:var(--ui-ink-3);box-shadow:0 5px 0 var(--ui-ink-3),0 -5px 0 var(--ui-ink-3)}
.bs-phone3 .bs-pcard3{margin:12px;padding:14px;border-radius:14px;background:#fff;display:grid;gap:8px}
.bs-phone3 .bs-pcard3 b{font:600 14.5px/1.3 var(--ui-title)}
.bs-phone3 .bs-pcard3 span{font-size:12.5px;color:var(--ui-ink-2)}
.bs-phone3 .bs-avail{justify-self:start;display:inline-flex;align-items:center;height:30px;padding:0 13px;border-radius:999px;background:#0b0f17;color:#fff;font:600 12px/1 var(--ui-title)}
.bs-phone3 .bs-lbl3{padding:6px 16px 8px;font:600 13px/1 var(--ui-title);color:var(--ui-ink)}
.bs-sup3{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 10px;align-items:center;margin:0 12px 8px;padding:12px 14px;border-radius:14px;background:#fff;border:1px solid var(--ui-line)}
.bs-sup3 b{font:600 13.5px/1.2 var(--ui-title)}
.bs-sup3 span{font-size:12.5px;color:var(--ui-ink-3)}
.bs-sup3 .bs-ui-cat{grid-column:2;grid-row:1 / 3}
.bs-sup3.bs-you{border:1.5px solid var(--ui-blue);box-shadow:0 0 0 4px rgba(27,95,245,.12)}
.bs-sup3.bs-dim b{color:var(--ui-ink-3);font-weight:500}
.bs-phone3 .bs-go3{margin:auto 12px 16px;height:46px;border-radius:999px;background:var(--ui-blue);color:#fff;display:flex;align-items:center;justify-content:center;font:600 14px/1 var(--ui-title)}

/* getting started */
.bs-steps10{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,40px);margin-top:clamp(32px,4vw,48px)}
.bs-steps10 div{display:grid;gap:10px;align-content:start;padding-top:20px;border-top:2px solid var(--ink)}
.bs-steps10 .bs-n{font:500 14.5px/1 var(--sans);color:var(--blue)}
.bs-steps10 b{font-weight:400;font-size:clamp(22px,2vw,27px);line-height:1.2;letter-spacing:-.02em}
.bs-steps10 span{font-size:16px;line-height:1.55;color:var(--ink-2);text-wrap:pretty}

/* close */
.bs-close10{display:grid;grid-template-columns:minmax(0,1.1fr) auto;gap:24px 48px;align-items:end;padding:clamp(36px,5vw,64px);border-radius:28px;background:#f4f6f9}
.bs-close10 .bs-t{display:grid;gap:14px}
.bs-close10 p{font-size:clamp(17px,1.35vw,19px);line-height:1.6;color:var(--ink-2);max-width:34em;text-wrap:pretty}
.bs-close10 .bs-also{font-size:15px;color:var(--ink-3)}

/* motion */
.bs-ui .bs-in{animation:bs-rowIn .45s var(--ease) both}
@keyframes bs-rowIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.bs-caret{display:inline-block;width:2px;height:17px;background:var(--ui-blue);vertical-align:-3px;margin-left:1px;animation:bs-blink 1s steps(2) infinite}
@keyframes bs-blink{50%{opacity:0}}

@media (max-width:1099px){
  .bs-h10 .bs-grid,.bs-row10,.bs-row10.bs-flip{grid-template-columns:minmax(0,1fr)}
  .bs-row10.bs-flip>.bs-t{order:0}
  .bs-h10 .bs-copy{max-width:640px}
  .bs-pic{max-width:640px}
  .bs-facts10{grid-template-columns:repeat(3,minmax(0,1fr))}
  .bs-facts10 div:nth-child(4){border-left:0;padding-left:0}
  .bs-facts10 div:nth-child(n+4){border-top:1px solid var(--line)}
}
@media (max-width:899px){
  .bs-flow3{grid-template-columns:minmax(0,1fr);max-width:560px}
}
@media (max-width:760px){
  .bs-steps10{grid-template-columns:minmax(0,1fr)}
  .bs-close10{grid-template-columns:minmax(0,1fr);align-items:start}
}
@media (max-width:560px){
  .bs-pic{padding:0}
  .bs-today{position:relative;width:auto;margin-bottom:-12px;padding-bottom:24px}
  .bs-facts10{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bs-facts10 div{padding:18px 14px}
  .bs-facts10 div:nth-child(n){border-left:1px solid var(--line);padding-left:14px;border-top:1px solid var(--line)}
  .bs-facts10 div:nth-child(odd){border-left:0;padding-left:0}
  .bs-facts10 div:nth-child(-n+2){border-top:0}
  .bs-ui-rep{grid-template-columns:40px minmax(0,1fr)}
  .bs-ui-rep .bs-ui-img{width:40px;height:40px}
  .bs-ui-rep .bs-ui-cat,.bs-ui-rep .bs-shop-btn{grid-column:2;justify-self:start}
  .bs-ui-tabs span{padding:12px 9px 10px;font-size:12px}
  .bs-ui-brand{display:none}
  .bs-store-head .bs-ssearch{display:none}
  .bs-close10 .bs-btn{width:100%}
  .bs-h10 .bs-copy .bs-btn{width:100%}
}
@media (prefers-reduced-motion:reduce){.bs-ui .bs-in{animation:none}.bs-caret{animation:none}}

/* 3rd Party Options: who carries it when you don't */
.bs-ui-sup{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:3px 10px;align-items:center;padding:11px 0;border-top:1px solid var(--ui-line)}
.bs-ui-sup b{font:600 13.5px/1.2 var(--ui-title)}
.bs-ui-sup span{font-size:12.5px;color:var(--ui-ink-3)}
.bs-ui-sup em{grid-column:2;grid-row:1 / 3;font-style:normal;display:inline-flex;align-items:center;height:28px;padding:0 12px;border-radius:999px;background:var(--ui-blue);color:#fff;font:600 11.5px/1 var(--ui-title);white-space:nowrap}
.bs-ui-sup.bs-no b{color:var(--ui-ink-3);font-weight:500}
.bs-ui-sup.bs-no em{background:transparent;color:var(--ui-ink-3);box-shadow:inset 0 0 0 1px var(--ui-line)}
.bs-ui-sub2{font:600 12.5px/1 var(--ui-title);color:var(--ui-ink-2);margin-top:2px}

/* Round 13 (11/3 offers call with Pete): the "easy button" page. Step 1, send us your SKUs. Step 2, sell more parts.
   Bluon for distributors is three equal offers on one catalog match: a parts finder for the counter (BluonSearch),
   a parts finder for the website (Parts Finder Plug-In) and tech support for the Pros (Master Mechanic), plus the
   PartsConnect listing. Value first, then the screens, then how little the distributor does. No pricing. Static. */

/* hero: the two steps */
.bs-h13{position:relative;padding-block:clamp(28px,5vw,72px) clamp(64px,8vw,104px)}
.bs-h13::before{content:"";position:absolute;inset:-120px 0 auto;height:860px;z-index:-1;pointer-events:none;background:radial-gradient(46% 52% at 50% 36%,rgba(0,99,242,.10),transparent 72%)}
.bs-h13 .bs-copy{display:grid;gap:22px;justify-items:center;text-align:center;max-width:900px;margin:0 auto}
.bs-h13 .bs-display{font-size:clamp(42px,5.6vw,76px)}
.bs-h13 .bs-display span{display:block}
.bs-h13 .bs-lede{max-width:34em}
.bs-easy{display:grid;grid-template-columns:minmax(0,1fr) 150px minmax(0,1fr);gap:16px;align-items:center;max-width:1120px;margin:clamp(44px,5.5vw,72px) auto 0}
.bs-st{display:grid;gap:16px;align-content:start;padding:clamp(18px,2vw,24px);border-radius:24px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-2);min-width:0}
.bs-st-h{display:grid;gap:6px}
.bs-st-n{font:500 12.5px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--blue)}
.bs-st-h b{font-weight:400;font-size:clamp(22px,2vw,26px);line-height:1.2;letter-spacing:-.018em}
.bs-csv{border:1px solid var(--ui-line);border-radius:14px;overflow:hidden;background:#fff}
.bs-csv-top{display:flex;align-items:center;gap:10px;padding:11px 14px;background:var(--ui-canvas);border-bottom:1px solid var(--ui-line)}
.bs-csv-top svg{width:18px;height:18px;color:var(--ui-ok);flex:none}
.bs-csv-top b{font:600 13.5px/1.2 var(--ui-title);color:var(--ui-ink)}
.bs-csv-top span{margin-left:auto;font-size:12.5px;color:var(--ui-ink-3);white-space:nowrap}
.bs-csv-wrap{overflow-x:auto}
.bs-csv table{width:100%;border-collapse:collapse;font:400 12.5px/1.35 var(--mono);color:var(--ui-ink)}
.bs-csv th{font:600 11.5px/1 var(--ui-title);letter-spacing:.02em;text-transform:uppercase;color:var(--ui-ink-3);text-align:left;padding:10px 14px 8px}
.bs-csv td{padding:9px 14px;border-top:1px solid var(--ui-line);white-space:nowrap}
.bs-csv td:nth-child(2){white-space:normal;min-width:150px}
.bs-csv tr.bs-more td{color:var(--ui-ink-3)}
.bs-mid{display:grid;justify-items:center;gap:10px;text-align:center}
.bs-mid i{width:52px;height:52px;border-radius:50%;background:var(--blue);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 8px var(--blue-08)}
.bs-mid i svg{width:22px;height:22px}
.bs-mid span{font-size:14px;line-height:1.4;color:var(--ink-2)}
.bs-gets{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.bs-gets li{display:grid;grid-template-columns:40px minmax(0,1fr);gap:2px 12px;align-items:center;padding:12px 14px;border-radius:14px;background:var(--ui-canvas)}
.bs-gets li i{grid-row:1 / 3;width:40px;height:40px;border-radius:12px;background:#fff;border:1px solid var(--ui-line);display:flex;align-items:center;justify-content:center;color:var(--blue)}
.bs-gets li i svg{width:20px;height:20px}
.bs-gets li b{font-weight:500;font-size:16px;line-height:1.25}
.bs-gets li span{font-size:13px;color:var(--ink-3)}

/* step 2: three equal offers */
.bs-offers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:clamp(32px,4vw,48px)}
.bs-offer{display:grid;grid-row:span 2;grid-template-rows:subgrid;gap:22px;padding:clamp(20px,2.2vw,28px);border-radius:24px;background:#f4f6f9;min-width:0}
.bs-o-t{display:grid;gap:10px;align-content:start}
.bs-o-tag{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font:500 14px/1.2 var(--sans);color:var(--blue)}
.bs-o-tag em{font-style:normal;color:var(--ink-3)}
.bs-offer h3{font-size:clamp(23px,2.1vw,28px);line-height:1.2;letter-spacing:-.02em}
.bs-offer p.bs-d{font-size:16px;line-height:1.55;color:var(--ink-2);text-wrap:pretty}
.bs-o-pic{display:flex;flex-direction:column;justify-content:flex-end;min-width:0}
.bs-o-pic .bs-ui-win,.bs-o-pic .bs-store,.bs-o-pic .bs-mm10{box-shadow:0 1px 2px rgba(6,6,6,.04),0 14px 34px rgba(6,6,6,.08)}
.bs-o-pic .bs-ui-rep{grid-template-columns:44px minmax(0,1fr)}
.bs-o-pic .bs-ui-rep .bs-ui-cat,.bs-o-pic .bs-ui-rep .bs-shop-btn{grid-column:2;justify-self:start}
.bs-o-pic .bs-ui-brand{display:none}
.bs-o-pic .bs-store-head{justify-content:space-between}
.bs-o-pic .bs-store .bs-plug{margin:10px}
.bs-o-pic .bs-mm-body{padding:14px}
.bs-plus{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:28px;align-items:center;margin-top:20px;padding:clamp(22px,2.6vw,34px);border-radius:24px;background:linear-gradient(180deg,var(--navy),var(--navy-2));color:#fff}
.bs-plus .bs-o-tag{color:#8db8ff}
.bs-plus h3{font-size:clamp(23px,2.1vw,28px);line-height:1.2;letter-spacing:-.02em}
.bs-plus p.bs-d{font-size:16.5px;line-height:1.55;color:var(--on-dark-2);max-width:34em;text-wrap:pretty}
.bs-plus .bs-t{display:grid;gap:10px}
.bs-plus .bs-pcx{max-width:420px;justify-self:end;width:100%}
.bs-pcx{display:grid;gap:10px;padding:12px;border-radius:18px;background:var(--ui-canvas);color:var(--ui-ink)}
.bs-pcx .bs-pcard3{padding:14px;border-radius:14px;background:#fff;display:grid;gap:8px}
.bs-pcx .bs-pcard3 b{font:600 14px/1.3 var(--ui-title)}
.bs-pcx .bs-pcard3 span{font-size:12.5px;color:var(--ui-ink-2)}
.bs-pcx .bs-pcard3 .bs-avail{justify-self:start;display:inline-flex;align-items:center;height:30px;padding:0 13px;border-radius:999px;background:#0b0f17;color:#fff;font:600 12px/1 var(--ui-title)}
.bs-pcx .bs-sup3{margin:0}

/* what it's worth: two pictures, drawn to scale */
.bs-worth{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:clamp(32px,4vw,48px)}
.bs-chart{display:grid;gap:18px;align-content:start;padding:clamp(24px,2.6vw,36px);border-radius:24px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-1);min-width:0}
.bs-chart .bs-o-tag{color:var(--blue)}
.bs-chart h3{font-size:clamp(22px,2vw,26px);line-height:1.25;letter-spacing:-.018em}
.bs-bars2{display:grid;gap:16px}
.bs-bar{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 14px;align-items:end}
.bs-bar .bs-l{font-size:15px;color:var(--ink-2)}
.bs-bar b{font-weight:400;font-size:clamp(30px,3vw,40px);line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.bs-bar .bs-track{grid-column:1 / -1;height:18px;border-radius:999px;background:var(--bg-3);overflow:hidden}
.bs-bar .bs-track i{display:block;height:100%;border-radius:999px;background:#9aa6b8}
.bs-bar.bs-on .bs-l{color:var(--ink)}
.bs-bar.bs-on b{color:var(--blue)}
.bs-bar.bs-on .bs-track i{background:var(--blue)}
.bs-dots{display:grid;gap:16px}
.bs-drow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px 14px;align-items:end}
.bs-drow .bs-l{font-size:15px;color:var(--ink-2)}
.bs-drow b{font-weight:400;font-size:clamp(30px,3vw,40px);line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.bs-drow.bs-on .bs-l{color:var(--ink)}
.bs-drow.bs-on b{color:var(--blue)}
.bs-dgrid{grid-column:1 / -1;display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:6px}
.bs-dgrid i{aspect-ratio:1;max-width:100%;border-radius:50%;background:var(--bg-3);border:1.5px dashed #b9c2d0}
.bs-dgrid i.bs-y{background:#9aa6b8;border:0}
.bs-drow.bs-on .bs-dgrid i.bs-y{background:var(--blue)}
.bs-chart .bs-c-note{font-size:15px;line-height:1.5;color:var(--ink-3);text-wrap:pretty}
.bs-worth-foot{margin-top:18px;font-size:15px;color:var(--ink-3)}

/* step 1: you do one thing */
.bs-youwe{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:20px;margin-top:clamp(32px,4vw,48px)}
.bs-yw{display:grid;gap:18px;align-content:start;padding:clamp(24px,2.6vw,36px);border-radius:24px;min-width:0}
.bs-yw.bs-you{background:#fff;border:1.5px solid var(--blue-16);box-shadow:var(--shadow-1)}
.bs-yw.bs-we{background:#f4f6f9;border:1px solid var(--line-2)}
.bs-yw-h{font:500 12.5px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--blue)}
.bs-yw ul{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.bs-yw li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:12px;align-items:start;font-size:17px;line-height:1.45}
.bs-yw li i{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-style:normal;flex:none}
.bs-yw li i svg{width:15px;height:15px}
.bs-yw.bs-you li{font-size:clamp(21px,2vw,25px);line-height:1.3;letter-spacing:-.015em}
.bs-yw.bs-you li i{background:var(--blue);color:#fff;margin-top:2px}
.bs-yw.bs-we li i{background:#fff;border:1px solid var(--ui-line);color:var(--ui-ok)}
.bs-yw .bs-that{font-size:16px;color:var(--ink-3)}

/* already on BluonSearch */
.bs-already{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 32px;padding:clamp(20px,2.4vw,28px) clamp(22px,2.6vw,36px);border-radius:24px;background:var(--blue-t)}
.bs-already p{font-size:clamp(17px,1.4vw,19px);line-height:1.5;color:var(--ink);max-width:44em;text-wrap:pretty}
.bs-already b{font-weight:500}

@media (max-width:1099px){
  .bs-easy{grid-template-columns:minmax(0,1fr);max-width:620px}
  .bs-mid{grid-template-columns:auto minmax(0,1fr);justify-items:start;text-align:left;gap:14px;padding-inline:8px}
  .bs-mid i svg{transform:rotate(90deg)}
  .bs-offers{grid-template-columns:minmax(0,1fr)}
  .bs-offer{grid-row:auto;grid-template-rows:none;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px;align-items:center}
  .bs-o-pic{justify-content:center}
}
@media (max-width:899px){
  .bs-worth,.bs-youwe,.bs-plus{grid-template-columns:minmax(0,1fr)}
  .bs-plus .bs-pcx{justify-self:start}
  .bs-offer{display:flex;flex-direction:column;gap:20px;max-width:560px}
}
@media (max-width:560px){
  .bs-h13 .bs-copy .bs-btn,.bs-already .bs-btn{width:100%}
  .bs-csv-top span{display:none}
  .bs-csv th:nth-child(3),.bs-csv td:nth-child(3){display:none}
  .bs-dgrid{gap:4px}
}

/* Round 14 (11/3): three more attempts at the "easy button" page (Bluon for distributors), after Niko: the logic follows
   Pete, but make it look good and easy to digest, and try other headlines. Same page system and real screens (r10.css,
   r13.css). bs-r14-carry: "You already carry the part." The hero is the match itself: nameplate, original part, your bin
   label. bs-r14-onelist: "One SKU list. Three ways to sell more parts." One file feeding three outcomes with their numbers.
   bs-r14-question: "Can your customers find your parts?" What most distributors can't do today, and with Bluon.
   Shared below the hero: the cost in two numbers, two steps, three places on staged screens, PartsConnect, the close. */

/* hero, centered */
.bs-h14{position:relative;padding-block:clamp(28px,5vw,72px) clamp(72px,9vw,120px)}
.bs-h14::before{content:"";position:absolute;inset:-120px 0 auto;height:920px;z-index:-1;pointer-events:none;background:radial-gradient(48% 54% at 50% 34%,rgba(0,99,242,.09),transparent 72%)}
.bs-h14 .bs-copy{display:grid;gap:22px;justify-items:center;text-align:center;max-width:940px;margin:0 auto}
.bs-h14 .bs-display{font-size:clamp(40px,5.4vw,74px)}
.bs-h14 .bs-display span{display:block}
.bs-h14 .bs-display .bs-dim{color:rgba(6,6,6,.4)}
.bs-h14 .bs-lede{max-width:33em}
.bs-acts{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px 24px}
.bs-acts .bs-more{font:500 16px/1.4 var(--sans);color:var(--ink);text-decoration:none;border-bottom:1.5px solid rgba(6,6,6,.2);padding-bottom:2px}
.bs-acts .bs-more:hover,.bs-acts .bs-more:focus-visible{border-bottom-color:var(--blue);outline:none}
.bs-easyline{display:inline-flex;align-items:center;gap:10px;padding:8px 16px 8px 10px;border-radius:999px;background:var(--blue-t);font-size:16px;line-height:1.3;color:var(--ink)}
.bs-easyline i{width:24px;height:24px;border-radius:50%;background:var(--blue);color:#fff;display:flex;align-items:center;justify-content:center;flex:none}
.bs-easyline i svg{width:13px;height:13px}
.bs-h14 .bs-ex{text-align:center;margin-top:22px}

/* carry: the match, as the objects a counter knows */
.bs-chain{display:grid;grid-template-columns:minmax(0,1fr) clamp(48px,6vw,88px) minmax(0,.92fr) clamp(48px,6vw,88px) minmax(0,1fr);grid-template-rows:auto auto auto;row-gap:16px;align-items:center;max-width:1160px;margin:clamp(52px,6.5vw,88px) auto 0}
.bs-obj{grid-row:1 / span 3;display:grid;grid-template-rows:subgrid;justify-items:center;min-width:0}
.bs-obj .bs-cap{align-self:end}
.bs-obj>.bs-fits{align-self:start}
.bs-obj .bs-cap{font:500 12.5px/1.35 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);text-align:center;max-width:22em}
.bs-plate{width:100%;max-width:320px;padding:24px 26px 22px;border-radius:12px;color:#252c37;display:grid;gap:10px;font-family:var(--mono);
  background:
    radial-gradient(circle at 13px 13px,#8a939e 0 2.4px,#f6f7f9 2.9px 4.4px,transparent 5px),
    radial-gradient(circle at calc(100% - 13px) 13px,#8a939e 0 2.4px,#f6f7f9 2.9px 4.4px,transparent 5px),
    radial-gradient(circle at 13px calc(100% - 13px),#8a939e 0 2.4px,#f6f7f9 2.9px 4.4px,transparent 5px),
    radial-gradient(circle at calc(100% - 13px) calc(100% - 13px),#8a939e 0 2.4px,#f6f7f9 2.9px 4.4px,transparent 5px),
    repeating-linear-gradient(90deg,rgba(255,255,255,.16) 0 1px,rgba(0,0,0,.025) 1px 3px),
    linear-gradient(135deg,#f1f3f6 0%,#cfd5dc 38%,#f5f6f8 56%,#c4cad2 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 -1px 0 rgba(0,0,0,.12),0 1px 2px rgba(6,6,6,.08),0 22px 48px rgba(6,6,6,.14)}
.bs-pl-brand{font:600 13px/1 var(--sans);letter-spacing:.34em;text-align:center;color:#3a4250;padding-bottom:4px}
.bs-pl-row{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:baseline;padding:9px 11px;border:1px solid rgba(37,44,55,.24);border-radius:4px}
.bs-pl-row span{font-size:10.5px;letter-spacing:.09em;color:#4a5260;white-space:nowrap}
.bs-pl-row b{font-size:21px;font-weight:500;letter-spacing:.05em;color:#121720;text-align:right}
.bs-pl-row b.bs-mute{color:#6b7380;font-size:16px;letter-spacing:.2em}
.bs-pl-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.bs-pl-grid span{display:grid;gap:3px;padding:7px 9px;border:1px solid rgba(37,44,55,.24);border-radius:4px;font-size:10px;letter-spacing:.09em;color:#4a5260}
.bs-pl-grid b{font-size:14px;font-weight:500;color:#121720;letter-spacing:.03em}
.bs-oem{width:100%;max-width:300px;display:grid;gap:12px;padding:18px 20px;border-radius:16px;background:#fff;border:1px dashed #c3cad6;box-shadow:0 1px 2px rgba(6,6,6,.04),0 14px 34px rgba(6,6,6,.07)}
.bs-bin{width:100%;max-width:320px;padding:18px 20px 16px;border-radius:8px;background:#fff;border:1px solid #d6dbe3;box-shadow:0 1px 2px rgba(6,6,6,.06),0 22px 48px rgba(6,6,6,.13);display:grid;gap:10px;font-family:var(--mono);color:#121720}
.bs-bn-top{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.bs-bn-top span{font-size:11px;letter-spacing:.12em;color:#5b6472}
.bs-bn-top b{font-size:32px;font-weight:500;letter-spacing:.02em;line-height:1}
.bs-bn-desc{font-size:12.5px;line-height:1.4;letter-spacing:.03em}
.bs-bn-code{display:block;height:46px;background:repeating-linear-gradient(90deg,#121720 0 2px,transparent 2px 4px,#121720 4px 5px,transparent 5px 7px,#121720 7px 10px,transparent 10px 11px,#121720 11px 12px,transparent 12px 15px,#121720 15px 16px,transparent 16px 19px)}
.bs-bn-foot{display:flex;justify-content:space-between;font-size:11px;letter-spacing:.1em;color:#5b6472}
.bs-fits{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 15px;border-radius:999px;background:var(--ui-ok-t);color:var(--ui-ok);font:600 13.5px/1 var(--ui-title)}
.bs-fits svg{width:15px;height:15px}
.bs-link{grid-row:2;display:grid;justify-items:center;gap:10px;align-self:center;transform:translateY(-14px)}
.bs-link b{font:600 12.5px/1 var(--ui-title);color:var(--blue)}
.bs-link i{position:relative;display:block;width:100%;height:2px;background:linear-gradient(90deg,rgba(0,99,242,.2),var(--blue))}
.bs-link i::after{content:"";position:absolute;right:0;top:50%;width:10px;height:10px;border-top:2px solid var(--blue);border-right:2px solid var(--blue);transform:translate(1px,-50%) rotate(45deg)}

/* onelist: one file feeding three outcomes */
.bs-one3{display:grid;grid-template-columns:minmax(0,.86fr) clamp(56px,9vw,140px) minmax(0,1.2fr);align-items:stretch;max-width:1140px;margin:clamp(52px,6.5vw,88px) auto 0;text-align:left}
.bs-file{align-self:center;display:grid;gap:0;border-radius:22px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-2);overflow:hidden;min-width:0}
.bs-file-top{display:flex;align-items:center;gap:12px;padding:16px 20px;background:var(--ui-canvas);border-bottom:1px solid var(--ui-line)}
.bs-file-top svg{width:22px;height:22px;color:var(--ui-ok);flex:none}
.bs-file-top b{font:600 15px/1.2 var(--ui-title);color:var(--ui-ink)}
.bs-file-rows p{display:grid;grid-template-columns:76px minmax(0,1fr);gap:12px;padding:12px 20px;border-top:1px solid var(--ui-line);font:400 13px/1.35 var(--mono);color:var(--ui-ink)}
.bs-file-rows p:first-child{border-top:0}
.bs-file-rows p span{color:var(--ui-ink-3)}
.bs-file-rows p.bs-more{color:var(--ui-ink-3)}
.bs-file-cap{padding:14px 20px;border-top:1px solid var(--ui-line);font-size:14px;color:var(--ink-3)}
.bs-fan{display:block;width:100%;height:100%;overflow:visible}
.bs-fan path{fill:none;stroke:var(--blue);stroke-width:2;vector-effect:non-scaling-stroke;opacity:.55}
.bs-fan circle{fill:var(--blue)}
.bs-outs{display:grid;grid-auto-rows:1fr;gap:16px;min-width:0}
.bs-out{display:grid;grid-template-columns:54px minmax(0,1fr);gap:4px 18px;align-items:center;padding:20px 24px;border-radius:22px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-1);min-width:0}
.bs-out>i{grid-row:1 / 4;width:54px;height:54px;border-radius:16px;background:var(--blue-t);color:var(--blue);display:flex;align-items:center;justify-content:center}
.bs-out>i svg{width:24px;height:24px}
.bs-o-where{font:500 14.5px/1.2 var(--sans);color:var(--ink-2)}
.bs-o-big{font-size:clamp(30px,3vw,40px);line-height:1.05;letter-spacing:-.03em;color:var(--blue);font-variant-numeric:tabular-nums}
.bs-o-what{font-size:15px;line-height:1.4;color:var(--ink-2)}
.bs-o-what em{font-style:normal;color:var(--ink-3)}

/* question: what most distributors can't do today */
.bs-ct{max-width:1000px;margin:clamp(52px,6.5vw,88px) auto 0;border-radius:28px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-2);overflow:hidden;text-align:left}
.bs-ct-r{display:grid;grid-template-columns:minmax(0,1fr) clamp(110px,15vw,180px) clamp(110px,15vw,180px);align-items:stretch}
.bs-ct-r>*{display:flex;align-items:center;padding:20px clamp(16px,2.4vw,32px);border-top:1px solid var(--line)}
.bs-ct-r>:nth-child(2),.bs-ct-r>:nth-child(3){justify-content:center;text-align:center}
.bs-ct-r>:nth-child(3){background:var(--blue-t);border-top-color:rgba(0,99,242,.12)}
.bs-ct-h>*{border-top:0;padding-block:18px 14px;font:500 12.5px/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.bs-ct-h>:nth-child(3){color:var(--blue)}
.bs-ct-q{display:grid!important;gap:4px;align-content:center}
.bs-ct-q b{font-weight:500;font-size:clamp(17px,1.5vw,20px);line-height:1.3;color:var(--ink)}
.bs-ct-q em{font-style:normal;font-size:15px;color:var(--ink-3)}
.bs-mk{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex:none}
.bs-mk svg{width:17px;height:17px}
.bs-mk.bs-no{background:#eef1f5;color:#9aa6b8}
.bs-mk.bs-yes{background:var(--blue);color:#fff}
.bs-ct-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;padding:20px clamp(16px,2.4vw,32px);border-top:1px solid var(--line);background:#fafbfd}
.bs-ct-foot p{font-size:17px;color:var(--ink)}
.bs-ct-foot p b{font-weight:600}

/* the cost, in two numbers (navy band) */
.bs-cost14 .bs-sh{max-width:46rem}
.bs-cost14 .bs-h2{color:#fff}
.bs-cost14 .bs-kicker{color:#8db8ff}
.bs-stats14{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,3vw,40px);margin-top:clamp(36px,4.5vw,56px)}
.bs-s14{display:grid;gap:14px;align-content:start;padding-top:24px;border-top:1px solid rgba(255,255,255,.18)}
.bs-s-l{font:500 12.5px/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:#8db8ff}
.bs-s-n{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 18px;font-size:clamp(48px,6.4vw,92px);line-height:1;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.bs-s-n .bs-was{color:rgba(255,255,255,.42);text-decoration:line-through;text-decoration-thickness:3px;text-decoration-color:rgba(255,255,255,.3)}
.bs-s-n .bs-to{font-size:.5em;color:rgba(255,255,255,.5)}
.bs-s-n .bs-now{color:#fff}
.bs-s-d{font-size:clamp(17px,1.4vw,19px);line-height:1.5;color:var(--on-dark-2);max-width:26em}
.bs-s-foot{margin-top:clamp(28px,3.5vw,40px);font-size:15px;color:var(--on-dark-3)}

/* two steps */
.bs-steps14{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:clamp(36px,4.5vw,56px)}
.bs-sp{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 22px;align-content:start;padding:clamp(24px,3vw,40px);border-radius:28px;min-width:0}
.bs-sp.bs-you{background:#fff;border:1.5px solid var(--blue-16);box-shadow:var(--shadow-1)}
.bs-sp.bs-we{background:#f4f6f9;border:1px solid var(--line-2)}
.bs-sp .bs-big{grid-row:1 / 4;font-size:clamp(64px,7vw,104px);line-height:.85;letter-spacing:-.05em;color:var(--blue)}
.bs-sp.bs-we .bs-big{color:var(--ink)}
.bs-sp h3{font-size:clamp(24px,2.4vw,32px);line-height:1.15;letter-spacing:-.02em}
.bs-sp p{font-size:17px;line-height:1.55;color:var(--ink-2)}
.bs-sp .bs-chips{grid-column:1 / -1;display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.bs-sp .bs-chips span{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 14px;border-radius:999px;background:#fff;border:1px solid var(--line);font-size:14.5px;color:var(--ink)}
.bs-sp .bs-chips svg{width:16px;height:16px;color:var(--blue)}
.bs-sp .bs-who{grid-column:2;font:500 12.5px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);padding-top:6px}

/* three places, on staged screens */
.bs-places{display:grid;gap:clamp(56px,7vw,104px);margin-top:clamp(40px,5vw,64px)}
.bs-pl{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(32px,5vw,80px);align-items:center}
.bs-pl.bs-flip{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr)}
.bs-pl.bs-flip>.bs-pl-t{order:2}
.bs-pl-t{display:grid;gap:14px;align-content:center;max-width:30rem;min-width:0}
.bs-pl-t h3{font-size:clamp(28px,3vw,40px);line-height:1.15;letter-spacing:-.022em}
.bs-pl-t p{font-size:clamp(17px,1.35vw,19px);line-height:1.6;color:var(--ink-2);text-wrap:pretty}
.bs-pl-stat{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin-top:6px;padding-top:16px;border-top:1px solid var(--line)}
.bs-pl-stat s{font-size:24px;color:var(--ink-3);text-decoration-thickness:2px}
.bs-pl-stat b{font-weight:400;font-size:clamp(32px,3vw,40px);line-height:1;letter-spacing:-.03em;color:var(--blue)}
.bs-pl-stat span{flex-basis:100%;font-size:15px;color:var(--ink-3)}
.bs-stage{display:flex;justify-content:center;align-items:center;padding:clamp(22px,4vw,56px);border-radius:32px;background:linear-gradient(180deg,#f4f6f9,#ecf0f5);min-width:0}
.bs-stage>*{width:100%;max-width:520px}
.bs-stage .bs-ui-win,.bs-stage .bs-store,.bs-stage .bs-mm10{box-shadow:0 1px 2px rgba(6,6,6,.04),0 24px 56px rgba(6,6,6,.12)}
.bs-stage .bs-phone3{width:300px;max-width:100%}
.bs-phone3 .bs-pcard3 .bs-avail{color:#fff}
.bs-stage.bs-navy{background:linear-gradient(180deg,var(--navy),var(--navy-2))}
.bs-places-h{display:grid;gap:16px;max-width:46rem}

.bs-one3 .bs-down{display:none;justify-content:center;padding:14px 0}
.bs-one3 .bs-down i{width:46px;height:46px;border-radius:50%;background:var(--blue);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 8px var(--blue-08)}
.bs-one3 .bs-down i svg{width:20px;height:20px;transform:rotate(90deg)}
.bs-ct .bs-sm{display:none}

@media (max-width:1099px){
  .bs-chain{grid-template-columns:minmax(0,1fr);grid-template-rows:none;justify-items:center;gap:0;max-width:420px}
  .bs-obj{grid-row:auto;grid-template-rows:none;gap:16px}
  .bs-link{grid-row:auto}
  .bs-link{transform:none;height:64px;margin:4px 0 14px;grid-auto-flow:column;align-items:center;gap:12px}
  .bs-link i{width:2px;height:100%;background:linear-gradient(180deg,rgba(0,99,242,.2),var(--blue))}
  .bs-link i::after{right:auto;left:50%;top:auto;bottom:0;transform:translate(-50%,1px) rotate(135deg)}
  .bs-one3{grid-template-columns:minmax(0,1fr);max-width:600px;gap:0}
  .bs-fan{display:none}
  .bs-one3 .bs-down{display:flex}
  .bs-pl,.bs-pl.bs-flip{grid-template-columns:minmax(0,1fr)}
  .bs-pl.bs-flip>.bs-pl-t{order:0}
  .bs-pl-t{max-width:40rem}
}
@media (max-width:860px){
  .bs-stats14,.bs-steps14{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  .bs-ct-r{grid-template-columns:minmax(0,1fr) 64px 64px}
  .bs-ct-r>*{padding:16px 12px}
  .bs-ct-r>:first-child{padding-left:18px}
  .bs-ct-h>*{font-size:10.5px;letter-spacing:.04em}
  .bs-ct .bs-lg{display:none}
  .bs-ct .bs-sm{display:inline}
  .bs-mk{width:32px;height:32px}
  .bs-out{grid-template-columns:46px minmax(0,1fr);padding:18px}
  .bs-out>i{width:46px;height:46px}
}
@media (max-width:560px){
  .bs-h14 .bs-copy .bs-btn{width:100%}
  .bs-acts{flex-direction:column;align-items:stretch}
  .bs-acts .bs-more{align-self:center}
  .bs-easyline{font-size:15px}
}

/* Round 15 (11/4): no eyebrow labels above any heading. A plain top bar with the Bluon logo says whose page it is.
   Product names now sit in the body copy, one shade darker, so they still stand out when someone skims. */



.bs-h14{padding-top:clamp(44px,5.6vw,84px)}
.bs-pl-t p b{font-weight:500;color:var(--ink)}
.bs-plus p.bs-d b{font-weight:500;color:#fff}
.bs-sp h3{padding-top:.1em}
.bs-pl-t p b,.bs-o-where span{white-space:nowrap}
/* stacked layout: without a label between them, the section heading has to clearly outrank each place's heading */
@media (max-width:1099px){.bs-pl-t h3{font-size:clamp(24px,3.4vw,30px)}}

/* Round 17 (11/4): round 15 V1 with Tanner's notes applied as refinements, not a rebuild.
   - Pete's 11/3 recipe stays the backbone:
     - three equal offers ("More sales in three places.")
     - catalog first, and the easy button
     - value before features
     - PartsConnect as what's new
   - Tanner's notes:
     - No eyebrows.
     - The nameplate hero graphic is gone ("overly technician based").
     - The three places he liked move up to sit right under the headline. Each is headed by its place and sits on its own
       tinted stage, so the counter and the website can't be mistaken for each other.
     - Wording and accuracy come from Jeremy's demo video.
   - Kept from round 16 because they worked: place-first headings, tinted stages, the SKU file in step 1, the database row.
   - Builds on r14.css (places, stages, steps, cost band) and r15.css (logo bar, product names in the copy). */

/* the hero is copy only now: tighten the gap down to the three places */
.bs-h17{padding-bottom:clamp(56px,7vw,96px)}

/* each place: its name, then what it does for you, in one heading */
.bs-pl-t .bs-loc-h span{display:block}
.bs-pl-t .bs-loc-h .bs-dim{color:rgba(6,6,6,.42)}
.bs-pl-t>p.bs-lead{color:var(--ink)}
.bs-does17{display:grid;gap:12px;list-style:none;margin:6px 0 0;padding:16px 0 0;border-top:1px solid var(--line)}
.bs-does17 li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:12px;font-size:17px;line-height:1.5;color:var(--ink-2);text-wrap:pretty}
.bs-does17 li i{width:22px;height:22px;margin-top:1px;border-radius:50%;background:var(--blue-t);color:var(--blue);display:flex;align-items:center;justify-content:center}
.bs-does17 li i svg{width:12px;height:12px}
.bs-does17 b{font-weight:500;color:var(--ink);white-space:nowrap}
.bs-web17 .bs-does17 li i{background:var(--ui-shop-t);color:var(--ui-shop)}
.bs-pro17 .bs-does17 li i{background:#e8efff;color:var(--ui-blue)}

/* each place gets its own stage color, and its screen lays out for the width it gets */
.bs-stage{container-type:inline-size}
.bs-stage.bs-blue{background:linear-gradient(180deg,#edf2fa,#e3eaf5)}
.bs-stage.bs-warm{background:linear-gradient(180deg,#f9f2eb,#f3e9df)}
.bs-stage.bs-gray{background:linear-gradient(180deg,#f2f4f7,#e8ecf1)}
@container (max-width:440px){
  .bs-ui-rep{grid-template-columns:40px minmax(0,1fr)}
  .bs-ui-rep .bs-ui-img{width:40px;height:40px}
  .bs-ui-rep .bs-ui-cat,.bs-ui-rep .bs-shop-btn{grid-column:2;justify-self:start}
  .bs-ui-tabs span{padding:12px 9px 10px;font-size:12px}
  .bs-c16 .bs-ui-tabs span+span,.bs-c16 .bs-ui-user{display:none}
  .bs-store-head .bs-ssearch{display:none}
  .bs-ui-card{padding:14px}
}

/* the counter screen: signed in per branch, opened from a model (from Jeremy's demo) */
.bs-c16 .bs-ui-top{justify-content:flex-start}
.bs-c16 .bs-ui-tabs{margin-left:10px;margin-right:auto}
.bs-ui-user{align-self:center;display:inline-flex;align-items:center;gap:7px;height:28px;padding:0 11px;border-radius:999px;background:var(--ui-canvas);font:600 12px/1 var(--ui-title);color:var(--ui-ink-2);white-space:nowrap}
.bs-ui-user i{width:7px;height:7px;border-radius:50%;background:var(--ui-ok)}
.bs-c16 .bs-ui-back{display:flex;align-items:center;gap:4px;padding:2px 4px 0}
.bs-c16 .bs-ui-back svg{width:14px;height:14px}

/* the database behind every answer */
.bs-db17{display:grid;gap:22px;justify-items:center;text-align:center}
.bs-db17>p{font-size:clamp(17px,1.35vw,19px);line-height:1.5;color:var(--ink-2);max-width:36em;text-wrap:balance}
.bs-facts17{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));width:100%;max-width:1040px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.bs-facts17 div{display:grid;gap:6px;justify-items:center;padding:24px 16px;border-left:1px solid var(--line)}
.bs-facts17 div:first-child{border-left:0}
.bs-facts17 b{font-weight:400;font-size:clamp(32px,3.4vw,48px);line-height:1;letter-spacing:-.035em;font-variant-numeric:tabular-nums}
.bs-facts17 span{font-size:15px;color:var(--ink-3)}

/* step 1 shows the file itself, so the ask is concrete */
.bs-sp .bs-file{grid-column:2;margin-top:14px;border-radius:14px;box-shadow:var(--shadow-1)}
.bs-sp .bs-file-top{padding:11px 16px}
.bs-sp .bs-file-top svg{width:18px;height:18px}
.bs-sp .bs-file-top b{font-size:13.5px}
.bs-sp .bs-file-rows p{grid-template-columns:64px minmax(0,1fr);padding:9px 16px;font-size:12.5px;color:var(--ui-ink)}

/* PartsConnect: same place-first heading, on navy */
.bs-plus .bs-loc-h{font-size:clamp(24px,2.2vw,30px);line-height:1.2;letter-spacing:-.02em;color:#fff}
.bs-plus .bs-loc-h span{display:block}
.bs-plus .bs-loc-h .bs-dim{color:rgba(255,255,255,.62)}

@media (max-width:760px){
  .bs-facts17{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bs-facts17 div:nth-child(3){border-left:0}
  .bs-facts17 div:nth-child(n+3){border-top:1px solid var(--line)}
}
@media (max-width:560px){
  .bs-stage{padding:14px;border-radius:22px}
  .bs-does17 li{font-size:16px}
  .bs-sp .bs-file{grid-column:1 / -1}
}

/* Round 19 (11/4): three plain, strong pages after Niko: "you're getting too fancy… our originals were really good."
   - bs-r19-pair: round 16 v1 (the first change after Tanner, which Niko liked), kept as is. Tech support now sits right
     under the counter and website pair, as the third of Pete's three, instead of below the steps.
   - bs-r19-onelist: round 15 V2 (the original "Turn your SKU list into more sales"), with Tanner's notes applied lightly.
   - bs-r19-simple: a conventional page. Split hero with the counter screen, three value cards, how it works,
     common questions, the close.
   - Everywhere: Pete's plain names ("parts finder for your counter / for your website", "tech support for your Pros"),
     tech support is clearly ours, PartsConnect is a bonus, no eyebrows. */

/* ---------- shared ---------- */
.bs-sec-h19{display:grid;gap:14px;justify-items:center;text-align:center;max-width:46rem;margin:0 auto}
.bs-sec-h19 p{font-size:clamp(17px,1.35vw,19px);line-height:1.6;color:var(--ink-2);max-width:36em}

/* ---------- A: the pair, then tech support as the third ---------- */
.bs-pair19{margin-top:clamp(44px,5vw,64px)}
.bs-tech19{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);grid-template-areas:"h s" "d s";grid-template-rows:auto auto;column-gap:clamp(24px,3vw,44px);row-gap:0;margin-top:clamp(56px,6vw,88px)}
.bs-tech19 .bs-loc-h{grid-area:h;align-self:end;font-size:clamp(24px,2.2vw,32px);padding:0 4px}
.bs-tech19 .bs-stage16{grid-area:s}
.bs-tech19 .bs-does16{grid-area:d;align-self:start;padding-top:clamp(18px,2vw,24px)}

/* ---------- B: hero card titles read as titles, not labels ---------- */
.bs-out .bs-o-title{font:500 15.5px/1.3 var(--sans);color:var(--ink)}

/* ---------- C: split hero ---------- */
.bs-hs19{position:relative;padding-block:clamp(44px,6vw,96px) clamp(64px,8vw,112px)}
.bs-hs19::before{content:"";position:absolute;inset:-120px 0 auto;height:900px;z-index:-1;pointer-events:none;background:radial-gradient(46% 52% at 30% 34%,rgba(0,99,242,.08),transparent 72%)}
.bs-hs19 .bs-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(32px,4.5vw,72px);align-items:center}
.bs-hs19 .bs-copy{display:grid;gap:22px;justify-items:start}
.bs-hs19 .bs-display{font-size:clamp(40px,4.6vw,64px)}
.bs-hs19 .bs-display span{display:block}
.bs-hs19 .bs-display .bs-dim{color:rgba(6,6,6,.4)}
.bs-hs19 .bs-lede{max-width:32em}
.bs-hs19 .bs-acts{justify-content:flex-start}
.bs-hs19 .bs-proof{font-size:14.5px;color:var(--ink-3)}
.bs-hs19 .bs-proof b{font-weight:500;color:var(--ink-2)}
.bs-hs19 .bs-proof span{white-space:nowrap}

/* C: three value cards */
.bs-feat19{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.6vw,20px);margin-top:clamp(36px,4.5vw,56px)}
.bs-f19{display:grid;grid-template-rows:auto auto 1fr auto;gap:12px;padding:clamp(22px,2.4vw,30px);border-radius:24px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-1);min-width:0}
.bs-f19>i{width:48px;height:48px;border-radius:14px;background:var(--blue-t);color:var(--blue);display:flex;align-items:center;justify-content:center}
.bs-f19>i svg{width:22px;height:22px}
.bs-f19.bs-web>i{background:var(--ui-shop-t);color:var(--ui-shop)}
.bs-f19 h3{font-size:clamp(22px,1.9vw,26px);line-height:1.2;letter-spacing:-.02em}
.bs-f19 p{font-size:16.5px;line-height:1.55;color:var(--ink-2);text-wrap:pretty}
.bs-f19 p b{font-weight:500;color:var(--ink);white-space:nowrap}
.bs-f19 .bs-fst{min-height:100px;align-content:flex-start;display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;padding-top:16px;border-top:1px solid var(--line)}
.bs-f19 .bs-fst s{font-size:20px;color:var(--ink-3);text-decoration-thickness:2px}
.bs-f19 .bs-fst .bs-to{font-size:15px;color:var(--ink-3)}
.bs-f19 .bs-fst b{font-weight:400;font-size:32px;line-height:1;letter-spacing:-.03em;color:var(--blue)}
.bs-f19 .bs-fst .bs-sd{flex-basis:100%;font-size:14px;color:var(--ink-3)}
.bs-plusline{display:flex;align-items:center;gap:14px;margin-top:16px;padding:16px 20px;border-radius:18px;background:var(--blue-t);font-size:16.5px;line-height:1.45;color:var(--ink)}
.bs-plusline i{width:36px;height:36px;flex:none;border-radius:50%;background:#fff;color:var(--blue);display:flex;align-items:center;justify-content:center}
.bs-plusline i svg{width:17px;height:17px}
.bs-plusline b{font-weight:500}


/* C: common questions */
.bs-faq19{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(28px,4vw,64px);margin-top:clamp(32px,4vw,48px)}
.bs-faq19 div{display:grid;gap:8px;align-content:start;padding:22px 0;border-top:1px solid var(--line)}
.bs-faq19 h3{font-size:19px;line-height:1.35;letter-spacing:-.01em}
.bs-faq19 p{font-size:16.5px;line-height:1.6;color:var(--ink-2);text-wrap:pretty}

@media (max-width:1099px){
  .bs-tech19{grid-template-columns:minmax(0,1fr);grid-template-areas:"h" "s" "d";max-width:640px;margin-inline:auto}
  .bs-tech19 .bs-loc-h{padding-bottom:clamp(18px,2vw,26px);font-size:clamp(26px,3.6vw,32px)}
  .bs-hs19 .bs-grid{grid-template-columns:minmax(0,1fr)}
  .bs-hs19 .bs-stage{max-width:640px}
  .bs-feat19{grid-template-columns:minmax(0,1fr);max-width:640px}
  .bs-f19 .bs-fst{min-height:0}
}
@media (max-width:760px){
  .bs-faq19{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:560px){
  .bs-hs19 .bs-copy .bs-btn{width:100%}
  .bs-hs19 .bs-acts{flex-direction:column;align-items:stretch}
  .bs-hs19 .bs-acts .bs-more{align-self:center}
  .bs-plusline{align-items:flex-start}
}

/* Round 20 (11/5): Alvin's notes from his 11/5 call with Niko, applied to the two pages going to Tanner, Brian Prouty and Pete.
   - The section is "3 ways to boost sales from one SKU list." and each way carries a 1, 2 or 3, so the three read as the
     list the heading promises.
   - In each way's heading the place is gray and the value is in ink. It used to be the other way round, which grayed out
     the main point.
   - "Pros" is gone: contractors where it meant the supply house's customers, staff or team where it meant their people.
   - PartsConnect leads with "Get found by techs looking for parts nearby." The "The Bluon app." heading read as the product.
   Builds on r14.css (places, stages, steps, cost band), r15.css (logo bar) and r17.css (two-tone headings, stage tints). */

.bs-pl-t .bs-loc-h .bs-lbl{display:flex;align-items:center;gap:.36em;color:rgba(6,6,6,.42)}
.bs-pl-t .bs-loc-h .bs-prop{color:var(--ink)}
.bs-num20{flex:none;display:inline-flex;align-items:center;justify-content:center;width:2.1em;height:2.1em;border-radius:50%;
  background:var(--blue);color:#fff;font-family:var(--sans);font-size:max(14px,.48em);font-weight:600;line-height:1;
  letter-spacing:0;font-variant-numeric:tabular-nums}

/* the store screen's search placeholder ends in an ellipsis when the screen is narrow, not a cut-off word */
.bs-store-head .bs-ssearch{text-overflow:ellipsis}

/* "Parts You Already Stock" hero, per Tanner on this page ("I don't love the hero section graphic", "overly technician
   based"): the nameplate is gone, so the match reads from the counter's side, the OEM part a contractor asks for and
   then the part on your shelf that fits. Below 1100px r14.css stacks the chain, which works as is for two objects. */
@media (min-width:1100px){
  .bs-chain.bs-two{grid-template-columns:minmax(0,1fr) clamp(72px,8vw,120px) minmax(0,1fr);max-width:820px}
}

/* 11/9, Brian Prouty's review */
/* real part photos (Bluon's catalog) in place of the placeholder icon; the hero card shows the asked-for part bigger */
.bs-ui-img.bs-pimg{background-color:#fff;background-position:center;background-repeat:no-repeat;background-size:88%}
.bs-oem .bs-ui-img.bs-pimg{width:76px;height:76px;border-radius:12px}
/* the blue band says which number is which: without Bluon, with Bluon */
.bs-s-n.bs-wb20 .bs-was{text-decoration:none}
.bs-s-n.bs-wb20 .bs-was,.bs-s-n.bs-wb20 .bs-now{display:inline-grid;gap:12px;justify-items:start}
.bs-s-n.bs-wb20 .bs-was .bs-v{text-decoration:line-through;text-decoration-thickness:3px;text-decoration-color:rgba(255,255,255,.3)}
.bs-s-n.bs-wb20 small{font:500 15px/1.2 var(--sans);letter-spacing:0;color:rgba(255,255,255,.62)}
.bs-s-n.bs-wb20 .bs-now small{color:rgba(255,255,255,.9)}
/* a demo button where setup ends */
.bs-cta20{display:flex;justify-content:center;margin-top:clamp(28px,3.4vw,44px)}
/* the hero part card holds a photo now: a little more room, and the voltage never splits at its hyphen */
.bs-chain.bs-two .bs-oem,.bs-chain.bs-two .bs-bin{max-width:330px}
.bs-oem .bs-nw,.bs-o-what em{white-space:nowrap}
.bs-oem .bs-ui-orig b .bs-nw{font-size:inherit;color:inherit}
/* the labels hang under their numbers without widening them, so "5% → 85%" keeps its spacing on phones */
.bs-s-n.bs-wb20 small{width:0;white-space:nowrap}

.bs-pimg-goodman{background-image:url(../images/bluonsearch-part-goodman.jpg)}
.bs-pimg-mars10232{background-image:url(../images/bluonsearch-part-mars10232.jpg)}
.bs-pimg-mars03915{background-image:url(../images/bluonsearch-part-mars03915.jpg)}