/* Products (hub) page — mobile-first. 3 breakpoints only: base (mobile) + 834px + 1440px,
   matching the source mockup (no 1200px tier). Layout rhythm follows tokens/layout.css +
   tokens/spacing.css; typography follows tokens/typography.css's mobile/desktop pairs. */

.section { border-top: var(--dl-border-hairline) solid var(--dl-border-default); }

/* ---------- Intro ---------- */
.products-intro {
  padding: var(--dl-space-4) var(--dl-gutter-mobile) var(--dl-space-3);
  display: flex; flex-direction: column; gap: var(--dl-space-2);
}
.products-intro__eyebrow {
  font-family: var(--dl-font-mono); font-size: 11px; letter-spacing: 0.1em;
  color: var(--dl-text-accent); text-transform: uppercase;
}
.products-intro__title {
  font-size: var(--dl-h1-size-mobile); font-weight: var(--dl-weight-semibold);
  line-height: var(--dl-h1-lh); letter-spacing: var(--dl-h1-tracking);
  text-wrap: pretty;
}
.products-intro__lead {
  font-size: var(--dl-body-size-mobile); line-height: var(--dl-body-lh);
  color: var(--dl-text-body); max-width: 46ch;
}
@media (min-width: 834px) {
  .products-intro { padding: var(--dl-space-6) var(--dl-gutter-tablet) var(--dl-space-5); gap: var(--dl-space-3); }
}
@media (min-width: 1440px) {
  .products-intro { padding: var(--dl-space-8) var(--dl-gutter-desktop) var(--dl-space-7); gap: var(--dl-space-3); }
  .products-intro__title { font-size: var(--dl-h1-size); }
  .products-intro__lead { font-size: var(--dl-body-size); max-width: 62ch; }
}

/* ---------- Product rows (DeviceOpen AI / Tool Box) ----------
   Mobile: compact bordered card — eyebrow, title, link only (media + lead hidden).
   Tablet+: full stacked block with media and lead copy.
   Desktop (1440+): two-column grid, media and text side by side. */
.product { padding: var(--dl-space-3) var(--dl-gutter-mobile); }
.product__inner {
  border: var(--dl-border-hairline) solid var(--dl-border-default);
  padding: var(--dl-space-3);
  display: flex; flex-direction: column; gap: var(--dl-inline-gap);
}
.product__media { display: none; }
.product__lead { display: none; }
.product__eyebrow {
  font-family: var(--dl-font-mono); font-size: 11px; color: var(--dl-text-secondary);
  text-transform: uppercase; letter-spacing: 0.04em;
}
.product__title { font-size: var(--dl-h2-size-mobile); font-weight: var(--dl-weight-semibold); }

@media (min-width: 834px) {
  .product { padding: var(--dl-space-5) var(--dl-gutter-tablet); }
  .product__inner { border: none; padding: 0; display: flex; flex-direction: column; gap: var(--dl-stack-gap); }
  .product__media { display: flex; flex-direction: column; gap: var(--dl-space-1); }
  .product__media-frame {
    position: relative; aspect-ratio: 16 / 9; overflow: hidden;
    background: var(--dl-graphite); border: var(--dl-border-hairline) solid var(--dl-border-default);
    display: flex; align-items: center; justify-content: center;
  }
  .product__media-frame img { width: 100%; height: 100%; object-fit: contain; display: block; }
  .product__media-frame--cover img { object-fit: cover; }
  .product__lead { display: block; font-size: var(--dl-body-small-size); line-height: var(--dl-body-lh); color: var(--dl-text-body); }
  .product__body { display: flex; flex-direction: column; gap: var(--dl-inline-gap); }
}
@media (min-width: 1440px) {
  .product { padding: var(--dl-space-7) var(--dl-gutter-desktop); }
  .product__inner { display: grid; grid-template-columns: 1fr 1fr; gap: var(--dl-space-5); align-items: center; }
  .product--reverse .product__media { order: 2; }
  .product__media-frame { aspect-ratio: 16 / 11; }
  .product__title { font-size: var(--dl-h2-size); }
  .product__lead { font-size: var(--dl-body-size); max-width: 46ch; }
}

/* ---------- Comparison table (desktop only — reserved for 1440px+, matching the mockup) ---------- */
.comparison { display: none; }
@media (min-width: 1440px) {
  .comparison { display: block; padding: var(--dl-space-6) var(--dl-gutter-desktop); }
  .comparison__label {
    display: block; margin-bottom: var(--dl-space-3);
    font-family: var(--dl-font-mono); font-size: 11px; letter-spacing: var(--dl-label-tracking);
    text-transform: uppercase; color: var(--dl-text-accent);
  }
  .comparison__scroll { overflow-x: auto; }
  .comparison__table {
    width: 100%; min-width: 640px; border-collapse: collapse;
    border: var(--dl-border-hairline) solid var(--dl-border-default);
  }
  .comparison__table th, .comparison__table td {
    padding: 14px 18px; text-align: left; border-bottom: var(--dl-border-hairline) solid var(--dl-border-default);
    border-left: var(--dl-border-hairline) solid var(--dl-border-default);
  }
  .comparison__table th:first-child, .comparison__table td:first-child { border-left: none; }
  .comparison__table thead th {
    font-size: 14px; font-weight: var(--dl-weight-semibold); color: var(--dl-text-primary);
  }
  .comparison__table thead th:first-child { background: transparent; }
  .comparison__table tbody th {
    font-family: var(--dl-font-mono); font-size: 11px; letter-spacing: var(--dl-label-tracking);
    text-transform: uppercase; color: var(--dl-text-secondary); font-weight: var(--dl-weight-regular);
    white-space: nowrap;
  }
  .comparison__table tbody td { font-size: 14px; color: var(--dl-text-body); }
  .comparison__table tbody tr:last-child th, .comparison__table tbody tr:last-child td { border-bottom: none; }
}

/* ---------- Support + contact bar ---------- */
.products-support { display: none; }
@media (min-width: 834px) {
  .products-support {
    display: flex; flex-direction: column; gap: var(--dl-space-2);
    padding: var(--dl-space-4) var(--dl-gutter-tablet);
  }
  .products-support__text { font-size: 14px; color: var(--dl-text-body); }
  .products-support__link { border-bottom: 1px solid currentColor; }
  .products-support__cta { display: none; }
}
@media (min-width: 1440px) {
  .products-support {
    flex-direction: row; align-items: center; justify-content: space-between;
    padding: var(--dl-space-6) var(--dl-gutter-desktop);
  }
  .products-support__text { font-size: 16px; }
  .products-support__cta { display: inline-flex; }
}