/* Home 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. */

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

/* ---------- Hero ---------- */
.hero {
  padding: var(--dl-space-4) var(--dl-gutter-mobile) var(--dl-space-3);
  display: flex; flex-direction: column; gap: var(--dl-space-2);
}
.hero__eyebrow {
  font-family: var(--dl-font-mono); font-size: 11px; letter-spacing: 0.1em;
  color: var(--dl-text-accent); text-transform: uppercase;
}
.hero__title {
  font-size: var(--dl-h1-size-mobile); font-weight: var(--dl-weight-semibold);
  line-height: 1.12; letter-spacing: var(--dl-h1-tracking);
  text-wrap: pretty;
}
.hero__lead { font-size: var(--dl-body-size-mobile); line-height: var(--dl-body-lh); color: var(--dl-text-body); max-width: 46ch; }
.hero__actions { display: flex; flex-direction: column; gap: var(--dl-inline-gap); }

.hero__media {
  display: grid; grid-template-columns: 1fr; gap: 0;
}
.hero__tile {
  margin: 0; display: flex; flex-direction: column; gap: var(--dl-space-1);
}
.hero__tile--secondary, .hero__tile--tertiary { display: none; }
.hero__tile-frame {
  position: relative; aspect-ratio: 4 / 3; overflow: hidden;
  background: var(--dl-surface-panel); border: var(--dl-border-hairline) solid var(--dl-border-default);
  display: flex; align-items: center; justify-content: center;
}
.hero__tile img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }

@media (min-width: 834px) {
  .hero { padding: var(--dl-space-6) var(--dl-gutter-tablet) var(--dl-space-5); gap: var(--dl-space-3); }
  .hero__actions { flex-direction: row; gap: var(--dl-inline-gap); }
  .hero__actions .btn { flex: none; }
  .hero__media { grid-template-columns: 1fr 1fr 1fr; gap: 0 var(--dl-space-2); margin-top: var(--dl-space-1); }
  .hero__tile-frame { aspect-ratio: 1 / 1; }
  .hero__tile--secondary, .hero__tile--tertiary { display: flex; }
}
@media (min-width: 1200px) {
  .hero {
    padding: var(--dl-space-7) var(--dl-gutter-laptop) var(--dl-space-6);
    display: grid; grid-template-columns: 1fr 1.05fr; gap: var(--dl-space-5); align-items: center;
  }
  .hero__copy { display: flex; flex-direction: column; gap: var(--dl-space-3); }
  .hero__title { font-size: var(--dl-h1-size); }
  .hero__lead { font-size: var(--dl-body-size); max-width: 32ch; }
  .hero__media { grid-template-columns: 1.15fr 1fr 1fr; margin-top: 0; }
  .hero__tile-frame { aspect-ratio: 4 / 5; }
}
@media (min-width: 1440px) {
  .hero { padding: var(--dl-space-8) var(--dl-gutter-desktop) var(--dl-space-7); gap: var(--dl-space-6); }
  .hero__lead { max-width: 34ch; }
}

/* ---------- Thesis ---------- */
.thesis { padding: var(--dl-space-4) var(--dl-gutter-mobile); }
.thesis__label { display: none; text-transform: uppercase; }
.thesis__text { font-size: 19px; font-weight: var(--dl-weight-medium); line-height: 1.4; }
@media (min-width: 834px) {
  .thesis { padding: var(--dl-space-5) var(--dl-gutter-tablet); }
  .thesis__text { font-size: 22px; max-width: 42ch; }
}
@media (min-width: 1200px) {
  .thesis { padding: var(--dl-space-6) var(--dl-gutter-laptop); display: grid; grid-template-columns: 180px 1fr; gap: var(--dl-space-4); }
  .thesis__label {
    display: block; font-family: var(--dl-font-mono); font-size: 11px; color: var(--dl-text-accent);
  }
}
@media (min-width: 1440px) {
  .thesis { padding: var(--dl-space-7) var(--dl-gutter-desktop); grid-template-columns: 220px 1fr; gap: var(--dl-space-5); }
  .thesis__text { font-size: 26px; max-width: 44ch; }
}

/* ---------- Product sections (DeviceOpen AI / Tool Box) ---------- */
.product {
  padding: var(--dl-space-4) var(--dl-gutter-mobile);
  display: flex; flex-direction: column; gap: var(--dl-stack-gap);
}
.product__media { margin: 0; display: flex; flex-direction: column; gap: var(--dl-space-1); }
.product__media-frame {
  position: relative; aspect-ratio: 16 / 10; 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__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); }
.product__lead { font-size: var(--dl-body-small-size); line-height: var(--dl-body-lh); color: var(--dl-text-body); }
.product__list { padding-left: 18px; font-size: var(--dl-body-small-size); line-height: 1.85; color: var(--dl-text-body); }
.product__list li { margin: 0; }

@media (min-width: 834px) {
  .product { padding: var(--dl-space-5) var(--dl-gutter-tablet); }
  .product__title { font-size: 21px; }
}
@media (min-width: 1200px) {
  .product {
    padding: var(--dl-space-6) var(--dl-gutter-laptop);
    display: grid; grid-template-columns: 1fr 1fr; gap: var(--dl-space-5); align-items: center;
  }
  .product__body { display: flex; flex-direction: column; gap: var(--dl-inline-gap); }
  .product--reverse .product__media { order: 2; }
  .product__title { font-size: 24px; }
}
@media (min-width: 1440px) {
  .product { padding: var(--dl-space-7) var(--dl-gutter-desktop); gap: var(--dl-space-6); }
  .product__body { gap: 14px; }
  .product__title { font-size: var(--dl-h2-size); }
  .product__lead { font-size: var(--dl-body-size); }
}

/* ---------- Ecosystem (hidden on mobile — reserved for tablet and up) ---------- */
.ecosystem { display: none; }
@media (min-width: 834px) {
  .ecosystem {
    display: block; background: var(--dl-surface-emphasis); padding: var(--dl-space-5) var(--dl-gutter-tablet);
  }
  .ecosystem__label, .ecosystem__note { display: none; }
  .ecosystem__grid { display: flex; flex-direction: column; gap: 14px; }
  .ecosystem__step { background: var(--dl-graphite); border: var(--dl-border-hairline) solid var(--dl-on-emphasis-border); padding: 16px 18px; }
  .ecosystem__step-label { font-family: var(--dl-font-mono); font-size: 10px; color: var(--dl-on-emphasis-secondary); text-transform: uppercase; }
  .ecosystem__step-text { font-size: 15px; font-weight: var(--dl-weight-semibold); color: var(--dl-paper); margin-top: 6px; }
}
@media (min-width: 1200px) {
  .ecosystem { padding: var(--dl-space-6) var(--dl-gutter-laptop); }
  .ecosystem__grid {
    display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1px;
    background: var(--dl-on-emphasis-border); border: var(--dl-border-hairline) solid var(--dl-on-emphasis-border);
  }
  .ecosystem__step { background: var(--dl-graphite); border: none; padding: 22px 24px; }
  .ecosystem__step-text { font-size: 16px; }
}
@media (min-width: 1440px) {
  .ecosystem { padding: var(--dl-space-7) var(--dl-gutter-desktop); }
  .ecosystem__label {
    display: block; font-family: var(--dl-font-mono); font-size: 11px; color: var(--dl-on-emphasis-accent);
    margin: 0 0 var(--dl-space-3); text-transform: uppercase;
  }
  .ecosystem__step { padding: 26px 28px; }
  .ecosystem__step-text { font-size: 18px; }
  .ecosystem__note {
    display: block; margin: var(--dl-space-2) 0 0; max-width: 640px;
    font-family: var(--dl-font-mono); font-size: 12px; letter-spacing: 0.03em; color: var(--dl-on-emphasis-secondary);
  }
}

/* ---------- Company information ---------- */
.company-info { padding: var(--dl-space-4) var(--dl-gutter-mobile); font-size: var(--dl-body-small-size); line-height: 1.7; color: var(--dl-text-body); }
.company-info__label { display: none; }
.company-info__table { display: none; }
@media (min-width: 834px) {
  .company-info { padding: var(--dl-space-5) var(--dl-gutter-tablet); }
}
@media (min-width: 1200px) {
  .company-info { padding: var(--dl-space-6) var(--dl-gutter-laptop); }
}
@media (min-width: 1440px) {
  .company-info {
    padding: var(--dl-space-7) var(--dl-gutter-desktop);
    display: grid; grid-template-columns: 220px 1fr; gap: var(--dl-space-5);
  }
  .company-info__prose { display: none; }
  .company-info__label { display: block; font-family: var(--dl-font-mono); font-size: 11px; color: var(--dl-text-accent); text-transform: uppercase; }
  .company-info__table { display: grid; grid-template-columns: 200px 1fr; gap: 0; max-width: 760px; }
  .company-info__table dt {
    font-family: var(--dl-font-mono); font-size: 11px; color: var(--dl-text-secondary); text-transform: uppercase;
    padding: 11px 0; border-top: var(--dl-border-hairline) solid var(--dl-border-default);
  }
  .company-info__table dd {
    font-size: 15px; padding: 11px 0; border-top: var(--dl-border-hairline) solid var(--dl-border-default);
  }
}

/* ---------- Contact CTA (large desktop only) ---------- */
.contact-cta { display: none; }
@media (min-width: 1440px) {
  .contact-cta {
    display: flex; align-items: center; justify-content: space-between;
    padding: var(--dl-space-6) var(--dl-gutter-desktop);
  }
  .contact-cta__text { font-size: 20px; font-weight: var(--dl-weight-semibold); max-width: 520px; }
}