/* DeviceOpen AI product page — mobile-first. Layout rhythm follows tokens/layout.css + tokens/spacing.css;
   typography follows the token system's own two-tier (mobile / desktop) contract in tokens/typography.css. */

.breadcrumb {
  padding: var(--dl-space-2) var(--dl-gutter-mobile) 0;
  display: flex; align-items: center; gap: 6px;
  font-family: var(--dl-font-mono); font-size: 11px; letter-spacing: var(--dl-label-tracking);
  text-transform: uppercase; color: var(--dl-text-secondary);
}
.breadcrumb a:hover { color: var(--dl-text-accent); }
.breadcrumb__current { color: var(--dl-text-primary); }
@media (min-width: 834px) { .breadcrumb { padding: var(--dl-space-3) var(--dl-gutter-tablet) 0; } }
@media (min-width: 1200px) { .breadcrumb { padding: var(--dl-space-3) var(--dl-gutter-laptop) 0; } }
@media (min-width: 1440px) { .breadcrumb { padding: var(--dl-space-4) var(--dl-gutter-desktop) 0; } }

/* ---------- Hero ---------- */
.product-hero {
  padding: var(--dl-space-4) var(--dl-gutter-mobile) var(--dl-space-3);
  display: flex; flex-direction: column; gap: var(--dl-space-3);
}
.product-hero__copy { display: flex; flex-direction: column; gap: var(--dl-space-2); }
.product-hero__eyebrow {
  font-family: var(--dl-font-mono); font-size: 11px; letter-spacing: 0.1em;
  color: var(--dl-text-accent); text-transform: uppercase;
}
.product-hero__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;
}
.product-hero__lead { font-size: var(--dl-body-size-mobile); line-height: var(--dl-body-lh); color: var(--dl-text-body); max-width: 46ch; }
.product-hero__actions { display: flex; flex-direction: column; gap: var(--dl-inline-gap); align-items: flex-start; }

.product-hero__media { margin: 0; display: flex; flex-direction: column; gap: var(--dl-space-1); }
.product-hero__media-frame {
  position: relative; aspect-ratio: 4 / 3; 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-hero__media-frame img { width: 100%; height: 100%; object-fit: contain; display: block; }

@media (min-width: 834px) {
  .product-hero { padding: var(--dl-space-6) var(--dl-gutter-tablet) var(--dl-space-5); gap: var(--dl-space-4); }
  .product-hero__actions { flex-direction: row; align-items: center; }
  .product-hero__media-frame { aspect-ratio: 16 / 10; }
}
@media (min-width: 1200px) {
  .product-hero {
    padding: var(--dl-space-7) var(--dl-gutter-laptop) var(--dl-space-6);
    display: grid; grid-template-columns: 1fr 1.1fr; gap: var(--dl-space-5); align-items: center;
  }
  .product-hero__title { font-size: var(--dl-h1-size); }
  .product-hero__lead { font-size: var(--dl-body-large-size); max-width: 34ch; }
}
@media (min-width: 1440px) {
  .product-hero { padding: var(--dl-space-8) var(--dl-gutter-desktop) var(--dl-space-7); gap: var(--dl-space-6); }
}

/* ---------- How structured guidance works ---------- */
.capabilities { padding: var(--dl-space-4) var(--dl-gutter-mobile); border-top: var(--dl-border-hairline) solid var(--dl-border-default); }
.capabilities__label {
  display: block; margin-bottom: var(--dl-space-3);
  font-family: var(--dl-font-mono); font-size: 11px; letter-spacing: var(--dl-label-tracking);
  color: var(--dl-text-accent); text-transform: uppercase;
}
.capabilities__grid { display: flex; flex-direction: column; gap: var(--dl-space-3); }
.capabilities__item {
  border-top: var(--dl-border-medium) solid var(--dl-text-primary); padding-top: var(--dl-space-2);
  display: flex; flex-direction: column; gap: 8px;
}
.capabilities__item-title { font-size: 16px; font-weight: var(--dl-weight-semibold); }
.capabilities__item-text { font-size: var(--dl-body-small-size); line-height: var(--dl-body-lh); color: var(--dl-text-body); }

@media (min-width: 834px) {
  .capabilities { padding: var(--dl-space-5) var(--dl-gutter-tablet); }
  .capabilities__grid { flex-direction: row; gap: var(--dl-space-3); }
  .capabilities__item { flex: 1; }
}
@media (min-width: 1200px) {
  .capabilities {
    padding: var(--dl-space-6) var(--dl-gutter-laptop);
    display: grid; grid-template-columns: 220px 1fr; gap: var(--dl-space-4); align-items: start;
  }
  .capabilities__label { margin-bottom: 0; }
}
@media (min-width: 1440px) {
  .capabilities { padding: var(--dl-space-7) var(--dl-gutter-desktop); }
}

/* ---------- Guidance and assistance in the application ---------- */
.showcase { padding: var(--dl-space-4) var(--dl-gutter-mobile); border-top: var(--dl-border-hairline) solid var(--dl-border-default); }
.showcase__label {
  display: block; margin-bottom: var(--dl-space-3);
  font-family: var(--dl-font-mono); font-size: 11px; letter-spacing: var(--dl-label-tracking);
  color: var(--dl-text-accent); text-transform: uppercase;
}
.showcase__grid { display: flex; flex-direction: column; gap: var(--dl-space-3); }
.showcase__card { margin: 0; display: flex; flex-direction: column; gap: var(--dl-space-1); }
.showcase__frame {
  position: relative; aspect-ratio: 4 / 3; overflow: hidden;
  background: var(--dl-graphite); border: var(--dl-border-hairline) solid var(--dl-border-default);
  display: flex; align-items: center; justify-content: center;
}
.showcase__frame img { width: 100%; height: 100%; object-fit: contain; display: block; }

@media (min-width: 834px) {
  .showcase { padding: var(--dl-space-5) var(--dl-gutter-tablet); }
  .showcase__grid { flex-direction: row; gap: var(--dl-space-2); }
  .showcase__card { flex: 1; }
}
@media (min-width: 1200px) {
  .showcase {
    padding: var(--dl-space-6) var(--dl-gutter-laptop);
    display: grid; grid-template-columns: 220px 1fr; gap: var(--dl-space-4); align-items: start;
  }
  .showcase__label { margin-bottom: 0; }
  .showcase__frame { aspect-ratio: 16 / 10; }
}
@media (min-width: 1440px) {
  .showcase { padding: var(--dl-space-7) var(--dl-gutter-desktop); }
}

/* ---------- Safety information ---------- */
.safety { padding: var(--dl-space-4) var(--dl-gutter-mobile); border-top: var(--dl-border-hairline) solid var(--dl-border-default); }
.safety__label {
  display: block; margin-bottom: var(--dl-space-2);
  font-family: var(--dl-font-mono); font-size: 11px; letter-spacing: var(--dl-label-tracking);
  color: var(--dl-text-accent); text-transform: uppercase;
}
.safety__box {
  background: var(--dl-accent-soft); border: var(--dl-border-hairline) solid var(--dl-accent-border);
  border-radius: var(--dl-radius-sm); padding: var(--dl-space-2) var(--dl-space-3); max-width: 720px;
}
.safety__box-label {
  font-family: var(--dl-font-mono); font-size: 11px; letter-spacing: var(--dl-label-tracking);
  color: var(--dl-text-accent); text-transform: uppercase;
}
.safety__box-text { margin-top: 6px; font-size: var(--dl-body-small-size); line-height: var(--dl-body-lh); color: var(--dl-text-body); }

@media (min-width: 834px) { .safety { padding: var(--dl-space-5) var(--dl-gutter-tablet); } }
@media (min-width: 1200px) {
  .safety {
    padding: var(--dl-space-6) var(--dl-gutter-laptop);
    display: grid; grid-template-columns: 220px 1fr; gap: var(--dl-space-4);
  }
  .safety__label { margin-bottom: 0; }
}
@media (min-width: 1440px) { .safety { padding: var(--dl-space-7) var(--dl-gutter-desktop); } }

/* ---------- Platforms + requirements + availability ---------- */
.specs { padding: var(--dl-space-4) var(--dl-gutter-mobile); border-top: var(--dl-border-hairline) solid var(--dl-border-default); }
.specs__label {
  display: block; margin-bottom: var(--dl-space-2);
  font-family: var(--dl-font-mono); font-size: 11px; letter-spacing: var(--dl-label-tracking);
  color: var(--dl-text-accent); text-transform: uppercase;
}
.specs__table { display: grid; grid-template-columns: 1fr; gap: 0; max-width: 720px; }
.specs__table dt {
  font-family: var(--dl-font-mono); font-size: 11px; color: var(--dl-text-secondary); text-transform: uppercase;
  letter-spacing: var(--dl-label-tracking); padding: var(--dl-space-2) 0 4px;
  border-top: var(--dl-border-hairline) solid var(--dl-border-default);
}
.specs__table dd { font-size: var(--dl-body-size-mobile); padding-bottom: var(--dl-space-2); }

@media (min-width: 834px) { .specs { padding: var(--dl-space-5) var(--dl-gutter-tablet); } }
@media (min-width: 1200px) {
  .specs {
    padding: var(--dl-space-6) var(--dl-gutter-laptop);
    display: grid; grid-template-columns: 220px 1fr; gap: var(--dl-space-4);
  }
  .specs__label { margin-bottom: 0; }
  .specs__table { grid-template-columns: 200px 1fr; }
  .specs__table dt { padding: 11px 0; }
  .specs__table dd { padding: 11px 0; border-top: var(--dl-border-hairline) solid var(--dl-border-default); font-size: var(--dl-body-size); }
}
@media (min-width: 1440px) { .specs { padding: var(--dl-space-7) var(--dl-gutter-desktop); } }

/* ---------- Support CTA ---------- */
.support-cta {
  padding: var(--dl-space-4) var(--dl-gutter-mobile); border-top: var(--dl-border-hairline) solid var(--dl-border-default);
  display: flex; flex-direction: column; gap: var(--dl-space-2);
}
.support-cta__text { font-size: var(--dl-body-size-mobile); line-height: var(--dl-body-lh); color: var(--dl-text-body); }

@media (min-width: 834px) {
  .support-cta {
    padding: var(--dl-space-5) var(--dl-gutter-tablet);
    flex-direction: row; align-items: center; justify-content: space-between; gap: var(--dl-space-3);
  }
  .support-cta__text { font-size: var(--dl-body-size); }
}
@media (min-width: 1200px) { .support-cta { padding: var(--dl-space-6) var(--dl-gutter-laptop); } }
@media (min-width: 1440px) { .support-cta { padding: var(--dl-space-7) var(--dl-gutter-desktop); } }