/* OEM/ODM Customization page — the blocks of the owner's own OEM/ODM file: the
   OEM-versus-ODM comparison pair, the eight customization-scope cards, the
   seven-step development timeline with its day chips, the tooling cards and the
   branding cards. Page furniture (banner, section heads, the closing call to
   action) comes from the shared page shell, page-shell.css, and the MOQ and
   timeline table is rendered by the site's own components/spec-table.php, so
   neither is restyled here. Scoped to .bovt-oem. Colours are tokens. */

/* ===== OEM vs ODM ===== */
.bovt-oem .compare-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:30px}
.bovt-oem .compare-card{background:#fff;border-radius:18px;padding:32px;box-shadow:0 8px 24px rgba(0,0,0,.07);position:relative;overflow:hidden}
.bovt-oem .compare-card::before{content:"";position:absolute;top:0;left:0;right:0;height:5px}
.bovt-oem .compare-card.oem::before{background:var(--color-blue)}
.bovt-oem .compare-card.odm::before{background:var(--color-orange)}
.bovt-oem .compare-card .cc-tag{display:inline-block;font-size:12px;font-weight:800;padding:5px 14px;border-radius:16px;margin-bottom:16px;text-transform:uppercase}
.bovt-oem .compare-card.oem .cc-tag{background:var(--color-brand-tint);color:var(--color-blue)}
.bovt-oem .compare-card.odm .cc-tag{background:var(--color-accent-tint);color:var(--color-orange)}
.bovt-oem .compare-card h3{font-size:22px;font-weight:800;margin:0 0 12px}
.bovt-oem .compare-card p.cc-desc{font-size:14px;color:#555;margin:0 0 20px}
.bovt-oem .compare-card ul{margin:0;padding:0}
.bovt-oem .compare-card li{list-style:none;display:flex;gap:10px;align-items:flex-start;margin-bottom:10px;font-size:13.5px;color:#444}
.bovt-oem .compare-card li .check{flex-shrink:0;width:18px;height:18px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;color:#fff;margin-top:2px}
.bovt-oem .compare-card.oem li .check{background:var(--color-blue)}
.bovt-oem .compare-card.odm li .check{background:var(--color-orange)}

/* ===== Customization scope ===== */
.bovt-oem .scope-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.bovt-oem .scope-card{background:#fff;border-radius:14px;padding:24px 20px;text-align:center;box-shadow:0 4px 14px rgba(0,0,0,.05)}
.bovt-oem .scope-card .sc-icon{width:50px;height:50px;background:var(--color-brand-tint);color:var(--color-blue);border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:800;margin:0 auto 14px}
.bovt-oem .scope-card h4{font-size:14px;font-weight:800;margin:0 0 8px}
.bovt-oem .scope-card p{font-size:12px;color:#777;margin:0}

/* ===== Development process timeline ===== */
.bovt-oem .section[id]{scroll-margin-top:90px}
.bovt-oem .dev-process{position:relative;max-width:900px;margin:0 auto;padding-left:40px}
.bovt-oem .dev-process::before{content:"";position:absolute;left:16px;top:6px;bottom:6px;width:3px;background:linear-gradient(var(--color-blue),var(--color-orange))}
.bovt-oem .dev-item{position:relative;margin-bottom:32px}
.bovt-oem .dev-item:last-child{margin-bottom:0}
.bovt-oem .dev-item .dv-dot{position:absolute;left:-40px;top:2px;width:34px;height:34px;background:#fff;border:3px solid var(--color-blue);border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;color:var(--color-blue);font-size:14px}
.bovt-oem .dev-item .dv-card{background:#fff;border-radius:14px;padding:18px 22px;box-shadow:0 4px 14px rgba(0,0,0,.05)}
.bovt-oem .dev-item h4{font-size:15.5px;font-weight:800;margin:0 0 6px}
.bovt-oem .dev-item p{font-size:13px;color:#666;margin:0}
.bovt-oem .dev-item .dv-time{display:inline-block;margin-top:8px;background:var(--color-brand-tint);color:var(--color-blue);font-size:11.5px;font-weight:700;padding:3px 10px;border-radius:14px}

/* ===== Tooling cards ===== */
.bovt-oem .tooling-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.bovt-oem .tooling-card{background:#fff;border-radius:14px;padding:28px;box-shadow:0 4px 14px rgba(0,0,0,.05)}
.bovt-oem .tooling-card h4{font-size:15.5px;font-weight:800;margin:0 0 10px;color:var(--color-blue)}
.bovt-oem .tooling-card p{font-size:13px;color:#666;margin:0}

/* ===== Branding cards ===== */
.bovt-oem .brand-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.bovt-oem .brand-card{background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 6px 20px rgba(0,0,0,.06);display:flex;align-items:center;gap:20px;padding:20px}
.bovt-oem .brand-card .bc-img{width:120px;flex-shrink:0}
.bovt-oem .brand-card .bc-img img{width:120px;height:100px;object-fit:cover;border-radius:10px}
.bovt-oem .brand-card h4{font-size:15px;font-weight:800;margin:0 0 6px}
.bovt-oem .brand-card p{font-size:12.5px;color:#777;margin:0}

@media (max-width:900px){
  .bovt-oem .compare-grid,.bovt-oem .scope-grid,.bovt-oem .tooling-grid,.bovt-oem .brand-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:600px){
  .bovt-oem .compare-grid,.bovt-oem .scope-grid,.bovt-oem .tooling-grid,.bovt-oem .brand-grid{grid-template-columns:1fr}
  .bovt-oem .brand-card{flex-direction:column;text-align:center}
  .bovt-oem .dev-process{padding-left:30px}
  .bovt-oem .dev-item .dv-dot{left:-30px;width:28px;height:28px;font-size:12px}
}