/*
 * Origin Kudada 产品介绍页
 * ------------------------------------------------------------
 * 仅服务 docs/manual/overview/product.md。
 * 设计目标：信息层级明确、少圆角、少装饰边框、大字号关键参数和足够留白。
 */

.ok-product-lead {
  max-width: 48rem;
  margin: .35rem 0 1.4rem;
  color: var(--ok-text);
  font-size: .88rem;
  line-height: 1.8;
}

.ok-product-visual {
  width: 100%;
  margin: 1.1rem 0 2.15rem;
}
.ok-product-visual__frame {
  overflow: hidden;
  border: 1px solid var(--ok-border-light);
  background: var(--ok-card-bg);
}
.ok-product-visual__frame img {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  margin: 0 !important;
}
.ok-product-visual figcaption {
  margin-top: .55rem;
  color: var(--ok-text-muted);
  font-size: .66rem;
  text-align: center;
}

.ok-product-identity-grid,
.ok-product-pack-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .65rem;
  margin: .9rem 0 2rem;
}
.ok-product-identity-grid section,
.ok-product-pack-grid section {
  min-width: 0;
  padding: 1.05rem 1.1rem;
  border: 1px solid var(--ok-border-light);
  background: var(--ok-card-bg);
}
.ok-product-identity-grid span,
.ok-product-pack-grid span {
  color: var(--ok-brand);
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .08em;
}
.ok-product-identity-grid h3,
.ok-product-pack-grid h3 {
  margin: .65rem 0 .35rem;
  color: var(--ok-text-strong);
  font-size: .96rem;
  line-height: 1.35;
}
.ok-product-pack-grid h3 { white-space: nowrap; font-size: .9rem; }
.ok-product-identity-grid p,
.ok-product-pack-grid p {
  margin: 0;
  color: var(--ok-text);
  font-size: .72rem;
  line-height: 1.65;
}

.ok-product-system-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .7rem;
  margin: .9rem 0 2rem;
}
.ok-product-system-grid section {
  min-width: 0;
  padding: 1.1rem 1.2rem;
  border: 1px solid var(--ok-border-light);
  background: var(--ok-card-bg);
}
.ok-product-system-grid span {
  display: inline-block;
  padding: .18rem .45rem;
  color: var(--ok-brand);
  background: rgba(199, 29, 35, .07);
  font-size: .64rem;
  font-weight: 800;
}
.ok-product-system-grid h3 {
  margin: .65rem 0 .35rem;
  color: var(--ok-text-strong);
  font-size: 1rem;
}
.ok-product-system-grid p {
  margin: 0 0 .7rem;
  color: var(--ok-text);
  font-size: .74rem;
  line-height: 1.7;
}
.ok-product-system-grid a { font-size: .7rem; font-weight: 700; }

.ok-product-boundary-list {
  display: grid;
  gap: .65rem;
  margin: 1rem 0 2.2rem;
}
.ok-product-boundary-list > section {
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid var(--ok-border-light);
  border-left: 4px solid var(--ok-brand);
  background: var(--ok-card-bg);
}
.ok-product-boundary-list > section.is-education { border-left-color: #c58a1b; }
.ok-product-boundary-list > section.is-ai { border-left-color: var(--ok-link); }
.ok-product-boundary-list > section.is-experimental { border-left-color: #6b5cc7; }
.ok-product-boundary-title {
  padding: 1.05rem 1.1rem;
  background: var(--ok-code-bg);
}
.ok-product-boundary-title span,
.ok-product-boundary-title small,
.ok-product-boundary-title strong { display: block; }
.ok-product-boundary-title span {
  color: var(--ok-brand);
  font-size: .82rem;
  font-weight: 900;
}
.ok-product-boundary-title small {
  margin-top: .5rem;
  color: var(--ok-text-muted);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .08em;
}
.ok-product-boundary-title strong {
  margin-top: .22rem;
  color: var(--ok-text-strong);
  font-size: .86rem;
  line-height: 1.35;
}
.ok-product-boundary-body { padding: 1rem 1.2rem; }
.ok-product-boundary-body h3 {
  margin: 0 0 .32rem;
  color: var(--ok-text-strong);
  font-size: .9rem;
}
.ok-product-boundary-body p {
  margin: 0;
  color: var(--ok-text);
  font-size: .72rem;
  line-height: 1.65;
}
.ok-product-boundary-body ul {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin: .65rem 0 0;
  padding: 0;
  list-style: none;
}
.ok-product-boundary-body li {
  padding: .16rem .45rem;
  border: 1px solid var(--ok-border-light);
  color: var(--ok-text-muted);
  background: var(--ok-page-bg);
  font-size: .62rem;
}

.ok-product-spec-highlight {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .55rem;
  margin: 1rem 0 1.8rem;
}
.ok-product-spec-highlight div {
  min-width: 0;
  padding: 1rem;
  border: 1px solid var(--ok-border-light);
  background: var(--ok-code-bg);
}
.ok-product-spec-highlight strong,
.ok-product-spec-highlight span { display: block; }
.ok-product-spec-highlight strong {
  color: var(--ok-text-strong);
  font-size: 1.12rem;
  line-height: 1.25;
}
.ok-product-spec-highlight span {
  margin-top: .42rem;
  color: var(--ok-text-muted);
  font-size: .68rem;
}

.ok-product-spec-suite {
  margin: 1.15rem 0;
  overflow: hidden;
  border: 1px solid var(--ok-border-light);
  border-top: 4px solid var(--ok-brand);
  background: var(--ok-card-bg);
}
.ok-product-spec-suite.is-education { border-top-color: #c58a1b; }
.ok-product-spec-suite.is-ai { border-top-color: var(--ok-link); }
.ok-product-spec-suite > header {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: .7rem;
  padding: 1.05rem 1.15rem;
  border-bottom: 1px solid var(--ok-border-light);
  background: var(--ok-code-bg);
}
.ok-product-spec-suite > header > span {
  color: var(--ok-brand);
  font-size: 1.15rem;
  font-weight: 900;
}
.ok-product-spec-suite > header small {
  color: var(--ok-text-muted);
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .08em;
}
.ok-product-spec-suite > header h3 {
  margin: .2rem 0 .1rem;
  color: var(--ok-text-strong);
  font-size: 1.08rem;
}
.ok-product-spec-suite > header p {
  margin: 0;
  color: var(--ok-text);
  font-size: .72rem;
}
.ok-product-spec-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: .5rem;
}
.ok-product-spec-facts div {
  min-height: 82px;
  padding: .8rem;
  border: 1px solid var(--ok-border-light);
}
.ok-product-spec-facts span,
.ok-product-spec-facts strong { display: block; }
.ok-product-spec-facts span { color: var(--ok-text-muted); font-size: .62rem; }
.ok-product-spec-facts strong {
  margin-top: .35rem;
  color: var(--ok-text-strong);
  font-size: .78rem;
  line-height: 1.45;
}
.ok-product-component-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .5rem;
  padding: .6rem;
}
.ok-product-component-grid article {
  padding: .9rem;
  border: 1px solid var(--ok-border-light);
  background: var(--ok-card-bg);
}
.ok-product-component-grid article > span {
  color: var(--ok-link);
  font-size: .62rem;
  font-weight: 900;
  letter-spacing: .08em;
}
.ok-product-component-grid h4 {
  margin: .5rem 0 .28rem;
  color: var(--ok-text-strong);
  font-size: .86rem;
}
.ok-product-component-grid p {
  margin: 0;
  color: var(--ok-text);
  font-size: .7rem;
  line-height: 1.65;
}

.ok-product-next-step {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: .8rem;
  align-items: center;
  margin: 2.5rem 0 .5rem;
  padding: .95rem 1rem;
  border: 1px solid var(--ok-border-light);
  border-left: 4px solid var(--ok-brand);
  background: var(--ok-code-bg);
}
.ok-product-next-step > span {
  color: var(--ok-brand);
  font-size: .62rem;
  font-weight: 800;
}
.ok-product-next-step strong { color: var(--ok-text-strong); font-size: .76rem; }
.ok-product-next-step p { margin: .18rem 0 0; color: var(--ok-text-muted); font-size: .66rem; }
.ok-product-next-step a { white-space: nowrap; font-size: .7rem; font-weight: 800; }

@media screen and (max-width: 900px) {
  .ok-product-identity-grid,
  .ok-product-pack-grid,
  .ok-product-spec-highlight { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ok-product-system-grid { grid-template-columns: 1fr; }
  .ok-product-boundary-list > section { grid-template-columns: 190px minmax(0, 1fr); }
}

@media screen and (max-width: 640px) {
  .ok-product-identity-grid,
  .ok-product-pack-grid,
  .ok-product-spec-highlight,
  .ok-product-spec-facts,
  .ok-product-component-grid { grid-template-columns: 1fr; }
  .ok-product-pack-grid h3 { white-space: normal; }
  .ok-product-boundary-list > section { grid-template-columns: 1fr; }
  .ok-product-next-step { grid-template-columns: 1fr; }
  .ok-product-next-step a { white-space: normal; }
}