/* Catalog + spec page redesign, dark theme (2026-10-09).
   Loaded after style.css; everything is scoped to body.cbx so the compare page and any other
   page on style.css are untouched. Colour tokens re-point the existing --cb-* variables, so the
   cards, toolbar, FAQ and guide pick up the dark palette without markup changes. */

body.cbx {
  --cb-ink: #eceaf8; --cb-text: #c9cbe6; --cb-muted: #9a9ec0; --cb-mute-2: #6f7399;
  --cb-paper: #110b29; --cb-canvas: #07040f; --cb-line: #241b52; --cb-line-2: #352a70;
  --cb-accent: #7c5cff; --cb-accent-2: #38bdf8; --cb-teal: #38bdf8; --cb-amber-dark: #6d4aff;
  --cb-accent-rgb: 124, 92, 255; --cb-purple-rgb: 167, 139, 250; --cb-teal-rgb: 56, 189, 248; --cb-ink-rgb: 0, 0, 0;
  --cb-feature-bg: #17103a; --cb-feature-bg-on: #2a1f6e; --cb-card-foot-bg: transparent;
  --cb-card-imgwrap-bg: radial-gradient(circle at 50% 42%, #fff 0, #ecebf8 56%, #d4d0f2 100%);
  --cb-spec-gallery-bg: radial-gradient(circle at 50% 42%, #fff 0, #ecebf8 56%, #d4d0f2 100%);
  --cb-hero-bg: transparent;
  --cbx-vi2: #a78bfa; --cbx-ok: #34d399; --cbx-panel: #110b29;
  background: var(--cb-canvas); color: var(--cb-text);
}
body.cbx:before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(800px 420px at 12% -5%, rgba(124, 92, 255, .2), transparent),
              radial-gradient(700px 380px at 95% 8%, rgba(56, 189, 248, .12), transparent);
}
body.cbx .app-content, body.cbx .side-app, body.cbx #contentArea, body.cbx main { position: relative; z-index: 1; }
body.cbx .cb-topbar { background: rgba(7, 4, 15, .86); }
body.cbx .cb-topbar-logo { filter: none; }
body.cbx .cb-langbtn { background: transparent; color: var(--cb-text); }
body.cbx .cb-langbtn:hover { background: rgba(255, 255, 255, .06); }
body.cbx .cb-card-imgwrap img, body.cbx .cb-spec-gallery-main img { mix-blend-mode: multiply; }
body.cbx .cb-btn--ghost { background: transparent; color: #d9d3ff; border: 1px solid #3a2f7a; }
body.cbx .cb-page-canvas { background: transparent; }

/* ───────── catalog hero ───────── */
.cbx-hero { padding: 84px 0 8px; }
.cbx-hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 20px; align-items: center; }
.cbx-hero .cb-hero-eyebrow { display: inline-block; font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--cbx-vi2); border: 1px solid var(--cb-line); border-radius: 999px; padding: 5px 12px; margin-bottom: 16px; }
.cbx-hero .cb-hero-title { font-size: clamp(34px, 4.6vw, 56px); line-height: 1.04; letter-spacing: -2px; margin: 0 0 16px; color: #fff; }
.cbx-hero .cb-hero-title em { font-style: normal; background: linear-gradient(90deg, #8b5cf6, #38bdf8); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cbx-hero .cb-hero-sub { color: var(--cb-muted); font-size: 18px; line-height: 1.55; max-width: 620px; margin: 0 0 22px; }
.cbx-stats { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 26px; color: var(--cb-muted); font-size: 13px; align-items: center; }
.cbx-stats b { display: block; color: #fff; font-size: 20px; }
.cbx-badge { border: 1px solid var(--cb-line); border-radius: 8px; padding: 6px 10px; color: #d9d3ff; font-weight: 600; }
.cbx-badge:hover { border-color: var(--cb-accent); color: #fff; }
body.cbx .cb-hubnav { margin: 4px 0 22px; }
body.cbx .cb-hubnav a { background: transparent; border-color: var(--cb-line-2); color: var(--cb-text); }
body.cbx .cb-hubnav a:hover, body.cbx .cb-hubnav a[aria-current="page"] { background: var(--cb-accent); border-color: var(--cb-accent); color: #fff; }

/* rotating device */
.cbx-stage { position: relative; height: 470px; margin-bottom: 44px; }
.cbx-stage:before { content: ""; position: absolute; inset: 8% 4%; border-radius: 50%; background: radial-gradient(circle, rgba(124, 92, 255, .55), rgba(56, 189, 248, .18) 55%, transparent 72%); filter: blur(10px); }
.cbx-devlink { position: absolute; inset: 0; display: block; cursor: pointer; perspective: 900px; }
.cbx-dev { position: absolute; left: 50%; top: 50%; width: 74%; max-height: 82%; object-fit: contain; transform: translate(-50%, -50%) rotateY(var(--ry, 0deg)) rotateX(var(--rx, 0deg)); transition: opacity .45s, transform .6s; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .6)); }
.cbx-stage.swap .cbx-dev { opacity: 0; transform: translate(-30%, -50%) scale(.92); }
.cbx-fc { position: absolute; max-width: 190px; background: rgba(17, 11, 41, .86); border: 1px solid #3a2f7a; border-radius: 14px; padding: 9px 14px; font-size: 13px; font-weight: 600; color: #fff; backdrop-filter: blur(8px); box-shadow: 0 10px 30px rgba(0, 0, 0, .4); transition: opacity .4s, transform .5s; }
.cbx-fc:before { content: "\25CF"; color: var(--cbx-ok); margin-right: 7px; font-size: 9px; }
.cbx-stage.swap .cbx-fc { opacity: 0; transform: translateY(10px); }
.cbx-fc.a { left: 0; top: 14%; } .cbx-fc.b { right: 0; top: 30%; } .cbx-fc.c { left: 6%; bottom: 14%; } .cbx-fc.d { right: 4%; bottom: 18%; }
.cbx-meta { position: absolute; left: 0; right: 0; bottom: -8px; text-align: center; }
.cbx-meta .cbx-pick { display: inline-block; background: rgba(124, 92, 255, .25); border: 1px solid #4b3da8; border-radius: 999px; padding: 3px 12px; font-size: 12px; margin-bottom: 6px; color: #e4defe; font-weight: 600; }
.cbx-meta .cb-card-eyebrow { display: block; }
.cbx-meta h2 { margin: 3px auto 0; font-size: 16px; max-width: 400px; font-weight: 600; color: #fff; }
.cbx-meta small { color: var(--cbx-vi2); font-size: 12px; }
.cbx-dots { position: absolute; left: 50%; bottom: -46px; transform: translateX(-50%); display: flex; gap: 7px; }
.cbx-dots i { width: 22px; height: 4px; border-radius: 3px; background: #2e2563; overflow: hidden; cursor: pointer; display: block; position: relative; }
.cbx-dots i.on:after { content: ""; position: absolute; inset: 0; background: var(--cbx-vi2); transform-origin: left; animation: cbx-pg 4.5s linear forwards; }
.cbx-stage.paused .cbx-dots i.on:after { animation-play-state: paused; }
@keyframes cbx-pg { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ───────── sections ───────── */
.cbx-sec { padding: 46px 0 6px; }
.cbx-sec h2 { font-size: 26px; letter-spacing: -.6px; margin: 0 0 6px; color: #fff; }
.cbx-sec-sub { color: var(--cb-muted); margin: 0 0 20px; font-size: 15px; }
.cbx-uc { display: grid; grid-template-columns: repeat(7, 1fr); gap: 12px; }
.cbx-u { background: var(--cbx-panel); border: 1.5px solid var(--cb-line); border-radius: 18px; padding: 16px 8px; text-align: center; font-weight: 600; font-size: 14px; cursor: pointer; transition: .2s; color: #d9d6f5; font-family: inherit; }
.cbx-u .material-symbols-outlined { display: block; font-size: 28px; margin-bottom: 6px; color: var(--cbx-vi2); }
.cbx-u:hover { border-color: var(--cb-accent); }
.cbx-u[aria-pressed="true"] { border-color: var(--cb-accent); background: linear-gradient(180deg, #1d1347, #140d34); box-shadow: 0 0 30px rgba(124, 92, 255, .3); }
.cbx-reco { margin-top: 16px; background: linear-gradient(90deg, rgba(124, 92, 255, .16), transparent); border: 1px solid var(--cb-line); border-radius: 14px; padding: 14px 18px; font-size: 14px; color: #cfcaf5; display: none; }
.cbx-reco.show { display: block; }
.cbx-bento { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 215px; gap: 16px; }
.cbx-t { position: relative; border-radius: 26px; overflow: hidden; padding: 20px; display: flex; flex-direction: column; justify-content: flex-end; background: #171433; border: 1px solid var(--cb-line); transition: .25s; color: inherit; text-decoration: none; }
.cbx-t:hover { transform: translateY(-3px); border-color: var(--cb-accent); color: inherit; }
.cbx-t img { position: absolute; right: 12px; top: 12px; max-height: 60%; max-width: 56%; object-fit: contain; filter: drop-shadow(0 16px 24px rgba(0, 0, 0, .5)); }
.cbx-t h3 { font-size: 15.5px; margin: 4px 0 0; line-height: 1.3; max-width: 82%; font-weight: 600; color: #fff; }
.cbx-t.big { grid-column: span 2; grid-row: span 2; background: linear-gradient(135deg, #4338ca, #7c3aed 60%, #a855f7); }
.cbx-t.big img { max-height: 76%; max-width: 64%; } .cbx-t.big h3 { font-size: 26px; letter-spacing: -.5px; }
.cbx-t.wide { grid-column: span 2; background: linear-gradient(135deg, #0e7490, #2563eb); }
.cbx-t.wide.w2 { background: linear-gradient(135deg, #0f766e, #0e7490); }
.cbx-t.wide.w3 { background: linear-gradient(135deg, #9d174d, #7c3aed); }
.cbx-t.tall { grid-row: span 2; }
.cbx-t.tall img { max-height: 52%; max-width: 70%; }
.cbx-t:not(.big):not(.wide):not(.tall) img { max-height: 38%; max-width: 44%; }   /* 1x1 tiles: the 60% default ran into the title */

/* toolbar / grid on the dark palette */
body.cbx .cb-toolbar { position: sticky; top: 56px; z-index: 6; background: rgba(7, 4, 15, .88); backdrop-filter: blur(10px); border-bottom: 1px solid var(--cb-line); margin: 40px 0 0; padding: 12px 0; }
body.cbx .cb-pill { background: transparent; border-color: #2e2563; color: #c5c0ee; }
body.cbx .cb-pill.is-active { background: var(--cb-accent); border-color: var(--cb-accent); color: #fff; }
body.cbx .cb-search input, body.cbx .cb-sort-select { background: #0e0a24; border-color: var(--cb-line); color: #fff; }
body.cbx .cb-card { background: linear-gradient(180deg, #130d2e, #0b0720); }
body.cbx .cb-card:hover { box-shadow: 0 0 38px rgba(124, 92, 255, .22); }
body.cbx .cb-card-title a { color: #fff !important; }
body.cbx .cb-card-imgwrap { margin: 12px 12px 0; border-radius: 14px; }
body.cbx .cb-feature { background: var(--cb-feature-bg); color: var(--cb-mute-2); }
body.cbx .cb-feature.is-on { background: var(--cb-feature-bg-on); color: #cfc8ff; }
body.cbx .cb-card-cta, body.cbx .cb-card-compare:hover { color: var(--cbx-vi2); }
.cbx-bestfor { font-size: 12.5px; color: var(--cb-muted); margin: 0 0 8px; }
.cbx-bestfor b { color: #e4e0ff; font-weight: 600; }
.cbx-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 4px; }
.cbx-chip { font-size: 11px; border: 1px solid #352a70; color: #c4b9ff; border-radius: 6px; padding: 2px 8px; }
body.cbx .cb-guide, body.cbx .cb-faq { color: var(--cb-text); }
body.cbx .cb-guide-grid article, body.cbx .cb-faq details { background: var(--cbx-panel); border-color: var(--cb-line); }
body.cbx .cb-faq details { padding-left: 16px; padding-right: 16px; border: 1px solid var(--cb-line); border-radius: 14px; margin-bottom: 10px; }
body.cbx .cb-cta-band { background: linear-gradient(135deg, #1c1250, #2a1a78); border: 1px solid #3a2f7a; }

/* "Biometric attendance machines by technology" (2026-10-10): the light-theme guide was capped at 960px, narrower than
   every section around it, and its four cards were 228px wide with underlined titles. Let the card grid use the
   same 1160px column as the rest of the page; prose and lists keep a readable line length. */
body.cbx .cb-guide { max-width: none; }
body.cbx .cb-guide > p, body.cbx .cb-guide-list { max-width: 860px; }
body.cbx .cb-guide-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin: 18px 0 12px; }
body.cbx .cb-guide-grid article { padding: 22px; border-radius: 18px; transition: border-color .2s, transform .2s; }
body.cbx .cb-guide-grid article:hover { border-color: #6d4fe0; transform: translateY(-2px); }
body.cbx .cb-guide-grid h3 { font-size: 17px; font-weight: 600; margin: 0 0 10px; line-height: 1.3; }
body.cbx .cb-guide-grid h3 a { text-decoration: none; color: #fff; }
body.cbx .cb-guide-grid h3 a::after { content: " →"; color: #8b6cf6; }
[dir="rtl"] body.cbx .cb-guide-grid h3 a::after, body.cbx[dir="rtl"] .cb-guide-grid h3 a::after { content: " ←"; }
body.cbx .cb-guide-grid h3 a:hover { text-decoration: underline; }
body.cbx .cb-guide-grid p { font-size: 15px; line-height: 1.6; color: #b4b6d3; margin: 0; }
@media (max-width: 1000px) { body.cbx .cb-guide-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { body.cbx .cb-guide-grid { grid-template-columns: 1fr; } }

/* Buyer guide, the rest of it (2026-10-10): below the four technology cards the page dropped to bare text on the dark
   background - a 860px prose column, a plain bullet list, a 960px FAQ - three different widths with nothing holding
   them, so the block read as left-over copy. Now: the ISO/CE line is two badges, the use-case bullets are the same panel
   cards as the technology row (2x2), the closing sentence is a callout, and the FAQ spans the same 1160px column.
   Logical properties (inline-start / margin-inline) so right-to-left languages mirror without extra rules. */
body.cbx .cb-compliance { display: flex; flex-wrap: wrap; gap: 10px; margin: 44px 0 0; }
body.cbx .cb-compliance span { display: none; }
body.cbx .cb-compliance a { margin: 0; text-decoration: none; border: 1px solid var(--cb-line); background: var(--cbx-panel); border-radius: 999px; padding: 7px 14px; font-size: 13px; color: #d9d6f5; transition: border-color .2s, color .2s; }
body.cbx .cb-compliance a::before { content: "\2713"; color: var(--cbx-ok); margin-inline-end: 8px; font-weight: 700; }
body.cbx .cb-compliance a:hover { border-color: #6d4fe0; color: #fff; }
body.cbx .cb-guide { margin-top: 34px; }
body.cbx .cb-guide > p { max-width: 980px; font-size: 16.5px; }
body.cbx .cb-guide-list { list-style: none; padding: 0; margin: 18px 0 12px; max-width: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
body.cbx .cb-guide-list li { background: var(--cbx-panel); border: 1px solid var(--cb-line); border-radius: 18px; padding: 22px; font-size: 15px; line-height: 1.6; color: #b4b6d3; }
body.cbx .cb-guide-list li strong { display: block; color: #fff; font-size: 17px; font-weight: 600; margin-bottom: 8px; }
body.cbx .cb-guide > p:last-child:not(:first-of-type) { max-width: none; margin-top: 22px; padding: 20px 24px; background: var(--cbx-panel); border: 1px solid var(--cb-line); border-inline-start: 3px solid #8b6cf6; border-radius: 14px; }
body.cbx .cb-faq { max-width: none; }
@media (max-width: 760px) { body.cbx .cb-guide-list { grid-template-columns: 1fr; } }

/* ───────── spec page ───────── */
.cbx-spec .cb-breadcrumb { padding-top: 72px; }
.cbx-sub { position: sticky; top: 56px; z-index: 20; background: rgba(7, 4, 15, .92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--cb-line); margin-top: 30px; }
.cbx-sub .in { max-width: 1180px; margin: 0 auto; padding: 0 28px; display: flex; align-items: center; gap: 6px; height: 54px; overflow-x: auto; white-space: nowrap; }
.cbx-sub a.t { font-size: 14px; color: var(--cb-muted); padding: 8px 12px; border-radius: 8px; text-decoration: none; }
.cbx-sub a.t:hover { color: #fff; background: #150f33; }
.cbx-sub .nm { font-weight: 700; margin-right: 12px; font-size: 14px; color: #fff; }
.cbx-sub .sp { flex: 1; }
.cbx-glance { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 0 18px; }
.cbx-g { background: var(--cbx-panel); border: 1px solid var(--cb-line); border-radius: 14px; padding: 12px 14px; }
.cbx-g small { display: block; color: var(--cb-muted); font-size: 11px; letter-spacing: 1px; text-transform: uppercase; }
.cbx-g b { font-size: 17px; color: #fff; font-weight: 700; }
body.cbx .cb-spec-title { color: #fff; }
body.cbx .cb-spec-feature { background: #0e0924; border-color: #352a70; color: #cfc8ff; }
body.cbx .cb-spec-feature.is-off { opacity: .45; }
body.cbx .cb-spec-section-title, body.cbx .cbx-sec h2 { color: #fff; }
body.cbx .cb-spec-description { color: #cfd0ea; }
body.cbx .cb-spec-description h2, body.cbx .cb-spec-description h3, body.cbx .cb-spec-description h4, body.cbx .cb-spec-description strong { color: #fff; }
.cbx-ucards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.cbx-ucard { background: linear-gradient(135deg, #1a1245, #10182f); border: 1px solid var(--cb-line); border-radius: 20px; padding: 22px; display: flex; gap: 16px; transition: .2s; text-decoration: none; color: inherit; }
.cbx-ucard:hover { border-color: var(--cb-accent); transform: translateY(-2px); color: inherit; }
.cbx-ucard .material-symbols-outlined { font-size: 36px; color: var(--cbx-vi2); }
.cbx-ucard b { font-size: 17px; display: block; color: #fff; }
.cbx-ucard p { margin: 4px 0 8px; color: var(--cb-muted); font-size: 14px; }
.cbx-ucard span.more { color: var(--cbx-vi2); font-size: 13.5px; font-weight: 600; }
.cbx-ucard span.more:after { content: " →"; }
.cbx-tabs { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.cbx-tab { border: 1px solid #2e2563; border-radius: 999px; padding: 7px 15px; font-size: 13px; color: #c5c0ee; cursor: pointer; background: transparent; font-family: inherit; }
.cbx-tab[aria-selected="true"] { background: var(--cb-accent); border-color: var(--cb-accent); color: #fff; }
.cbx-specpane { display: none; }
.cbx-specpane.on { display: block; }
.cbx-spectable { width: 100%; border-collapse: collapse; background: var(--cbx-panel); border: 1px solid var(--cb-line); border-radius: 16px; overflow: hidden; }
.cbx-spectable td { padding: 12px 18px; border-bottom: 1px solid #1b1442; font-size: 14.5px; color: var(--cb-text); }
.cbx-spectable tr:last-child td { border-bottom: 0; }
.cbx-spectable td:first-child { color: var(--cb-muted); width: 42%; }
.cbx-related { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.cbx-related .product-card-div { min-width: 0; }
.cbx-rd { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.cbx-rd a { display: flex; gap: 12px; align-items: flex-start; background: var(--cbx-panel); border: 1px solid var(--cb-line); border-radius: 14px; padding: 14px 16px; transition: .2s; text-decoration: none; color: inherit; }
.cbx-rd a:hover { border-color: var(--cb-accent); color: inherit; }
.cbx-rd .material-symbols-outlined { color: var(--cbx-vi2); }
.cbx-rd b { display: block; font-size: 14.5px; line-height: 1.35; color: #fff; font-weight: 600; }
.cbx-rd small { color: var(--cb-muted); font-size: 12px; }
.cbx-sup { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.cbx-sup a { border: 1px solid #3a2f7a; border-radius: 999px; padding: 7px 14px; font-size: 13px; color: #d9d3ff; text-decoration: none; }
.cbx-sup a:hover { border-color: var(--cb-accent); color: #fff; }
.cbx-faq details { background: var(--cbx-panel); border: 1px solid var(--cb-line); border-radius: 14px; margin-bottom: 10px; padding: 0 18px; }
.cbx-faq summary { cursor: pointer; padding: 15px 0; font-weight: 600; list-style: none; display: flex; justify-content: space-between; color: #fff; }
.cbx-faq summary::-webkit-details-marker { display: none; }
.cbx-faq summary:after { content: "+"; color: var(--cbx-vi2); font-size: 20px; }
.cbx-faq details[open] summary:after { content: "\2212"; }
.cbx-faq details p { margin: 0 0 16px; color: #b9bbdc; font-size: 14.5px; }
body.cbx .cb-similar-scroll { display: none; }

@media (max-width: 900px) {
  .cbx-hero-grid { grid-template-columns: 1fr; }
  .cbx-stage { height: 340px; }
  .cbx-uc { grid-template-columns: repeat(4, 1fr); }
  .cbx-bento { grid-template-columns: repeat(2, 1fr); }
  .cbx-t.big, .cbx-t.wide { grid-column: span 2; }
  .cbx-ucards, .cbx-related, .cbx-rd { grid-template-columns: 1fr; }
  body.cbx .cb-toolbar, .cbx-sub { top: 52px; }
}
@media (max-width: 520px) { .cbx-uc { grid-template-columns: repeat(2, 1fr); } .cbx-glance { grid-template-columns: 1fr 1fr; } }
@media (prefers-reduced-motion: reduce) {
  .cbx-dev, .cbx-fc { transition: none; }
  .cbx-dots i.on:after { animation: none; transform: scaleX(1); }
}

/* Tile tip: link to the matching biometricapi.com page (2026-10-11) */
.cbx-reco-more { color: #fff; font-weight: 600; white-space: nowrap; margin-inline-start: 8px; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(167, 139, 250, .6); }
.cbx-reco-more:hover { text-decoration-color: #fff; }
[dir="rtl"] .cbx-arr { display: inline-block; transform: scaleX(-1); }

/* Picking a site type scrolls to the product grid (2026-10-11); keep it clear of the fixed header */
#products { scroll-margin-top: 90px; }
#cbx-gridnote { margin: 0 0 18px; }
/* ── Catalogue shelves / tabs (2026-10-11): Devices · Integrations · Accessories · Developer ───────────── */
.cbt-head { margin: 44px 0 0; } .cbt-head h2 { font-size: 26px; letter-spacing: -.6px; margin: 0 0 4px; color: #fff; } .cbt-head p { margin: 0; color: var(--cb-muted); }
body.cbx .cb-toolbar.cbt-bar { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 16px; }
.cbt-tabs { display: flex; gap: 4px; flex: 1 1 auto; overflow-x: auto; scrollbar-width: none; }
.cbt-tab { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; background: transparent; border: 0; border-bottom: 3px solid transparent; color: var(--cb-muted); padding: 12px 14px; font: 600 15px inherit; font-family: inherit; cursor: pointer; }
.cbt-tab:hover { color: #fff; } .cbt-tab[aria-selected="true"] { color: #fff; border-bottom-color: var(--cb-accent); }
.cbt-tab .material-symbols-outlined { font-size: 21px; }
.cbt-n { font-size: 12px; font-weight: 600; background: var(--cb-feature-bg); color: #cfc8ff; border-radius: 99px; padding: 1px 9px; }
.cbt-tab[aria-selected="true"] .cbt-n { background: var(--cb-feature-bg-on); } .cbt-n.hit { background: var(--cb-accent); color: #fff; }
.cbt-panel { padding-top: 18px; } .cbt-panel[hidden] { display: none; }
.cbt-lead { color: var(--cb-muted); margin: 0 0 16px; max-width: 760px; }
.cbt-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cbt-igrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 16px; }
.cbt-tile { display: flex; flex-direction: column; background: var(--cb-paper); border: 1px solid var(--cb-line); border-radius: 18px; overflow: hidden; text-decoration: none; color: inherit; transition: transform .2s, border-color .2s, box-shadow .2s; }
.cbt-tile:hover { transform: translateY(-3px); border-color: var(--cb-accent); color: inherit; box-shadow: 0 14px 34px rgba(0, 0, 0, .45); }
.cbt-art { aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center; background: var(--cb-card-imgwrap-bg); }
.cbt-art img { width: 100%; height: 100%; object-fit: contain; padding: 8%; transition: transform .25s; }
.cbt-tile:hover .cbt-art img { transform: scale(1.04); }
.cbt-body { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px 16px; flex: 1; }
.cbt-body b { color: var(--cb-ink); font-size: 16px; font-weight: 600; line-height: 1.25; }
.cbt-body small { color: var(--cb-muted); font-size: 12.5px; line-height: 1.4; }
.cbt-ft { margin-top: auto; padding-top: 8px; font-size: 13px; color: #a78bfa; font-weight: 600; display: flex; gap: 4px; align-items: center; } .cbt-ft .material-symbols-outlined { font-size: 17px; transition: transform .2s; }
.cbt-tile:hover .cbt-ft .material-symbols-outlined { transform: translateX(3px); }
.cbt-tile.cta { border-style: dashed; border-color: var(--cb-line-2); background: transparent; }
.cbt-tile.cta .cbt-art { background: transparent; } .cbt-tile.cta .cbt-art .material-symbols-outlined { font-size: 54px; color: #7c5cff; }
.cbt-tile[hidden] { display: none; }
@media (max-width: 720px) { .cbt-tab { padding: 10px; } .cbt-igrid { grid-template-columns: repeat(2, 1fr); gap: 10px; } .cbt-body b { font-size: 14px; } }
/* model name above each card title: the shared style.css colour (--cb-mute-2) is too faint on the dark cards */
body.cbx .cb-card-body .cb-card-eyebrow { color: #b9acff; font-size: 12px; letter-spacing: .8px; }