/* ============================================================
   Volumet website — shared page chrome on top of the
   design-system tokens (../colors_and_type.css).
   ============================================================ */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { margin: 0; padding: 0; }

body.volumet-page {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--type-body-md-size);
  line-height: var(--type-body-md-lh);
  -webkit-font-smoothing: antialiased;
}

/* Links are not underlined by default; the underline is a hover affordance
   only (card links, nav, prose). */
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------- Announce bar ---------- */
.site-announce {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  min-height: 40px;
  padding: 8px var(--space-lg);
  background: var(--surface-dark);
  color: var(--on-dark);
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-lh);
  text-align: center;
}
.site-announce a { color: #5C9DFF; font-weight: 500; text-decoration: none; }
.site-announce a:hover { text-decoration: underline; }

/* ---------- Top navigation ---------- */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--hairline);
}
.site-nav-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-lg);
  height: 64px;
  display: flex;
  align-items: center;
  gap: 28px;
}
.site-nav-links {
  display: flex;
  align-items: center;
  gap: 28px;
}
.site-nav a { text-decoration: none; }
.site-nav a:hover { text-decoration: none; }
.site-nav a.volumet-nav-link { text-decoration: none; }
.site-nav a.volumet-nav-link:hover { text-decoration: none; color: var(--primary); }
.site-nav a.volumet-nav-link.is-current { color: var(--primary); }
/* Top-nav action buttons (View equipment / Request a rental) — animated
   underline that wipes in on hover. currentColor adapts: white on the
   primary pill, ink on the secondary-light pill. */
.site-nav-actions .volumet-btn { position: relative; }
.site-nav-actions .volumet-btn::after {
  content: "";
  position: absolute;
  left: 16px; right: 16px; bottom: 7px;
  height: 1.5px;
  background: currentColor;
  opacity: 0.85;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--duration-fast) var(--ease-out);
}
.site-nav-actions .volumet-btn:hover::after { transform: scaleX(1); }
.site-nav-spacer { flex: 1; }
.site-nav-actions { display: flex; align-items: center; gap: 10px; }
/* Desktop nav action buttons keep the default pill radius; mobile drawer
   actions stay square. */
.mobile-drawer-actions .volumet-btn { border-radius: 0; }

/* ---------- Mobile nav (hamburger + drawer) ---------- */
/* Hidden on desktop; revealed at the same 1000px breakpoint that hides the
   inline nav links + action buttons (see Responsive section below). */
.site-nav-mobile { display: none; }
.nav-burger {
  appearance: none; -webkit-appearance: none;
  background: none; border: none; cursor: pointer;
  width: 40px; height: 40px; margin-right: -8px;
  display: inline-flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 5px;
  color: var(--ink);
}
.nav-burger span {
  display: block; width: 22px; height: 2px;
  background: currentColor; border-radius: 2px;
}
.nav-close {
  appearance: none; -webkit-appearance: none;
  background: none; border: none; cursor: pointer;
  width: 40px; height: 40px; margin-right: -8px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink);
}
.mobile-drawer {
  position: fixed; inset: 0; z-index: 60;
  background: var(--canvas);
  display: flex; flex-direction: column;
  padding: 0 var(--space-lg) calc(env(safe-area-inset-bottom) + var(--space-lg));
  opacity: 0; visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.2s var(--ease-out), transform 0.2s var(--ease-out), visibility 0.2s;
  overflow-y: auto;
}
.mobile-drawer.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
@media (min-width: 1001px) { .mobile-drawer { display: none; } }
.mobile-drawer-top {
  height: 64px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid var(--hairline);
  margin: 0 calc(-1 * var(--space-lg));
  padding: 0 var(--space-lg);
}
.mobile-drawer-body {
  display: flex; flex-direction: column;
  padding: var(--space-base) 0;
}
.mobile-nav-link {
  font-family: var(--font-sans); font-weight: 500; font-size: 20px;
  color: var(--ink); text-decoration: none;
  padding: 14px 0; border-bottom: 1px solid var(--hairline-soft);
}
.mobile-nav-link.is-current { color: var(--primary); }
.mobile-nav-group-label {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--muted);
  padding: 22px 0 10px;
}
.mobile-nav-device {
  display: flex; flex-direction: column; gap: 2px;
  padding: 10px 0; text-decoration: none;
}
.mobile-nav-device.is-current .nav-dd-name { color: var(--primary); }
.mobile-drawer-actions {
  margin-top: auto; padding-top: var(--space-lg);
  display: flex; flex-direction: column; gap: 10px;
}
.mobile-drawer-actions .volumet-btn { width: 100%; height: 48px; font-size: 15px; }

/* ---------- Nav hover dropdown ---------- */
/* No position:relative here — the full-width .nav-mega anchors to the sticky
   .site-nav, not the narrow trigger. (Adding relative would clip the panel.) */
.nav-dropdown { height: 64px; display: flex; align-items: center; }
.nav-dropdown-trigger { display: inline-flex; align-items: center; gap: 5px; }
.nav-dropdown-trigger svg { color: var(--muted); transition: transform var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out); }
.nav-dropdown:hover .nav-dropdown-trigger,
.nav-dropdown:focus-within .nav-dropdown-trigger { color: var(--primary); }
.nav-dropdown:hover .nav-dropdown-trigger svg,
.nav-dropdown:focus-within .nav-dropdown-trigger svg { transform: rotate(180deg); color: var(--primary); }
.nav-dropdown-menu {
  position: absolute;
  top: 100%;
  left: -14px;
  min-width: 232px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--canvas);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  box-shadow: 0 16px 40px rgba(10, 16, 28, 0.14);
  padding: 6px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s;
  z-index: 60;
}
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-dropdown-item {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 9px 12px;
  border-radius: var(--radius-md);
  text-decoration: none;
}
.nav-dropdown-trigger:hover,
.nav-dropdown-trigger:focus { text-decoration: none; }
.nav-dropdown-item:hover { background: var(--surface-soft); text-decoration: none; }
.nav-dropdown-item:hover .nav-dd-name,
.nav-dropdown-item:hover .nav-dd-desc { text-decoration: none; }
.nav-dd-name { font-size: 14px; font-weight: 500; color: var(--ink); line-height: 1.35; }
.nav-dropdown-item:hover .nav-dd-name,
.nav-dropdown-item.is-current .nav-dd-name { color: var(--primary); }
.nav-dd-desc { font-size: 12px; color: var(--muted); line-height: 1.4; }

/* ---------- Sections ---------- */
.band { padding: var(--space-section) 0; }
.band--tight { padding: var(--space-xxl) 0; }
.band--dark { background: var(--surface-dark); color: var(--on-dark); }
.band--soft { background: var(--surface-soft); }

.section-head {
  display: flex;
  flex-direction: column;
  gap: var(--space-base);
  max-width: 720px;
  margin-bottom: var(--space-xxl);
}
.section-head p { margin: 0; }

/* ---------- Dark hero ---------- */
.hero-dark {
  background: var(--surface-dark);
  color: var(--on-dark);
  padding: 96px 0 104px;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 64px;
  align-items: center;
}
.hero-dark h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--type-display-xl-size);
  line-height: var(--type-display-xl-lh);
  letter-spacing: var(--type-display-xl-tracking);
  color: var(--on-dark);
  margin: 0;
}
.hero-sub {
  font-size: 18px;
  line-height: 1.55;
  color: var(--on-dark-soft);
  max-width: 480px;
  margin: 0;
}
.hero-support {
  font-size: var(--type-body-sm-size);
  line-height: var(--type-body-sm-lh);
  color: var(--on-dark-soft);
  max-width: 460px;
  margin: 0;
}
.hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-microline {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--on-dark-soft);
}

/* Floating capture-stat cards (signature) */
.capture-stack { position: relative; height: 320px; }
.capture-card {
  position: absolute;
  width: 260px;
  background: var(--surface-dark-elevated);
  border-radius: var(--radius-xl);
  padding: var(--space-md);
}
.capture-card .cc-label {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 12px;
  color: var(--on-dark-soft);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.capture-card .cc-label--mono { font-family: var(--font-mono); font-weight: 500; font-size: 11px; }
.capture-card .cc-value {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 26px;
  color: var(--on-dark);
  margin-top: 6px;
  font-variant-numeric: tabular-nums;
}
.capture-card .cc-meta {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 12px;
  color: var(--semantic-up);
  margin-top: 2px;
}
.capture-glyphs { display: flex; gap: 6px; margin-top: 14px; }

/* ---------- Light hero ---------- */
.hero-light { padding: 96px 0 0; }
.hero-light h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--type-display-lg-size);
  line-height: var(--type-display-lg-lh);
  letter-spacing: var(--type-display-lg-tracking);
  color: var(--ink);
  margin: 0;
}
.hero-light .hero-sub { color: var(--body); }
.hero-light .hero-support { color: var(--muted); }

/* ---------- Stat band ---------- */
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-xl); }
.stat-cell { border-left: 1px solid var(--hairline); padding-left: var(--space-lg); }
.band--dark .stat-cell { border-left-color: rgba(255, 255, 255, 0.14); }
.band--dark .volumet-stat-value { color: var(--on-dark); }
.band--dark .volumet-stat-label { color: var(--on-dark-soft); }

/* ---------- Cross-section hero (device spans dark hero + spec band) ---------- */
.cross-hero { position: relative; }
.cross-hero .hero-dark { padding-bottom: 72px; }
.cross-specs { padding-top: 56px; padding-bottom: 72px; }
.cross-specs .volumet-container {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 64px;
  align-items: start;
}
.cross-specs-col { display: flex; flex-direction: column; gap: var(--space-lg); }
.cross-specs-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-lg) var(--space-xl);
}
/* the device image, absolutely positioned, crossing both sections */
.cross-media { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.cross-media-inner { position: relative; height: 100%; max-width: var(--container-max); margin: 0 auto; padding: 0 var(--space-lg); }
.cross-product {
  position: absolute;
  right: 5%;
  bottom: 36px;
  height: 760px;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 36px 60px rgba(0, 0, 0, 0.5));
}
/* PortalCam's product shot reads larger than the scanners — trim it slightly. */
.cross-product--sm { height: 660px; }

/* ---------- Card grids ---------- */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); align-items: stretch; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-lg); align-items: stretch; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-lg); align-items: stretch; }

.stack-card { display: flex; flex-direction: column; gap: var(--space-sm); }
.stack-card ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.stack-card li { font-size: 14px; line-height: 1.5; color: var(--body); display: flex; gap: 8px; }
.stack-card li::before { content: "·"; color: var(--primary); font-weight: 700; }
.stack-card .card-cta { margin-top: auto; padding-top: var(--space-base); }

/* Workflow / glyph card */
.glyph-card { display: flex; flex-direction: column; gap: var(--space-sm); }
.glyph-card p { margin: 0; }

/* ---------- Pricing tiers ---------- */
.tier { display: flex; flex-direction: column; gap: var(--space-sm); }
.tier ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.tier li { font-size: 14px; line-height: 1.5; color: var(--body); display: flex; gap: 8px; }
.tier li::before { content: "·"; color: var(--primary); font-weight: 700; }
.tier--dark { background: var(--surface-dark); color: var(--on-dark); border: none; }
.tier--dark li { color: var(--on-dark-soft); }
.tier .price {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 28px;
  letter-spacing: -0.5px;
  font-variant-numeric: tabular-nums;
}
.tier .per { font-family: var(--font-sans); font-size: 13px; color: var(--muted); font-weight: 400; }
.tier--dark .per { color: var(--on-dark-soft); }
.tier .card-cta { margin-top: auto; padding-top: var(--space-base); }

/* ---------- Steps ---------- */
.steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-xl); }
.step { display: flex; flex-direction: column; gap: 14px; }

/* ---------- Split band ---------- */
.split-band {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.split-copy { display: flex; flex-direction: column; gap: var(--space-base); }
.split-copy p { margin: 0; }
.bullet-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.bullet-list li { font-size: 15px; line-height: 1.5; color: var(--body); display: flex; gap: 10px; }
.bullet-list li::before { content: "·"; color: var(--primary); font-weight: 700; }
.band--dark .bullet-list li { color: var(--on-dark-soft); }

/* ---------- Equipment cards ---------- */
.equip-card { display: flex; flex-direction: column; gap: var(--space-base); background: var(--canvas); }
.equip-card .badges { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.equip-card .equip-foot {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  border-top: 1px solid var(--hairline-soft);
  padding-top: var(--space-base);
  margin-top: auto;
}

/* ---------- Forms ---------- */
.field { display: flex; flex-direction: column; gap: 8px; }
.field label { font-family: var(--font-sans); font-weight: 600; font-size: 14px; color: var(--ink); }
.field .hint { font-size: 13px; color: var(--muted); }
select.volumet-input {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235B616E' stroke-width='1.5'><path d='M6 9 L12 15 L18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
}
textarea.volumet-input { height: auto; min-height: 120px; resize: vertical; padding: 14px 16px; line-height: 1.5; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-base); }

/* ---------- FAQ ---------- */
.faq-wrap { max-width: 760px; }

/* ---------- Tables ---------- */
.table-scroll { overflow-x: auto; }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--canvas);
  border-top: 1px solid var(--hairline);
  padding: 64px 0 32px;
}
.footer-grid { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: var(--space-xxl) var(--space-xl); }
.footer-grid-spacer { grid-column: 1; }
.footer-brand { grid-column: 1; }
.footer-brand p { font-size: 13px; color: var(--muted); margin: 18px 0 0; line-height: 1.5; max-width: 240px; }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.footer-col a { font-size: 14px; color: var(--body); text-decoration: none; }
.footer-col a:hover { color: var(--primary); text-decoration: underline; }
.footer-legal {
  margin-top: 56px;
  padding-top: var(--space-lg);
  border-top: 1px solid var(--hairline);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.footer-legal .legal-row {
  display: flex;
  align-items: center;
  gap: var(--space-base);
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--muted);
}
.footer-disclaimer { font-size: 12px; line-height: 1.6; color: var(--muted-soft); max-width: 100%; margin: 0; }

/* ---------- Viewer placeholder ---------- */
.viewer-placeholder {
  height: 440px;
  border-radius: var(--radius-xl);
}

/* ---------- Real images ---------- */
.site-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 1px solid var(--hairline);
}
.site-img--contain {
  object-fit: contain;
  background: var(--surface-soft);
  padding: 24px;
}

/* Hero product image — borderless, enlarged, bleeds into the section below */
.hero-product {
  display: block;
  width: 100%;
  height: 560px;
  object-fit: contain;
  object-position: center bottom;
  background: none;
  border: none;
  padding: 0;
  align-self: end;
  margin-bottom: -104px;
  position: relative;
  z-index: 2;
  pointer-events: none;
}

/* ---------- Misc ---------- */
.tertiary-arrow { align-self: flex-start; }
.fine-note { font-size: 13px; color: var(--muted); margin: 0; }

/* ---------- Contact dc-card ---------- */
.dc-card { padding: 0; overflow: hidden; }
.dc-head { display: flex; align-items: center; gap: 18px; padding: 24px; }
.dc-pfp { width: 78px; height: 78px; border-radius: 50%; object-fit: cover; object-position: center top; flex-shrink: 0; box-shadow: 0 0 0 1px var(--hairline); }
.dc-actions { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--hairline); }
.dc-action { display: flex; align-items: center; justify-content: center; gap: 8px; height: 54px; font-family: var(--font-sans); font-weight: 600; font-size: 14px; color: var(--ink); text-decoration: none; transition: background 0.15s ease, color 0.15s ease; }
.dc-action svg { opacity: 0.55; }
.dc-action:first-child { border-right: 1px solid var(--hairline); }
.dc-action:hover { background: var(--surface-soft); color: var(--primary); }
.dc-action:hover svg { opacity: 1; stroke: var(--primary); }

/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
  .hero-grid, .split-band { grid-template-columns: 1fr; gap: var(--space-xxl); }
  .hero-product { height: 400px; margin-bottom: -56px; }
  .cross-specs .volumet-container { grid-template-columns: 1fr; }
  .cross-media { position: static; }
  .cross-media-inner { height: auto; text-align: center; padding: 0; }
  .cross-product { position: static; height: 420px; right: auto; bottom: auto; margin: 0 auto; }
  .capture-stack { height: 300px; max-width: 560px; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3, .steps-grid { grid-template-columns: 1fr; }
  .stat-grid { grid-template-columns: repeat(2, 1fr); row-gap: var(--space-xl); }
  .footer-grid { grid-template-columns: 1fr 1fr; row-gap: var(--space-xl); }
  .site-nav-links { display: none; }
  .site-nav-actions { display: none; }
  .site-nav-spacer { display: none; }
  .site-nav-mobile { display: inline-flex; margin-left: auto; }
}
@media (max-width: 640px) {
  .grid-4, .grid-2, .form-row { grid-template-columns: 1fr; }
  .hero-dark h1 { font-size: 44px; letter-spacing: -1px; }
  .hero-light h1 { font-size: 38px; letter-spacing: -0.6px; }
}

/* ============================================================
   Service area — island coverage map  (ported from design bundle)
   ============================================================ */
.coverage-map {
  position: relative;
  aspect-ratio: 1000 / 520;
  background: var(--surface-dark);
  border: 1px solid var(--hairline);
  margin-top: var(--space-xl);
}
.coverage-map__svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.coverage-map__meta {
  position: absolute; z-index: 4; pointer-events: none;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em;
  color: var(--on-dark-soft); text-transform: uppercase;
}
.coverage-map__meta--tl { top: 16px; left: 18px; }
.coverage-map__meta--bl { bottom: 16px; left: 18px; display: flex; align-items: center; gap: 8px; }
.coverage-map__meta--br { bottom: 16px; right: 18px; }
.coverage-map__meta strong { color: var(--on-dark); font-weight: 500; }
.coverage-map__key-dot { width: 8px; height: 8px; background: var(--primary); box-shadow: 0 0 0 3px rgba(0, 103, 255, 0.22); display: inline-block; }

.map-pin {
  position: absolute; transform: translate(-50%, -50%);
  width: 26px; height: 26px; display: grid; place-items: center;
  z-index: 5; cursor: pointer; text-decoration: none;
}
.map-pin:hover, .map-pin:focus-visible, .map-pin.is-active { z-index: 9; }
.pin-dot {
  width: 9px; height: 9px; background: var(--primary);
  outline: 1.5px solid var(--surface-dark);
  box-shadow: 0 0 0 4px rgba(0, 103, 255, 0.16);
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}
.map-pin:hover .pin-dot, .map-pin:focus-visible .pin-dot, .map-pin.is-active .pin-dot {
  transform: scale(1.3);
  box-shadow: 0 0 0 5px rgba(0, 103, 255, 0.3), 0 0 18px rgba(0, 103, 255, 0.55);
}
.pin-pulse {
  position: absolute; width: 9px; height: 9px;
  border: 1px solid rgba(0, 103, 255, 0.6);
  opacity: 0; pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .pin-pulse { animation: pinPulse 2.8s ease-out infinite; }
}
@keyframes pinPulse {
  0% { opacity: 0.65; transform: scale(1); }
  70%, 100% { opacity: 0; transform: scale(4.4); }
}
.map-tip {
  position: absolute; bottom: calc(100% + 10px); left: 50%;
  transform: translateX(-50%) translateY(4px);
  width: 184px; background: var(--canvas);
  border: 1px solid var(--hairline);
  box-shadow: 0 18px 44px rgba(10, 16, 28, 0.3);
  padding: 12px 14px; display: flex; flex-direction: column; gap: 5px;
  text-align: left; opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s;
}
.map-pin--below .map-tip { bottom: auto; top: calc(100% + 10px); transform: translateX(-50%) translateY(-4px); }
.map-pin:hover .map-tip, .map-pin:focus-visible .map-tip, .map-pin.is-active .map-tip {
  opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}
.map-tip__name { font-family: var(--font-sans); font-weight: 600; font-size: 14px; color: var(--ink); line-height: 1.3; }
.map-tip__type { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.02em; color: var(--muted); }
.map-tip__link { font-family: var(--font-sans); font-size: 12px; font-weight: 500; color: var(--primary); margin-top: 2px; }

.district-index { margin-top: var(--space-xl); }
.district-index__head {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted); padding-bottom: 12px; border-bottom: 1px solid var(--hairline);
}
.district-cols {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 var(--space-xxl);
  margin-top: var(--space-sm);
}
.district-group__label {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted-soft); margin: 18px 0 4px;
}
.district-row {
  display: flex; align-items: baseline; gap: 10px; padding: 8px 10px; margin: 0 -10px;
  text-decoration: none; transition: background 0.14s ease;
}
.district-row:hover, .district-row.is-active { background: var(--surface-soft); text-decoration: none; }
.district-row__name { font-size: 15px; color: var(--ink); font-weight: 500; }
.district-row:hover .district-row__name, .district-row.is-active .district-row__name { color: var(--primary); }
.district-row__type { font-family: var(--font-mono); font-size: 11px; color: var(--muted); margin-left: auto; white-space: nowrap; }
.district-row__arrow { color: var(--primary); opacity: 0; transition: opacity 0.14s ease; }
.district-row:hover .district-row__arrow, .district-row.is-active .district-row__arrow { opacity: 1; }

@media (max-width: 1000px) {
  .district-cols { grid-template-columns: 1fr 1fr; gap: 0 var(--space-xl); }
}
@media (max-width: 640px) {
  .district-cols { grid-template-columns: 1fr; }
}

/* ============================================================
   Home page — pointcloud hero + section blocks
   (ported from design bundle: site/index.html <style> + home-heroes.js)
   ============================================================ */
.hero-pc { position: relative; background: var(--surface-dark); color: var(--on-dark); overflow: hidden; }
#pc-canvas { position: absolute; inset: 0; display: block; }
.hero-pc-inner {
  position: relative; z-index: 2; display: flex; align-items: center;
  min-height: clamp(560px, 82vh, 800px);
  padding-top: 48px; padding-bottom: 48px; box-sizing: border-box;
  pointer-events: none;
}
.hero-pc-copy { display: flex; flex-direction: column; gap: 20px; max-width: 620px; }
.hero-pc-copy a { pointer-events: auto; }
.hero-pc h1 {
  font-family: var(--font-display); font-weight: 400;
  font-size: var(--type-display-xl-size); line-height: var(--type-display-xl-lh);
  letter-spacing: var(--type-display-xl-tracking); color: var(--on-dark); margin: 0;
}
.home-h1 .h1-period { color: var(--primary); }

/* ---------- Grid-reveal hero (Variant G — current landing hero) ---------- */
.hero-reveal {
  display: flex; flex-direction: column;
  background: var(--canvas);
  min-height: calc(100svh - 110px);
}
.hr-copy {
  flex: 0 0 38.2%;
  display: flex; align-items: center;
  padding: 36px 0 18px; box-sizing: border-box;
}
.hr-copy-grid {
  display: grid; grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(32px, 5vw, 88px); align-items: center;
  width: 100%; box-sizing: border-box;
}
.hr-copy-left { display: flex; flex-direction: column; gap: 16px; }
.hr-copy-right { display: flex; flex-direction: column; gap: 18px; }
/* ============================================================
   ⚠️ DO NOT ADD `margin: 0` (or any margin reset) TO .home-h1 BELOW ⚠️
   ------------------------------------------------------------
   The hero's overline→title vertical gap depends ENTIRELY on the
   browser's default <h1> top margin (~0.67em ≈ 41px). The design
   source (site/index.html, Variant G) sets NO margin on this rule
   on purpose — that default margin IS the spacing.

   A `margin: 0` here collapses the gap from ~58px to ~16px and the
   title slams up against the overline. This bug was shipped once
   (a stray margin reset in the initial hero port) and took several
   rounds to track down — see commit a950b4e.

   If you re-port this hero from the design bundle, KEEP this rule
   margin-free. Do not "tidy up" by adding a margin reset.
   ============================================================ */
.hero-reveal .home-h1 {
  font-family: var(--font-display);
  color: var(--ink); font-weight: 300;
  font-size: clamp(38px, 4.3vw, 62px); line-height: 1.04;
  letter-spacing: -0.018em;
  /* margin intentionally unset — see warning above */
}
.hero-reveal .hero-sub {
  color: var(--body); font-size: 17px; line-height: 1.55;
  max-width: 540px; margin: 0;
}
.hr-media {
  position: relative; flex: 1 1 auto; min-height: 320px;
  overflow: hidden; background: #FFFFFF; cursor: crosshair;
}
#hr-canvas { position: absolute; inset: 0; display: block; }

.tech-col { display: flex; flex-direction: column; gap: 12px; border-top: 1px solid var(--hairline); padding-top: 16px; }
.tech-col p { margin: 0; }

.home-fleet-card { text-decoration: none; color: inherit; display: flex; flex-direction: column; gap: var(--space-base); }
.home-fleet-card:hover { text-decoration: none; }
.home-fleet-card .fleet-photo {
  display: block; width: 100%; height: 220px; object-fit: contain;
  background: var(--surface-soft); padding: 16px; box-sizing: border-box;
  transition: transform var(--duration-fast) var(--ease-out);
}
/* The whole card is a link — give the photo a gentle zoom and nudge the
   "View →" arrow forward so the card reads as pressable, not inert. */
.home-fleet-card .fleet-arrow { transition: transform var(--duration-fast) var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .home-fleet-card:hover .fleet-photo { transform: scale(1.02); }
  .home-fleet-card:hover .fleet-arrow { transform: translateX(3px); }
}
.home-fleet-card .fleet-arrow { font-size: 14px; font-weight: 600; color: var(--primary); white-space: nowrap; }
.home-fleet-card p { margin: 0; }

.home-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-xl); }

.aud-rows { display: flex; flex-direction: column; }
.aud-row {
  display: grid; grid-template-columns: 32px minmax(220px, 300px) 1fr auto;
  gap: var(--space-lg); align-items: center; padding: var(--space-lg) 0;
  border-top: 1px solid var(--hairline); text-decoration: none;
}
.aud-rows .aud-row:last-child { border-bottom: 1px solid var(--hairline); }
.aud-row:hover { text-decoration: none; }
.aud-row .aud-title { transition: color var(--duration-fast) var(--ease-out); }
.aud-row .aud-arrow { font-size: 16px; color: var(--muted); transition: color var(--duration-fast) var(--ease-out); }
.aud-row:hover .aud-title, .aud-row:hover .aud-arrow { color: var(--primary); }
.aud-row p { margin: 0; }

.home-outputs-photo { display: block; width: 100%; height: 420px; object-fit: cover; border: 1px solid var(--hairline); }

@media (max-width: 1000px) {
  .home-steps { grid-template-columns: repeat(2, 1fr); }
  .aud-row { grid-template-columns: 32px 1fr auto; }
  .aud-row p.aud-desc { grid-column: 2 / 4; }
  .hero-pc-inner { min-height: clamp(520px, 70vh, 680px); }
  .hr-copy { flex-basis: auto; }
  .hr-copy-grid { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
}
@media (max-width: 640px) {
  .home-steps { grid-template-columns: 1fr; }
  .home-outputs-photo { height: 280px; }
}

/* --- coverage markers (react-map-gl) — white dots --- */
.coverage-map .maplibregl-map { position: absolute; inset: 0; width: 100%; height: 100%; background: var(--surface-dark); }
.coverage-map .maplibregl-ctrl-attrib { display: none; }
.cov-marker { position: relative; width: 26px; height: 26px; display: grid; place-items: center; cursor: pointer; }
.cov-marker:hover, .cov-marker.is-active { z-index: 9; }
.cov-marker .pin-pulse { position: absolute; border-color: rgba(255, 255, 255, 0.6); }
.cov-marker .pin-dot {
  background: #fff;
  outline: 1.5px solid var(--surface-dark);
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.16);
}
.cov-marker:hover .pin-dot, .cov-marker.is-active .pin-dot {
  transform: scale(1.3);
  box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.35), 0 0 18px rgba(255, 255, 255, 0.6);
}
.cov-marker:hover .map-tip, .cov-marker.is-active .map-tip {
  opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}

/* ---------- Reduced motion ----------
   Honour the OS setting: keep opacity/colour fades and functional state
   changes (switch, accordion, tooltips, press feedback) that aid
   comprehension, but drop decorative movement — the looping scan-pulse and
   the hover lift/zoom that exist purely for delight. "Fewer, not zero." */
@media (prefers-reduced-motion: reduce) {
  .pin-pulse { animation: none; }
  .volumet-card--hover:hover { transform: none; }
  .home-fleet-card:hover .fleet-photo,
  .home-fleet-card:hover .fleet-arrow { transform: none; }
}

/* ======================================================================
   NEW DESIGN PATTERNS — ported from volumet-design-system bundle
   (nav mega-menu, image heroes, editorial patterns, compare builder +
   compare-detail). Appended; live responsive/tuning above is preserved.
   ====================================================================== */

/* --- Nav mega-menu panels --- */
.nav-mega {
  position: absolute; top: 64px; left: 0; right: 0;
  background: var(--canvas);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  box-shadow: 0 28px 50px -12px rgba(10, 16, 28, 0.16);
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
  z-index: 55;
}
.nav-dropdown:hover .nav-mega,
.nav-dropdown:focus-within .nav-mega { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-mega-inner {
  max-width: var(--container-max); margin: 0 auto;
  padding: 36px var(--space-lg) 40px;
  display: grid; grid-template-columns: 1fr 340px; gap: 56px; align-items: stretch;
}
.nav-mega-groups { display: flex; gap: 56px; }
.nav-mega-group { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.nav-mega-label {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--muted); font-weight: 600;
  padding-bottom: 12px; border-bottom: 1px solid var(--hairline);
}
.nav-mega-items { display: flex; flex-direction: column; gap: 2px; }
.nav-mega-items--grid { display: grid; grid-template-columns: repeat(3, minmax(188px, 1fr)); gap: 2px 28px; }
.nav-mega-item {
  display: flex; align-items: center; gap: 14px; padding: 9px 10px;
  border-radius: var(--radius-md); text-decoration: none;
}
.nav-mega-item:hover { background: var(--surface-soft); text-decoration: none; }
.nav-mega-ico {
  flex: 0 0 42px; width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--hairline); border-radius: 0; color: var(--ink); background: var(--canvas);
  transition: color 0.15s ease;
}
.nav-mega-item:hover .nav-mega-ico { color: var(--primary); }
.nav-mega-item.is-current .nav-mega-ico { color: var(--primary); }
.nav-mega-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.nav-mega-name { font-size: 14.5px; font-weight: 600; color: var(--ink); line-height: 1.3; }
.nav-mega-item:hover .nav-mega-name,
.nav-mega-item.is-current .nav-mega-name { color: var(--primary); }
.nav-mega-desc { font-size: 12.5px; color: var(--muted); line-height: 1.35; }

.nav-mega-feature {
  background: var(--surface-soft); border: 1px solid var(--hairline); border-radius: var(--radius-lg);
  padding: 24px; display: flex; flex-direction: column; gap: 10px;
}
.nav-mega-feature-k { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--primary); font-weight: 600; }
.nav-mega-feature-title { font-size: 19px; font-weight: 600; color: var(--ink); line-height: 1.25; letter-spacing: -0.01em; }
.nav-mega-feature-desc { font-size: 13px; color: var(--muted); line-height: 1.5; margin: 0; }
.nav-mega-feature-link { margin-top: auto; padding-top: 8px; font-size: 14px; font-weight: 600; color: var(--primary); display: inline-flex; align-items: center; gap: 7px; text-decoration: none; }
.nav-mega-feature-link:hover { text-decoration: underline; }
.nav-mega-feature-link svg { transition: transform 0.15s ease; }
.nav-mega-feature-link:hover svg { transform: translateX(3px); }
@media (max-width: 1180px) {
  .nav-mega-inner { grid-template-columns: 1fr; gap: 28px; }
}

/* --- Image hero (industry pages) --- */
.hero-image {
  position: relative;
  padding: 132px 0 76px;
  background-color: var(--surface-dark);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  isolation: isolate;
}
.hero-image::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(11,13,16,0.90) 0%, rgba(11,13,16,0.70) 42%, rgba(11,13,16,0.30) 78%, rgba(11,13,16,0.18) 100%),
    linear-gradient(0deg, rgba(11,13,16,0.55) 0%, rgba(11,13,16,0) 40%);
}
.hero-image .volumet-overline { color: #8FB6FF; }
.hero-image h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--type-display-lg-size);
  line-height: var(--type-display-lg-lh);
  letter-spacing: var(--type-display-lg-tracking);
  color: var(--on-dark);
  margin: 0;
}
.hero-image .hero-sub { color: rgba(255,255,255,0.84); }
.hero-image .hero-support { color: rgba(255,255,255,0.66); }
.hero-image .volumet-btn--secondary-light {
  background: rgba(255,255,255,0.10);
  color: var(--on-dark);
  border-color: rgba(255,255,255,0.42);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.hero-image .volumet-btn--secondary-light:hover {
  background: rgba(255,255,255,0.18);
  border-color: rgba(255,255,255,0.6);
}
@media (max-width: 640px) {
  .hero-image { padding: 112px 0 56px; }
  .hero-image::after {
    background: linear-gradient(90deg, rgba(11,13,16,0.92) 0%, rgba(11,13,16,0.78) 60%, rgba(11,13,16,0.5) 100%);
  }
}

/* ---------- Stat band ---------- */

/* --- Long-form + comparison-page body + expanded footer grid --- */
.article-wide .article { max-width: none; }
.article-wide .article p { font-size: 16px; line-height: 1.7; }
.article-wide .article li { font-size: 16px; }
/* Article/guide section headings: normal bold (not the browser's heavy
   default) — sans, weight 600. */
.article h2 { font-family: var(--font-sans); font-weight: 600; font-size: 22px; line-height: 1.35; color: var(--ink); margin: var(--space-lg) 0 0; }
.article h3 { font-family: var(--font-sans); font-weight: 600; font-size: 17px; line-height: 1.4; color: var(--ink); margin: var(--space-base) 0 0; }

/* Comparison pages — space under the hero head-to-head + full-width prose */
.cmp-page .hero-light { padding-bottom: var(--space-xxl); }
.cmp-page .article { max-width: none; }
.footer-grid--expanded { grid-template-columns: 1.4fr repeat(5, 1fr); }
@media (max-width: 1000px) {
  .footer-grid--expanded { grid-template-columns: 1fr 1fr; }
}

/* --- Footer legal links --- */
.footer-legal .legal-links { display: flex; align-items: center; gap: var(--space-base); flex-wrap: wrap; }
.footer-legal .legal-links a { color: var(--muted); text-decoration: none; }
.footer-legal .legal-links a:hover { color: var(--primary); text-decoration: underline; }

/* ======================================================================
   Compare builder
   ====================================================================== */
#compare-builder { display: flex; flex-direction: column; gap: var(--space-lg); }
.cb-controls { display: flex; flex-wrap: wrap; gap: var(--space-base); align-items: center; justify-content: space-between; }
.cb-search-wrap { position: relative; flex: 1 1 320px; max-width: 460px; }
.cb-search-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.cb-search {
  width: 100%; height: 46px; padding: 0 16px 0 42px; font: inherit; font-size: 15px;
  color: var(--ink); background: var(--canvas); border: 1px solid var(--hairline);
  border-radius: var(--radius-lg); outline: none; transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.cb-search:focus { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary) 18%, transparent); }
.cb-filters { display: flex; flex-wrap: wrap; gap: 6px; }
.cb-filter {
  font: inherit; font-size: 13px; font-weight: 500; color: var(--body); cursor: pointer;
  padding: 8px 14px; background: var(--canvas); border: 1px solid var(--hairline);
  border-radius: 999px; transition: all 0.14s ease;
}
.cb-filter:hover { border-color: var(--primary); color: var(--primary); }
.cb-filter.is-on { background: var(--ink); color: var(--canvas); border-color: var(--ink); }

.cb-layout { display: grid; grid-template-columns: 340px 1fr; gap: var(--space-xl); align-items: start; }
.cb-picker-wrap { position: sticky; top: 84px; border: 1px solid var(--hairline); border-radius: var(--radius-lg); background: var(--canvas); overflow: hidden; }
.cb-picker-head {
  display: flex; align-items: center; justify-content: space-between; padding: 14px 16px;
  border-bottom: 1px solid var(--hairline); background: var(--surface-soft);
  font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); font-family: var(--font-mono);
}
.cb-picker { max-height: 560px; overflow-y: auto; padding: 8px; display: flex; flex-direction: column; gap: 4px; }
.cb-group-label { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted-soft); padding: 12px 10px 6px; font-weight: 600; }
.cb-option {
  width: 100%; display: flex; align-items: center; gap: 12px; text-align: left; cursor: pointer;
  padding: 10px 12px; background: transparent; border: 1px solid transparent; border-radius: var(--radius-md);
  transition: background 0.14s ease, border-color 0.14s ease;
}
.cb-option:hover:not(.is-disabled) { background: var(--surface-soft); }
.cb-option.is-on { background: color-mix(in oklab, var(--primary) 8%, transparent); border-color: color-mix(in oklab, var(--primary) 30%, transparent); }
.cb-option.is-disabled { opacity: 0.4; cursor: not-allowed; }
/* No box around the +/✓ glyph — the icon inherits the button colour
   (ink when idle, white when the card is selected). */
.cb-check {
  flex: 0 0 18px; width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center;
  border: none; background: none; color: inherit;
}
.cb-option-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cb-option-name { font-size: 14px; font-weight: 600; color: var(--ink); display: flex; align-items: center; gap: 8px; }
.cb-option-tag { font-size: 12px; color: var(--muted); }
.cb-rent { font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--primary); border: 1px solid color-mix(in oklab, var(--primary) 35%, transparent); border-radius: 4px; padding: 1px 5px; font-weight: 600; }
.cb-empty { padding: 24px 12px; color: var(--muted); font-size: 14px; }

.cb-result { min-width: 0; display: flex; flex-direction: column; gap: var(--space-base); }
.cb-hint, .cb-table-host .cb-hint { padding: 48px 24px; text-align: center; color: var(--muted); border: 1px dashed var(--hairline); border-radius: var(--radius-lg); }
.cb-table-scroll { overflow-x: auto; border: 1px solid var(--hairline); border-radius: var(--radius-lg); }
.cb-table { width: 100%; border-collapse: collapse; min-width: 560px; }
.cb-table th, .cb-table td { text-align: left; padding: 14px 16px; border-bottom: 1px solid var(--hairline); vertical-align: top; font-size: 14px; line-height: 1.5; }
.cb-table thead th { background: var(--surface-soft); vertical-align: bottom; position: relative; }
.cb-rowhead { font-size: 12px !important; letter-spacing: 0.03em; text-transform: uppercase; color: var(--muted); font-weight: 600; white-space: nowrap; width: 168px; background: var(--surface-soft); }
.cb-col-name { font-size: 15px; font-weight: 700; color: var(--ink); }
.cb-col-tag { font-size: 12px; color: var(--muted); margin: 2px 0 8px; }
.cb-badge { display: inline-block; font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase; font-weight: 600; padding: 2px 7px; border-radius: 5px; }
.cb-badge--rent { color: var(--primary); background: color-mix(in oklab, var(--primary) 12%, transparent); }
.cb-badge--edu { color: var(--muted); background: var(--surface-soft); border: 1px solid var(--hairline); }
.cb-remove { display: block; margin-top: 10px; font: inherit; font-size: 12px; color: var(--muted); background: none; border: none; cursor: pointer; padding: 0; text-decoration: underline; }
.cb-remove:hover { color: var(--primary); }
.cb-na { color: var(--muted-soft); }
.cb-cta, .cb-link { color: var(--primary); text-decoration: none; font-weight: 500; }
.cb-cta:hover, .cb-link:hover { text-decoration: underline; }

/* ---------- Versus-style device card grid ---------- */
.cb-cards-host { display: flex; flex-direction: column; gap: var(--space-xl); }
.cb-cat-head { display: flex; align-items: baseline; gap: 10px; padding-bottom: var(--space-sm); margin-bottom: var(--space-base); border-bottom: 2px solid var(--ink); }
.cb-cat-label { font-family: var(--font-sans); font-weight: 600; font-size: 18px; color: var(--ink); }
.cb-cat-count { font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
.cb-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--space-base); }
.cb-card { position: relative; display: flex; flex-direction: column; border: 1px solid var(--hairline); background: var(--canvas); transition: border-color 0.14s ease, box-shadow 0.14s ease; }
.cb-card:hover { box-shadow: var(--shadow-soft); }
.cb-card.is-on { border-color: var(--primary); }
.cb-card.is-on::after { content: ""; position: absolute; inset: 0; border: 2px solid var(--primary); pointer-events: none; z-index: 4; }
.cb-card.is-disabled { opacity: 0.5; }
.cb-card-media { height: 150px; display: flex; align-items: center; justify-content: center; background: var(--surface-soft); border-bottom: 1px solid var(--hairline); overflow: hidden; }
.cb-card-media img { height: 132px; width: auto; object-fit: contain; mix-blend-mode: multiply; }
.cb-card-media--ph { background: repeating-linear-gradient(45deg, var(--surface-soft) 0 10px, var(--surface-strong) 10px 20px); font-family: var(--font-mono); font-size: 11px; color: var(--muted); }
.cb-card-body { display: flex; flex-direction: column; gap: 12px; padding: var(--space-base); flex: 1; }
.cb-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.cb-card-name { font-family: var(--font-sans); font-weight: 600; font-size: 16px; color: var(--ink); }
.cb-card-tag { font-size: 12px; color: var(--muted); margin-top: 2px; }
.cb-card-specs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.cb-card-specs li { font-family: var(--font-mono); font-size: 12px; color: var(--body); display: flex; gap: 7px; align-items: center; }
.cb-card-specs li::before { content: ""; width: 4px; height: 4px; background: var(--primary); flex: 0 0 4px; }
.cb-card-select { margin-top: auto; display: inline-flex; align-items: center; gap: 8px; justify-content: center; width: 100%; height: 40px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; color: var(--ink); background: var(--surface-strong); border: none; border-radius: var(--radius-pill); transition: background 0.14s ease, color 0.14s ease; }
.cb-card-select:hover:not(:disabled) { background: var(--surface-dark); color: var(--on-dark); }
.cb-card.is-on .cb-card-select { background: var(--primary); color: var(--on-primary); }
.cb-card-select:disabled { cursor: not-allowed; color: var(--muted); }
.cb-card-select .cb-check { flex: 0 0 18px; width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; }

/* Live side-by-side — head-to-head cards reuse .cmp-h2h.
   The device cards are aligned with the spec-table columns below: a left
   gutter matching the 220px spec-label column, then equal columns over each
   device. The .cb-h2h.cb-h2h--* selectors are doubled-up so they beat the
   base .cmp-h2h grid template regardless of source order. */
.cb-h2h { margin-top: 0; margin-bottom: var(--space-base); }
.cb-h2h-gutter { display: none; }
@media (min-width: 901px) {
  .cb-h2h.cb-h2h--pair,
  .cb-h2h.cb-h2h--multi {
    /* drop the unified bordered box — each device is its own card so it can
       sit directly above its spec column, with the gutter empty */
    border: none;
    background: transparent;
    gap: var(--space-xl);
    align-items: stretch;
  }
  .cb-h2h.cb-h2h--pair { grid-template-columns: 220px 1fr 1fr; }
  .cb-h2h.cb-h2h--multi { grid-template-columns: 220px repeat(var(--n), minmax(0, 1fr)); }
  .cb-h2h .cb-h2h-gutter { display: block; }
  .cb-h2h .cmp-h2h-col {
    border: 1px solid var(--hairline);
    background: var(--canvas);
  }
  .cb-h2h .cmp-h2h-col--b { background: var(--surface-soft); }
}
.cb-h2h .cmp-h2h-col { position: relative; }
.cb-h2h-remove { position: absolute; top: 10px; right: 4px; z-index: 2; background: none; border: none; color: #E5484D; cursor: pointer; padding: 4px; display: inline-flex; align-items: center; justify-content: center; line-height: 0; border-radius: 0; }
.cb-h2h-remove:hover { color: #C2161B; background: rgba(229, 72, 77, 0.1); }

/* ---------- Live result + sticky tray ---------- */
.cb-result { display: flex; flex-direction: column; gap: var(--space-base); scroll-margin-top: 80px; }
.cb-result-head { padding-top: var(--space-sm); border-top: 1px solid var(--hairline); }
.cb-tray { position: sticky; bottom: 16px; z-index: 20; }
.cb-tray-inner { display: flex; align-items: center; gap: var(--space-base); padding: 12px 16px; background: var(--primary); color: var(--on-primary); box-shadow: 0 10px 30px color-mix(in oklab, var(--primary) 38%, transparent); flex-wrap: wrap; }
.cb-tray-meta { display: flex; flex-direction: column; line-height: 1.1; }
.cb-tray-count { font-family: var(--font-mono); font-weight: 500; font-size: 18px; }
.cb-tray-label { font-size: 11px; color: rgba(255,255,255,0.82); letter-spacing: 0.02em; }
.cb-tray-items { display: flex; gap: 8px; flex: 1; flex-wrap: wrap; min-width: 0; }
.cb-tray-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; background: rgba(255,255,255,0.16); font-size: 12px; font-weight: 500; color: #fff; border: 1px solid rgba(255,255,255,0.24); }
.cb-tray-chip--empty { color: rgba(255,255,255,0.72); border-style: dashed; font-weight: 400; }
.cb-tray-x { display: inline-flex; padding: 0; background: none; border: none; color: rgba(255,255,255,0.78); cursor: pointer; }
.cb-tray-x:hover { color: #fff; }
.cb-tray-actions { flex: 0 0 auto; }
.cb-tray .cb-tray-go { background: var(--canvas); color: var(--primary); }
.cb-tray .cb-tray-go:hover:not([disabled]) { background: #fff; }
.cb-tray-go[disabled] { background: rgba(255,255,255,0.18); color: rgba(255,255,255,0.7); cursor: not-allowed; }

@media (max-width: 900px) {
  .cb-layout { grid-template-columns: 1fr; }
  .cb-picker-wrap { position: static; }
  .cb-picker { max-height: 380px; }
  .cb-cards { grid-template-columns: 1fr; }
  .cb-tray-items { order: 3; flex-basis: 100%; }
}

/* ======================================================================
   REUSABLE EDITORIAL PATTERNS
   Added to break the hero-light + section-head + grid + split-band
   sameness across content pages. Square corners throughout; pills and
   circles only; mono for labels & numbers; display stays weight 400.
   ====================================================================== */

/* ---------- Media frame — square, hairline, cover by default ---------- */
.media-frame { position: relative; overflow: hidden; background: var(--surface-soft); border: 1px solid var(--hairline); display: block; }
.media-frame > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.media-frame--dark { background: var(--surface-dark); border-color: transparent; }
.ar-16-9 { aspect-ratio: 16 / 9; }
.ar-4-3 { aspect-ratio: 4 / 3; }
.ar-3-2 { aspect-ratio: 3 / 2; }
.ar-1-1 { aspect-ratio: 1 / 1; }
.ar-21-9 { aspect-ratio: 21 / 9; }

/* corner tag on a media frame (mono spec sticker) */
.frame-tag {
  position: absolute; left: 14px; bottom: 14px; z-index: 2;
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--on-dark);
  background: rgba(7, 11, 20, 0.72); border: 1px solid rgba(255,255,255,0.16);
  padding: 6px 10px; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.frame-tag::before { content: ""; width: 6px; height: 6px; background: #5C9DFF; flex: none; }

/* ---------- Feature hero with full-bleed media + scrim ---------- */
.feature-hero { position: relative; background: var(--surface-dark); color: var(--on-dark); overflow: hidden; }
.feature-hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.55; }
.feature-hero__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7,11,20,0.55) 0%, rgba(7,11,20,0.35) 38%, rgba(7,11,20,0.82) 100%); }
.feature-hero__inner { position: relative; z-index: 2; padding: 132px 0 56px; display: flex; flex-direction: column; gap: 20px; }
.feature-hero h1 {
  font-family: var(--font-display); font-weight: 400;
  font-size: var(--type-display-xl-size); line-height: var(--type-display-xl-lh);
  letter-spacing: var(--type-display-xl-tracking); color: var(--on-dark); margin: 0; max-width: 16ch;
}
.feature-hero .hero-sub { color: rgba(233,237,244,0.86); max-width: 600px; }
.feature-hero .volumet-overline { color: #5C9DFF; }
/* mono fact strip docked at the bottom of a feature hero */
.feature-hero__facts { position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: 0; border-top: 1px solid rgba(255,255,255,0.16); }
.feature-hero__fact { flex: 1 1 0; min-width: 160px; padding: 18px 24px 18px 0; }
.feature-hero__fact + .feature-hero__fact { padding-left: 24px; border-left: 1px solid rgba(255,255,255,0.14); }
.feature-hero__fact .fk { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--on-dark-soft); }
.feature-hero__fact .fv { font-family: var(--font-mono); font-weight: 500; font-size: 24px; color: var(--on-dark); margin-top: 6px; font-variant-numeric: tabular-nums; }

/* ---------- Horizontal scroll gallery (scroll-snap) ---------- */
.hscroll-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-lg); margin-bottom: var(--space-lg); }
.hscroll-hint { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.hscroll-hint svg { color: var(--primary); }
.hscroll {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(340px, 42%);
  gap: var(--space-lg); overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: var(--space-base); margin: 0 calc(-1 * var(--space-lg)); padding-left: var(--space-lg); padding-right: var(--space-lg);
  scrollbar-width: thin;
}
.hscroll::-webkit-scrollbar { height: 6px; }
.hscroll::-webkit-scrollbar-thumb { background: var(--hairline); }
.hscroll-card { scroll-snap-align: start; display: flex; flex-direction: column; text-decoration: none; color: inherit; }
.hscroll-card:hover { text-decoration: none; }
.hscroll-card .media-frame { transition: border-color var(--duration-fast) var(--ease-out); }
.hscroll-card:hover .media-frame { border-color: var(--primary); }
.hscroll-card .hsc-body { display: flex; flex-direction: column; gap: 8px; padding-top: var(--space-base); }
.hscroll-card .hsc-go { font-size: 14px; font-weight: 600; color: var(--primary); margin-top: 4px; }

/* ---------- Case feed — large alternating image + copy rows ---------- */
.case-feed { display: flex; flex-direction: column; gap: var(--space-section); }
.case-row { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: var(--space-xxl); align-items: center; }
.case-row--reverse .case-row__media { order: 2; }
.case-row__copy { display: flex; flex-direction: column; gap: var(--space-base); }
.case-row__copy p { margin: 0; }
.case-row__num { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.06em; color: var(--muted); font-variant-numeric: tabular-nums; }
.case-row__metrics { display: flex; flex-wrap: wrap; gap: 0; border-top: 1px solid var(--hairline); margin-top: var(--space-sm); }
.case-row__metric { flex: 1 1 0; min-width: 120px; padding: 16px 20px 0 0; }
.case-row__metric + .case-row__metric { padding-left: 20px; border-left: 1px solid var(--hairline); }
.case-row__metric .mk { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }
.case-row__metric .mv { font-family: var(--font-mono); font-weight: 500; font-size: 22px; color: var(--ink); margin-top: 4px; font-variant-numeric: tabular-nums; }

/* ---------- Ledger — numbered editorial directory rows ---------- */
.ledger { border-top: 1px solid var(--ink); }
.ledger-row {
  display: grid; grid-template-columns: 64px minmax(220px, 1fr) 1.4fr auto;
  gap: var(--space-xl); align-items: start;
  padding: var(--space-xl) 0; border-bottom: 1px solid var(--hairline);
  text-decoration: none; transition: background var(--duration-fast) var(--ease-out);
}
.ledger-row:hover { text-decoration: none; background: var(--surface-soft); }
.ledger-row__num { font-family: var(--font-mono); font-weight: 500; font-size: 15px; color: var(--primary); font-variant-numeric: tabular-nums; padding-top: 4px; }
.ledger-row__title { display: flex; flex-direction: column; gap: 10px; }
.ledger-row__title .lt { font-family: var(--font-sans); font-weight: 600; font-size: 22px; line-height: 1.2; letter-spacing: -0.01em; color: var(--ink); }
.ledger-row__title .ld { font-size: 14px; line-height: 1.5; color: var(--muted); margin: 0; }
.ledger-row__list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.ledger-row__list li { font-size: 14px; line-height: 1.5; color: var(--body); display: flex; gap: 10px; }
.ledger-row__list li::before { content: ""; width: 6px; height: 6px; margin-top: 7px; background: var(--primary); flex: none; }
.ledger-row__go { align-self: center; font-size: 22px; color: var(--muted); transition: color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out); }
.ledger-row:hover .ledger-row__go { color: var(--primary); transform: translateX(4px); }

/* ---------- Editorial index — featured article + list ---------- */
.editorial-feature { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: var(--space-xxl); align-items: stretch; text-decoration: none; color: inherit; }
.editorial-feature:hover { text-decoration: none; }
.editorial-feature .media-frame { transition: border-color var(--duration-fast) var(--ease-out); min-height: 360px; }
.editorial-feature:hover .media-frame { border-color: var(--primary); }
.editorial-feature__copy { display: flex; flex-direction: column; gap: var(--space-base); justify-content: center; }
.editorial-feature__copy h2 { font-family: var(--font-display); font-weight: 400; font-size: var(--type-display-sm-size); line-height: var(--type-display-sm-lh); letter-spacing: var(--type-display-sm-tracking); color: var(--ink); margin: 0; }
.editorial-feature__copy p { margin: 0; color: var(--body); }
.editorial-feature__go { font-size: 15px; font-weight: 600; color: var(--primary); display: inline-flex; align-items: center; gap: 8px; }
.editorial-feature:hover .editorial-feature__go { text-decoration: underline; }

.guide-list { border-top: 1px solid var(--ink); }
.guide-row {
  display: grid; grid-template-columns: 150px 1fr auto; gap: var(--space-xl); align-items: center;
  padding: var(--space-lg) 0; border-bottom: 1px solid var(--hairline);
  text-decoration: none; transition: background var(--duration-fast) var(--ease-out);
}
.guide-row:hover { text-decoration: none; background: var(--surface-soft); }
.guide-row__cat { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--primary); }
.guide-row__body { display: flex; flex-direction: column; gap: 6px; }
.guide-row__body .gt { font-family: var(--font-sans); font-weight: 600; font-size: 19px; line-height: 1.3; color: var(--ink); letter-spacing: -0.01em; }
.guide-row__body .gd { font-size: 14px; line-height: 1.5; color: var(--muted); margin: 0; }
.guide-row__go { font-size: 20px; color: var(--muted); transition: color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out); }
.guide-row:hover .guide-row__go { color: var(--primary); transform: translateX(4px); }

/* ---------- Pipeline — connected step flow ---------- */
.pipeline { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 0; border: 1px solid var(--hairline); }
.pipeline-step { position: relative; padding: var(--space-lg); display: flex; flex-direction: column; gap: 10px; }
.pipeline-step + .pipeline-step { border-left: 1px solid var(--hairline); }
.pipeline-step__k { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--primary); }
.pipeline-step__t { font-family: var(--font-sans); font-weight: 600; font-size: 17px; color: var(--ink); }
.pipeline-step__d { font-size: 13.5px; line-height: 1.5; color: var(--muted); margin: 0; }
.pipeline-step__arrow { position: absolute; right: -9px; top: 50%; transform: translateY(-50%); z-index: 2; width: 18px; height: 18px; background: var(--canvas); border: 1px solid var(--hairline); border-radius: var(--radius-full); display: grid; place-items: center; color: var(--muted); }
.pipeline-step:last-child .pipeline-step__arrow { display: none; }
.pipeline--owned { background: color-mix(in oklab, var(--primary) 5%, transparent); }
.pipeline--owned .pipeline-step__k { color: var(--primary); }

/* ---------- Manifest — numbered principle blocks ---------- */
.manifest { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; border-top: 1px solid var(--hairline); border-left: 1px solid var(--hairline); }
.manifest-item { padding: var(--space-xl); border-right: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); display: flex; flex-direction: column; gap: 10px; }
.manifest-item__n { font-family: var(--font-mono); font-weight: 500; font-size: 13px; color: var(--primary); font-variant-numeric: tabular-nums; }
.manifest-item__t { font-family: var(--font-sans); font-weight: 600; font-size: 19px; line-height: 1.25; letter-spacing: -0.01em; color: var(--ink); }
.manifest-item__d { font-size: 14.5px; line-height: 1.55; color: var(--body); margin: 0; }

/* ---------- Prose rail — long-form with sticky contents ---------- */
.prose-rail { display: grid; grid-template-columns: 220px 1fr; gap: var(--space-section); align-items: start; }
.prose-contents { position: sticky; top: 88px; display: flex; flex-direction: column; gap: 4px; }
.prose-contents__label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); padding-bottom: 12px; margin-bottom: 6px; border-bottom: 1px solid var(--hairline); }
.prose-contents a { font-size: 14px; line-height: 1.4; color: var(--body); text-decoration: none; padding: 7px 0; border-bottom: 1px solid transparent; }
.prose-contents a:hover { color: var(--primary); text-decoration: none; }
.prose-body { max-width: 720px; }

/* ---------- Quote band — editorial pull statement ---------- */
.statement { max-width: 920px; }
.statement__q { font-family: var(--font-display); font-weight: 400; font-size: var(--type-display-md-size); line-height: 1.18; letter-spacing: var(--type-display-md-tracking); color: var(--ink); margin: 0; text-wrap: balance; }
.band--dark .statement__q { color: var(--on-dark); }
.statement__a { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); margin-top: var(--space-lg); }
.band--dark .statement__a { color: var(--on-dark-soft); }

/* ---------- Responsive for new patterns ---------- */
@media (max-width: 1000px) {
  .feature-hero h1 { font-size: 44px; letter-spacing: -1px; }
  .case-row, .case-row--reverse .case-row__media { grid-template-columns: 1fr; }
  .case-row { gap: var(--space-xl); }
  .case-row--reverse .case-row__media { order: 0; }
  .editorial-feature { grid-template-columns: 1fr; }
  .editorial-feature .media-frame { min-height: 0; }
  .prose-rail { grid-template-columns: 1fr; gap: var(--space-xl); }
  .prose-contents { position: static; flex-direction: row; flex-wrap: wrap; gap: 6px 16px; }
  .prose-contents__label { width: 100%; }
  .ledger-row { grid-template-columns: 40px 1fr; gap: var(--space-base) var(--space-lg); }
  .ledger-row__list { grid-column: 2; }
  .ledger-row__go { display: none; }
  .pipeline { grid-auto-flow: row; grid-auto-columns: auto; }
  .pipeline-step + .pipeline-step { border-left: none; border-top: 1px solid var(--hairline); }
  .pipeline-step__arrow { display: none !important; }
  .statement__q { font-size: 30px; letter-spacing: -0.5px; }
}
@media (max-width: 640px) {
  .hscroll { grid-auto-columns: 82%; }
  .manifest { grid-template-columns: 1fr; }
  .guide-row { grid-template-columns: 1fr; gap: 8px; padding: var(--space-base) 0; }
  .guide-row__go { display: none; }
  .feature-hero__fact + .feature-hero__fact { padding-left: 0; border-left: none; }
  .case-row__metric + .case-row__metric { padding-left: 0; border-left: none; }
}


/* ======================================================================
   COMPARE DETAIL — head-to-head hero + verdict scorecard + spec bars
   ====================================================================== */
/* ===== Compare v2 — head-to-head + visual spec bars (Volumet) ===== */
  .cmp-breadcrumb { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); display: flex; gap: 8px; align-items: center; }
  .cmp-breadcrumb a { color: var(--muted); text-decoration: none; }
  .cmp-breadcrumb a:hover { color: var(--ink); }
  .cmp-breadcrumb span { color: var(--ink); white-space: nowrap; }

  /* Head-to-head card */
  .cmp-h2h {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: stretch;
    border: 1px solid var(--hairline);
    background: var(--canvas);
    margin-top: var(--space-xxl);
  }
  .cmp-h2h-col { display: flex; flex-direction: column; gap: var(--space-base); padding: var(--space-xl); }
  /* Both product columns share the card's white background (symmetric). */
  .cmp-h2h-col--b { background: transparent; }
  .cmp-h2h-media {
    min-height: 240px;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--hairline);
    background: var(--canvas);
    /* Inner padding so the product doesn't fill the box edge-to-edge, and
       overflow:visible so the product's drop-shadow isn't clipped into a
       hard square. */
    padding: 32px 28px;
    overflow: visible;
  }
  .cmp-h2h-media img { max-height: 188px; width: auto; object-fit: contain; filter: drop-shadow(0 18px 30px rgba(0,0,0,0.22)); }
  .cmp-h2h-media.cmp-placeholder {
    background: repeating-linear-gradient(45deg, var(--surface-soft) 0 12px, var(--surface-strong) 12px 24px);
    font-family: var(--font-mono); font-size: 12px; color: var(--muted);
  }
  .cmp-eyebrow { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
  .cmp-h2h-name { font-family: var(--font-sans); font-weight: 600; font-size: 22px; line-height: 1.2; color: var(--ink); }
  .cmp-h2h-tag { font-size: 14px; line-height: 1.5; color: var(--body); margin: 0; }
  .cmp-h2h-status { margin-top: auto; display: flex; flex-direction: column; gap: 4px; }
  .cmp-status-line { display: flex; align-items: baseline; gap: 8px; }
  .cmp-price { font-family: var(--font-mono); font-weight: 500; font-size: 24px; color: var(--ink); font-variant-numeric: tabular-nums; }
  .cmp-price-unit { font-family: var(--font-mono); font-size: 13px; color: var(--muted); }
  .cmp-avail { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.02em; }
  .cmp-avail--yes { color: var(--semantic-up); }
  .cmp-avail--no { color: var(--muted); }
  .cmp-avail .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: 0 0 7px; }
  .cmp-vs {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 0 var(--space-lg);
    border-left: 1px solid var(--hairline);
    border-right: 1px solid var(--hairline);
    background: var(--canvas);
  }
  .cmp-vs-mark {
    width: 56px; height: 56px; border-radius: 50%;
    background: var(--ink); color: var(--on-dark);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-mono); font-weight: 500; font-size: 15px; letter-spacing: 0.02em;
  }

  /* Verdict scorecard — category winner chips */
  .cmp-scorecard { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--hairline); border: 1px solid var(--hairline); }
  .cmp-score-cell { background: var(--canvas); padding: var(--space-lg); display: flex; flex-direction: column; gap: 8px; }
  .cmp-score-cat { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
  .cmp-score-winner { font-family: var(--font-sans); font-weight: 600; font-size: 17px; color: var(--ink); display: flex; align-items: center; gap: 8px; }
  .cmp-score-winner .tick { width: 18px; height: 18px; flex: 0 0 18px; color: var(--primary); }
  .cmp-score-note { font-size: 13px; line-height: 1.45; color: var(--body); margin: 0; }

  /* Spec bar comparison */
  .cmp-specs { display: flex; flex-direction: column; gap: var(--space-xxl); }
  .cmp-specgroup { display: flex; flex-direction: column; }
  .cmp-specgroup-head {
    display: flex; align-items: center; gap: var(--space-sm);
    padding-bottom: var(--space-sm);
    border-bottom: 2px solid var(--ink);
    margin-bottom: var(--space-xs);
  }
  .cmp-specgroup-head h3 { font-family: var(--font-sans); font-weight: 600; font-size: 18px; color: var(--ink); margin: 0; }
  .cmp-specgroup-head .num { font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
  .cmp-row { display: grid; grid-template-columns: 220px 1fr 1fr; gap: var(--space-xl); padding: var(--space-md) 0; border-bottom: 1px solid var(--hairline-soft); align-items: start; }
  .cmp-row-label { display: flex; flex-direction: column; gap: 4px; }
  .cmp-row-label .k { font-family: var(--font-sans); font-weight: 500; font-size: 14px; color: var(--ink); }
  .cmp-row-label .m { font-size: 12px; line-height: 1.4; color: var(--muted); }
  .cmp-cell { display: flex; flex-direction: column; gap: 8px; }
  .cmp-cell-val { display: flex; align-items: baseline; gap: 8px; }
  .cmp-cell-val .v { font-family: var(--font-mono); font-weight: 500; font-size: 15px; color: var(--ink); font-variant-numeric: tabular-nums; }
  .cmp-cell-val .sub { font-size: 13px; color: var(--body); }
  .cmp-tag { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; padding: 3px 8px; border-radius: var(--radius-pill); background: var(--surface-strong); color: var(--muted); white-space: nowrap; }
  .cmp-tag--win { background: rgba(0,103,255,0.10); color: var(--primary); }
  .cmp-bar { height: 6px; background: var(--surface-strong); overflow: hidden; }
  .cmp-bar i { display: block; height: 100%; background: var(--muted-soft); }
  .cmp-cell--win .cmp-bar i { background: var(--primary); }
  .cmp-bool { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-sans); font-size: 14px; color: var(--ink); }
  .cmp-bool svg { width: 18px; height: 18px; flex: 0 0 18px; }
  .cmp-bool--yes svg { color: var(--semantic-up); }
  .cmp-bool--no { color: var(--muted); }
  .cmp-bool--no svg { color: var(--muted-soft); }
  .cmp-colhead { display: grid; grid-template-columns: 220px 1fr 1fr; gap: var(--space-xl); padding-bottom: var(--space-sm); }
  .cmp-colhead .h { font-family: var(--font-sans); font-weight: 600; font-size: 15px; color: var(--ink); display: flex; align-items: center; gap: 8px; }
  .cmp-colhead .h .pin { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase; padding: 2px 8px; border-radius: var(--radius-pill); }
  .cmp-colhead .h .pin--a { background: var(--primary); color: var(--on-primary); }
  .cmp-colhead .h .pin--b { background: var(--surface-strong); color: var(--muted); }

  @media (max-width: 900px) {
    .cmp-h2h { grid-template-columns: 1fr; }
    .cmp-vs { border: none; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); padding: var(--space-base); flex-direction: row; gap: 12px; }
    .cmp-scorecard { grid-template-columns: 1fr; }
    .cmp-row, .cmp-colhead { grid-template-columns: 1fr; gap: var(--space-sm); }
    .cmp-colhead { display: none; }
  }