.hero-grid,
.detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(320px, 0.9fr);
  gap: 20px;
  align-items: start;
}

.portfolio-audience-panel {
  align-self: start;
}

.family-grid,
.product-grid,
.evidence-grid,
.qazstack-integration-grid {
  display: grid;
  gap: 14px;
}

.family-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.product-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.qazstack-integration-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.positioning-grid,
.value-split {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(340px, 0.9fr);
  gap: 20px;
  align-items: start;
}

.pain-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.market-card {
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--surface-panel);
  box-shadow: var(--shadow-soft);
}

.market-card p {
  margin: 0;
  color: var(--ink-muted);
}

.value-list,
.value-bullets {
  display: grid;
  gap: 10px;
  margin: 14px 0 0;
  padding: 0;
}

.onboarding-card {
  display: grid;
  gap: 16px;
  padding: 16px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--surface-panel);
  box-shadow: var(--shadow-soft);
}

.onboarding-stages,
.onboarding-details {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.value-list article {
  display: grid;
  gap: 4px;
  padding: 12px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--surface-muted);
}

.value-list span,
.value-bullets {
  color: var(--ink-muted);
}

.value-bullets {
  padding-inline-start: 18px;
}

.family-card,
.product-card,
.evidence-card,
.lens-card,
.module-card,
.package-card {
  padding: 14px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--surface-panel);
  box-shadow: var(--shadow-soft);
}

.product-card--active,
.evidence-card--active,
.package-card--active {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent-focus), var(--shadow-soft);
}

.family-card__head,
.product-card__head,
.package-card__head {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 12px;
  margin-bottom: 12px;
}

.family-card p,
.product-card p,
.evidence-card p,
.lens-card p,
.module-card p,
.package-card p {
  margin-bottom: 0;
  color: var(--ink-muted);
}

.family-stats,
.product-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.mini-stat {
  padding: 12px;
  border-radius: 8px;
  border: 1px solid var(--line-soft);
  background: var(--surface-muted);
}

.mini-stat span {
  display: block;
  font-size: 12px;
  color: var(--ink-muted);
}

.mini-stat strong {
  display: block;
  margin-top: 4px;
}

.chip-row,
.link-row,
.lens-toggle {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ask-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}

.field-label {
  display: grid;
  gap: 8px;
}

.field-label span {
  font-size: 13px;
  color: var(--ink-muted);
}

.surface-input {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--surface-panel);
  color: var(--ink);
  font: inherit;
  padding: 10px 12px;
}

.surface-input--textarea {
  min-height: 96px;
  resize: vertical;
}

.meta-chip {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  max-width: 100%;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--line-soft);
  background: var(--surface-muted);
  color: var(--ink-muted);
  font-size: 13px;
  line-height: 1.3;
  overflow-wrap: anywhere;
  white-space: normal;
}

.chip-row {
  margin-top: 12px;
}

.section-spacer {
  margin-top: 16px;
}

.lens-toggle {
  margin-top: 14px;
}

.lens-toggle__btn {
  border: 1px solid var(--line-soft);
  background: var(--surface-panel);
  color: var(--ink);
  border-radius: 999px;
  padding: 8px 12px;
  font: inherit;
  cursor: pointer;
}

.lens-toggle__btn--active {
  background: var(--surface-muted);
  border-color: var(--accent);
}

.panel--compact {
  padding: 14px;
}

.module-card strong,
.lens-card strong {
  display: block;
  margin-bottom: 6px;
}

.package-card__meta,
.product-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.product-links {
  align-items: center;
}

.dossier-card {
  display: grid;
  gap: 14px;
}

.dossier-block {
  display: grid;
  gap: 10px;
}

.meta-chip--warn {
  background: color-mix(in srgb, var(--warn) 12%, transparent);
  color: var(--warn);
}

@media (max-width: 1100px) {
  .hero-grid,
  .detail-grid,
  .positioning-grid,
  .value-split {
    grid-template-columns: 1fr;
  }

  .family-grid,
  .product-grid,
  .evidence-grid,
  .qazstack-integration-grid,
  .onboarding-stages,
  .onboarding-details,
  .metrics-grid,
  .family-stats,
  .product-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pain-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ask-form {
    grid-template-columns: 1fr;
  }

  .pain-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .family-grid,
  .product-grid,
  .evidence-grid,
  .qazstack-integration-grid,
  .onboarding-stages,
  .onboarding-details,
  .metrics-grid,
  .family-stats,
  .product-metrics {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 360px) and (max-width: 720px) {
  .metrics-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 560px) and (max-width: 720px) {
  .family-stats,
  .product-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 900px) and (max-width: 1100px) {
  .hero-grid,
  .detail-grid,
  .positioning-grid,
  .value-split {
    grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.85fr);
  }
}

@media (min-width: 1440px) {
  .hero-grid,
  .detail-grid,
  .positioning-grid,
  .value-split {
    grid-template-columns: minmax(0, 1.5fr) minmax(360px, 0.85fr);
    gap: 24px;
  }

  .family-grid,
  .qazstack-integration-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .product-grid,
  .evidence-grid {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  }

  #portfolio-proof-metrics {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  #evidence-metrics,
  #export-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .portfolio-open-data #portfolio-runtime-surfaces,
  #core-modules,
  .portfolio-evidence-export #export-links,
  #portfolio-open-layer,
  #trust-modules,
  #evidence-assets,
  #portfolio-notes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .portfolio-selected-dossier .detail-grid,
  .portfolio-evidence-detail .detail-grid {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 1920px) {
  .hero-grid,
  .detail-grid,
  .positioning-grid,
  .value-split {
    grid-template-columns: minmax(0, 1.7fr) minmax(420px, 0.8fr);
    gap: 28px;
  }

  .family-grid,
  .qazstack-integration-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .product-grid,
  .evidence-grid {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  }

  #portfolio-proof-metrics {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  #evidence-metrics,
  #export-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .portfolio-open-data #portfolio-runtime-surfaces,
  #core-modules,
  .portfolio-evidence-export #export-links,
  #portfolio-open-layer,
  #trust-modules,
  #evidence-assets,
  #portfolio-notes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .portfolio-selected-dossier .detail-grid,
  .portfolio-evidence-detail .detail-grid {
    grid-template-columns: 1fr;
  }
}

/* Wide-screen composition: incomplete final rows should use the available
   measure instead of leaving a visible empty grid cell. */
@media (min-width: 1440px) {
  #portfolio-open-layer > :last-child,
  #core-modules > :last-child,
  #trust-modules > :last-child {
    grid-column: 1 / -1;
  }

  #portfolio-proof-metrics > :nth-last-child(-n + 2),
  #export-metrics > :last-child {
    grid-column: span 2;
  }
}

/* Focused portfolio routes share the same data and interaction engine while
   keeping the public overview, partner intake, product dossiers and trust
   evidence in separate user-intent compositions. */
.portfolio-route-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin: 14px 0 0;
}

.portfolio-route-actions:empty {
  display: none;
}

.portfolio-route-actions .action-link--active {
  border-color: var(--accent);
  background: var(--surface-muted);
}

.portfolio-overview-cta {
  display: grid;
  gap: 8px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line-soft);
}

.portfolio-overview-cta .eyebrow {
  margin-bottom: 0;
}

body[data-portfolio-mode="overview"] .portfolio-onboarding,
body[data-portfolio-mode="overview"] .portfolio-open-data,
body[data-portfolio-mode="overview"] .portfolio-family,
body[data-portfolio-mode="overview"] .portfolio-products,
body[data-portfolio-mode="overview"] .portfolio-selected-dossier,
body[data-portfolio-mode="overview"] .portfolio-trust-modules,
body[data-portfolio-mode="overview"] .portfolio-trust-center,
body[data-portfolio-mode="overview"] .portfolio-qazstack,
body[data-portfolio-mode="overview"] .portfolio-evidence-export,
body[data-portfolio-mode="overview"] .portfolio-evidence-detail,
body[data-portfolio-mode="overview"] .portfolio-packages,
body[data-portfolio-mode="overview"] .portfolio-conclusion,
body[data-portfolio-mode="partners"] .portfolio-positioning,
body[data-portfolio-mode="partners"] .portfolio-market-map,
body[data-portfolio-mode="partners"] .portfolio-value-model,
body[data-portfolio-mode="partners"] .portfolio-open-data,
body[data-portfolio-mode="partners"] .portfolio-family,
body[data-portfolio-mode="partners"] .portfolio-products,
body[data-portfolio-mode="partners"] .portfolio-selected-dossier,
body[data-portfolio-mode="partners"] .portfolio-trust-modules,
body[data-portfolio-mode="partners"] .portfolio-qazstack,
body[data-portfolio-mode="partners"] .portfolio-trust-center,
body[data-portfolio-mode="partners"] .portfolio-evidence-export,
body[data-portfolio-mode="partners"] .portfolio-evidence-detail,
body[data-portfolio-mode="partners"] .portfolio-packages,
body[data-portfolio-mode="partners"] .portfolio-conclusion,
body[data-portfolio-mode="products"] .portfolio-positioning,
body[data-portfolio-mode="products"] .portfolio-market-map,
body[data-portfolio-mode="products"] .portfolio-value-model,
body[data-portfolio-mode="products"] .portfolio-onboarding,
body[data-portfolio-mode="products"] .portfolio-open-data,
body[data-portfolio-mode="products"] .portfolio-trust-modules,
body[data-portfolio-mode="products"] .portfolio-qazstack,
body[data-portfolio-mode="products"] .portfolio-trust-center,
body[data-portfolio-mode="products"] .portfolio-evidence-export,
body[data-portfolio-mode="products"] .portfolio-evidence-detail,
body[data-portfolio-mode="products"] .portfolio-packages,
body[data-portfolio-mode="products"] .portfolio-conclusion,
body[data-portfolio-mode="trust"] .portfolio-positioning,
body[data-portfolio-mode="trust"] .portfolio-market-map,
body[data-portfolio-mode="trust"] .portfolio-value-model,
body[data-portfolio-mode="trust"] .portfolio-onboarding,
body[data-portfolio-mode="trust"] .portfolio-family,
body[data-portfolio-mode="trust"] .portfolio-products,
body[data-portfolio-mode="trust"] .portfolio-selected-dossier {
  display: none;
}

/* A legacy package query is a focused data-room state, not a request to
   render the entire overview around an otherwise hidden dossier. Keep the
   package list and selected dossier addressable while removing unrelated
   sections and their anchor rail. */
body[data-portfolio-package="selected"] .portfolio-positioning,
body[data-portfolio-package="selected"] .portfolio-market-map,
body[data-portfolio-package="selected"] .portfolio-value-model,
body[data-portfolio-package="selected"] .portfolio-onboarding,
body[data-portfolio-package="selected"] .portfolio-open-data,
body[data-portfolio-package="selected"] .portfolio-family,
body[data-portfolio-package="selected"] .portfolio-products,
body[data-portfolio-package="selected"] .portfolio-trust-modules,
body[data-portfolio-package="selected"] .portfolio-qazstack,
body[data-portfolio-package="selected"] .portfolio-trust-center,
body[data-portfolio-package="selected"] .portfolio-evidence-export,
body[data-portfolio-package="selected"] .portfolio-evidence-detail,
body[data-portfolio-package="selected"] .portfolio-conclusion,
body[data-portfolio-package="selected"] .workspace-nav {
  display: none;
}

body[data-portfolio-package="selected"] .portfolio-selected-dossier,
body[data-portfolio-package="selected"] .portfolio-packages {
  display: block;
}

/* Nested portfolio routes already expose their four intentional destinations
   in the hero. The generated anchor rail belongs to the long overview only;
   keeping it on focused routes advertises hidden sections and recreates the
   navigation density this split is meant to remove. */
body[data-portfolio-mode="partners"] .workspace-nav,
body[data-portfolio-mode="products"] .workspace-nav,
body[data-portfolio-mode="trust"] .workspace-nav {
  display: none;
}

/* The focused product route has one family card by design. Let that card
   explain the complete product map instead of leaving two empty columns
   beside a single item on desktop and ultrawide screens. */
body[data-portfolio-mode="products"] #family-grid > :only-child {
  grid-column: 1 / -1;
}