/*
 * BOS public surface.
 * Permanent tokens and reusable components live in design-system.css.
 * This file contains only BOS brand composition and the truthful UI mockup.
 */

.bos-brand {
  align-items: center;
  color: var(--bos-color-text);
  display: inline-flex;
  font-size: var(--bos-text-base);
  font-weight: 800;
  gap: var(--bos-space-3);
  letter-spacing: .08em;
  text-decoration: none;
}

.bos-brand__symbol {
  align-items: center;
  background: var(--bos-color-text);
  border-radius: var(--bos-radius-md);
  color: var(--bos-color-on-accent);
  display: inline-flex;
  font-family: var(--bos-font-display);
  font-size: var(--bos-text-base);
  height: 30px;
  justify-content: center;
  width: 30px;
}

.bos-hero-wrap { padding-bottom: var(--bos-space-10); }

.bos-hero {
  grid-template-columns: minmax(0, 1.08fr) minmax(380px, .92fr);
  padding-block: clamp(var(--bos-space-20), 9vw, var(--bos-space-32));
}

.bos-hero .ds-hero__copy { max-width: 650px; }
.bos-hero .ds-body-lg { max-width: 640px; }
.bos-hero .ds-cluster { margin-top: var(--bos-space-8); }
.bos-hero .ds-caption { margin-top: var(--bos-space-4); }

.bos-product-frame {
  background: var(--bos-color-surface);
  border: 1px solid var(--bos-color-border-strong);
  border-radius: var(--bos-radius-lg);
  box-shadow: var(--bos-shadow-lg);
  min-width: 0;
}

.bos-product-frame__bar {
  align-items: center;
  border-bottom: 1px solid var(--bos-color-border);
  color: var(--bos-color-text-tertiary);
  display: grid;
  font-size: .6875rem;
  grid-template-columns: 1fr auto 1fr;
  padding: var(--bos-space-3) var(--bos-space-4);
}

.bos-product-frame__bar .ds-badge { justify-self: end; }
.bos-frame-brand { color: var(--bos-color-text); font-weight: 800; letter-spacing: .08em; }
.bos-product-frame__body { padding: var(--bos-space-5); }

.bos-frame-heading {
  align-items: flex-start;
  display: flex;
  justify-content: space-between;
  margin-bottom: var(--bos-space-4);
}

.bos-frame-heading strong { display: block; font-size: var(--bos-text-base); margin-top: 2px; }

.bos-candidate-row {
  align-items: center;
  border-top: 1px solid var(--bos-color-border);
  display: grid;
  gap: var(--bos-space-3);
  grid-template-columns: 24px minmax(0, 1fr) auto;
  min-height: 68px;
}

.bos-candidate-row > .ds-code { color: var(--bos-color-text-tertiary); font-size: .6875rem; }
.bos-candidate-row strong { display: block; font-size: .8125rem; }
.bos-candidate-row small { color: var(--bos-color-text-tertiary); display: block; font-size: .6875rem; }

.bos-frame-footer {
  background: var(--bos-color-surface-subtle);
  border-radius: var(--bos-radius-sm);
  color: var(--bos-color-text-tertiary);
  display: flex;
  font-size: .6875rem;
  justify-content: space-between;
  margin-top: var(--bos-space-3);
  padding: var(--bos-space-2) var(--bos-space-3);
}

.bos-boundary-strip {
  border-bottom: 1px solid var(--bos-color-border);
  border-top: 1px solid var(--bos-color-border);
  color: var(--bos-color-text-secondary);
  display: grid;
  font-size: var(--bos-text-xs);
  font-weight: 700;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  letter-spacing: .04em;
  text-align: center;
  text-transform: uppercase;
}

.bos-boundary-strip span { padding: var(--bos-space-4) var(--bos-space-2); }
.bos-boundary-strip span + span { border-left: 1px solid var(--bos-color-border); }

.bos-section-heading { max-width: 720px; }
.bos-section-heading > :not(:first-child) { margin-top: var(--bos-space-5); }
.bos-card-grid,
.bos-roadmap-grid { margin-top: var(--bos-space-12); }
.bos-card-grid .ds-card,
.bos-roadmap-grid .ds-card { min-height: 210px; }
.bos-card-grid .ds-card > :not(:first-child),
.bos-roadmap-grid .ds-card > :not(:first-child) { margin-top: var(--bos-space-4); }

.bos-loop {
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(3, 1fr);
  list-style: none;
  margin: var(--bos-space-12) 0 0;
  padding: 0;
}
.bos-loop__step {
  background: var(--bos-color-surface);
  border: 1px solid var(--bos-color-border);
  min-height: 190px;
  padding: var(--bos-space-6);
  position: relative;
}
.bos-loop__step:not(:nth-child(3n))::after {
  color: var(--bos-color-accent);
  content: "→";
  display: none;
  font-size: var(--bos-text-lg);
  position: absolute;
  right: calc(-1 * var(--bos-space-4));
  top: var(--bos-space-6);
  z-index: 1;
}
@media (min-width: 901px) {
  .bos-loop__step:not(:nth-child(3n))::after { display: block; }
}
.bos-loop__number { color: var(--bos-color-accent); display: block; font-family: var(--bos-font-mono); font-size: var(--bos-text-xs); font-weight: 700; margin-bottom: var(--bos-space-4); }
.bos-loop__step strong { display: block; margin-bottom: var(--bos-space-2); }

.bos-business-card { display: grid; gap: var(--bos-space-3); }
.bos-business-card .ds-badge { width: fit-content; }

.bos-split {
  align-items: start;
  display: grid;
  gap: clamp(var(--bos-space-12), 8vw, var(--bos-space-24));
  grid-template-columns: minmax(0, .9fr) minmax(360px, 1.1fr);
}

.bos-list {
  color: var(--bos-color-text-secondary);
  display: grid;
  font-size: var(--bos-text-sm);
  gap: var(--bos-space-2);
  margin: 0;
  padding-left: var(--bos-space-5);
}

.bos-inline-link { margin: var(--bos-space-8) 0 0; }

.bos-final-cta {
  align-items: center;
  display: flex;
  gap: var(--bos-space-8);
  justify-content: space-between;
}

.bos-final-cta .ds-body-sm { margin-bottom: 0; }

.bos-footer-intro { max-width: 300px; }
.bos-footer-intro p { margin-top: var(--bos-space-4); }
.bos-copyright {
  border-top: 1px solid var(--bos-color-border);
  margin: var(--bos-space-12) auto 0;
  max-width: var(--bos-container-lg);
  padding: var(--bos-space-5) var(--bos-page-gutter) 0;
}

.bos-page-hero { padding-block: var(--bos-space-20); }
.bos-page-hero .ds-body-lg { max-width: 720px; }
.bos-page-hero .ds-container > :not(:first-child) { margin-top: var(--bos-space-5); }

@media (max-width: 900px) {
  .bos-hero,
  .bos-split { grid-template-columns: 1fr; }
  .bos-product-frame { max-width: 620px; }
  .bos-roadmap-grid { grid-template-columns: 1fr; }
  .bos-loop { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 680px) {
  .bos-hero { padding-block: var(--bos-space-16); }
  .bos-loop { grid-template-columns: 1fr; }
  .bos-boundary-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bos-boundary-strip span + span { border-left: 0; }
  .bos-boundary-strip span:nth-child(even) { border-left: 1px solid var(--bos-color-border); }
  .bos-boundary-strip span:nth-child(n + 3) { border-top: 1px solid var(--bos-color-border); }
  .bos-product-frame__bar { grid-template-columns: 1fr auto; }
  .bos-product-frame__bar > :nth-child(2) { display: none; }
  .bos-candidate-row { grid-template-columns: 22px minmax(0, 1fr); padding-block: var(--bos-space-3); }
  .bos-candidate-row > .ds-badge { grid-column: 2; justify-self: start; }
  .bos-frame-footer { flex-direction: column; gap: var(--bos-space-1); }
  .bos-final-cta { align-items: flex-start; flex-direction: column; }
}