/*******************************
 Box Product Page (LBOX design)
 Implements "LBOX Product Page.dc.html" from the
 GraniteShares Design System. Uses global tokens from variables.css.
 Prefix: bp-
 ******************************/

.bp-page {
  background: rgb(var(--neutral-99));
  color: rgb(var(--neutral-0));
}

.bp-shell {
  max-width: 1184px;
  margin: 0 auto;
  padding: 0 24px;
}

.bp-section { padding: 56px 24px 8px; }
.bp-section .bp-shell { padding: 0; }

.bp-label {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: rgb(var(--neutral-40));
}

.bp-h2 {
  font-family: "PP Formula", sans-serif;
  font-weight: 500;
  font-size: 34px;
  line-height: 1.2;
  margin: 0 0 18px;
  scroll-margin-top: 72px;
  color: rgb(var(--neutral-0));
}

.bp-sub {
  font-family: "Inter", sans-serif;
  font-weight: 300;
  font-size: 16px;
  line-height: 1.55;
  color: rgb(var(--neutral-30));
  margin: 0 0 24px;
  max-width: 720px;
}

.bp-split {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 48px;
  align-items: start;
}

/* ---------- Hero ---------- */
.bp-hero {
  background: rgb(var(--neutral-99));
  border-bottom: 1.5px solid rgb(var(--neutral-80));
}
.bp-hero__shell { padding: 20px 24px 44px; }
.bp-breadcrumb {
  font-family: "Inter", sans-serif;
  font-weight: 300;
  font-size: 14px;
  color: rgb(var(--neutral-40));
  margin: 8px 0 28px;
  display: flex;
  gap: 10px;
}
.bp-breadcrumb a { color: rgb(var(--neutral-30)); text-decoration: none; }
.bp-breadcrumb__sep { color: rgb(var(--neutral-60)); }
.bp-breadcrumb__current { color: rgb(var(--brand-azure)); }

.bp-hero__idrow { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; flex-wrap: wrap; }
.bp-hero__mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px;
  border-radius: var(--border-radius);
  background: rgb(var(--brand-azure));
  color: rgb(var(--neutral-100));
  font-family: "JetBrains Mono", monospace;
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -.02em;
  flex-shrink: 0;
}
.bp-tag {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 6px 10px;
  border-radius: var(--border-radius);
  background: rgb(var(--brand-citrine));
  color: rgb(var(--neutral-0));
}
.bp-hero__kind { font-family: "JetBrains Mono", monospace; font-size: 13px; color: rgb(var(--neutral-40)); }

.bp-hero__ticker {
  font-family: "PP Formula", sans-serif;
  font-weight: 500;
  font-size: 80px;
  line-height: 1;
  margin: 0 0 14px;
  color: rgb(var(--neutral-0));
}
.bp-hero__name {
  font-family: "PP Formula", sans-serif;
  font-weight: 500;
  font-size: 27px;
  line-height: 1.25;
  margin: 0 0 20px;
  max-width: 520px;
  color: rgb(var(--neutral-0));
}
.bp-hero__tagline {
  font-family: "PP Formula", sans-serif;
  font-weight: 500;
  font-size: 20px;
  line-height: 1.35;
  margin: 0 0 16px;
  max-width: 520px;
  color: rgb(var(--brand-azure));
}
.bp-hero__desc {
  font-family: "Inter", sans-serif;
  font-weight: 300;
  font-size: 17px;
  line-height: 1.55;
  color: rgb(var(--neutral-20));
  margin: 0;
  max-width: 540px;
  text-wrap: pretty;
}

.bp-hero__aside { display: flex; flex-direction: column; gap: 16px; }
.bp-quadgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5px;
  background: rgb(var(--neutral-80));
  border: 1.5px solid rgb(var(--neutral-80));
  border-radius: var(--border-radius);
  overflow: hidden;
}
.bp-quadgrid__cell { background: rgb(var(--neutral-100)); padding: 20px 22px; }
.bp-quadgrid__cell--tight { padding: 18px 22px; }
.bp-quadgrid__v {
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-size: 34px;
  font-variant-numeric: tabular-nums;
  margin-top: 8px;
  color: rgb(var(--neutral-0));
}
.bp-quadgrid__v--mono {
  font-family: "JetBrains Mono", monospace;
  font-size: 16px;
  font-weight: 400;
  margin-top: 8px;
}
.bp-quadgrid__note {
  font-family: "Inter", sans-serif;
  font-weight: 300;
  font-size: 13px;
  color: rgb(var(--neutral-40));
  margin-top: 6px;
}
.bp-hero__actions { display: flex; gap: 12px; flex-wrap: wrap; }
.bp-hero__disclaimer {
  font-family: "Inter", sans-serif;
  font-weight: 300;
  font-size: 12px;
  line-height: 1.55;
  color: rgb(var(--neutral-40));
  margin: 0;
}

/* ---------- Stats strip ---------- */
.bp-statstrip {
  max-width: 1184px;
  margin: 0 auto;
  padding: 32px 24px 0;
}
.bp-statgrid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1.5px;
  background: rgb(var(--neutral-80));
  border: 1.5px solid rgb(var(--neutral-80));
  border-radius: var(--border-radius);
  overflow: hidden;
}
.bp-statgrid__cell { background: rgb(var(--neutral-100)); padding: 18px 20px; }
.bp-statgrid__v {
  font-family: "JetBrains Mono", monospace;
  font-size: 17px;
  color: rgb(var(--neutral-0));
  margin-top: 8px;
}

/* ---------- Sticky subnav ---------- */
.bp-subnav {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgb(var(--neutral-100));
  border-bottom: 1.5px solid rgb(var(--neutral-80));
  margin-top: 32px;
}
.bp-subnav__shell { max-width: 1184px; margin: 0 auto; padding: 0 24px; }
.bp-subnav__nav { display: flex; gap: 30px; overflow-x: auto; }
.bp-subnav__nav a {
  font-family: "JetBrains Mono", monospace;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: rgb(var(--neutral-30));
  padding: 16px 0;
  white-space: nowrap;
  text-decoration: none;
}
.bp-subnav__nav a:hover { color: rgb(var(--brand-azure)); }

/* ---------- Why LBOX ---------- */
.bp-why { background: rgb(var(--neutral-0)); padding: 64px 0; }
.bp-why .bp-h2, .bp-why .bp-sub { color: rgb(var(--neutral-100)); }
.bp-why .bp-sub { color: rgb(var(--neutral-70)); margin-bottom: 40px; }
.bp-why__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5px;
  background: rgb(var(--neutral-30));
}
.bp-why__item { background: rgb(var(--neutral-0)); padding: 8px 32px; }
.bp-why__item:first-child { padding-left: 0; }
.bp-why__item:last-child { padding-right: 0; }
.bp-why__icon {
  width: 72px; height: 72px;
  border: 1.5px solid rgb(var(--brand-azure));
  border-radius: var(--border-radius);
  display: flex; align-items: center; justify-content: center;
  color: rgb(var(--brand-azure));
  margin-bottom: 22px;
}
.bp-why__title {
  font-family: "PP Formula", sans-serif;
  font-weight: 500;
  font-size: 26px;
  margin: 0 0 12px;
  color: rgb(var(--neutral-100));
}
.bp-why__copy {
  font-family: "Inter", sans-serif;
  font-weight: 300;
  font-size: 16px;
  line-height: 1.6;
  color: rgb(var(--neutral-70));
  margin: 0;
  text-wrap: pretty;
}

/* ---------- Callout / info boxes ---------- */
.bp-callout {
  background: rgb(var(--brand-mineral-light));
  border-radius: var(--border-radius);
  padding: 28px 30px;
}
.bp-callout__lead {
  font-family: "PP Formula", sans-serif;
  font-weight: 500;
  font-size: 21px;
  line-height: 1.3;
  margin: 12px 0;
  color: rgb(var(--neutral-0));
}
.bp-callout p, .bp-infobox p {
  font-family: "Inter", sans-serif;
  font-weight: 300;
  font-size: 16px;
  line-height: 1.6;
  color: rgb(var(--neutral-10));
  margin: 0;
  text-wrap: pretty;
}
.bp-infobox {
  border: 1.5px solid rgb(var(--neutral-80));
  border-radius: var(--border-radius);
  background: rgb(var(--neutral-100));
  padding: 28px 30px;
}
.bp-infobox p + p { margin-top: 14px; }
.bp-body p {
  font-family: "Inter", sans-serif;
  font-weight: 300;
  font-size: 17px;
  line-height: 1.6;
  color: rgb(var(--neutral-10));
  margin: 0 0 16px;
  text-wrap: pretty;
}
.bp-body p:last-child { margin-bottom: 0; }
.bp-fine {
  font-family: "Inter", sans-serif;
  font-weight: 300;
  font-size: 13px;
  line-height: 1.6;
  color: rgb(var(--neutral-40));
  margin: 0;
}
.bp-fine--xs { font-size: 12px; }

/* ---------- Tables ---------- */
.bp-table-wrap { border: 1.5px solid rgb(var(--neutral-80)); border-radius: var(--border-radius); overflow: hidden; }
.bp-table {
  display: grid;
  gap: 1.5px;
  background: rgb(var(--neutral-80));
}
.bp-table--compare { grid-template-columns: 1.1fr 1.2fr 1.1fr 1.1fr; }
.bp-table--perf { grid-template-columns: 1.4fr repeat(4, 1fr); }
.bp-table--holdings { grid-template-columns: 2.2fr 0.9fr 0.8fr 0.8fr; }
.bp-table__h {
  background: rgb(var(--neutral-99));
  padding: 12px 16px;
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: rgb(var(--neutral-20));
}
.bp-table__h--num { display: inline-flex; justify-content: flex-end; }
.bp-table__h--accent { background: rgb(var(--brand-citrine)); color: rgb(var(--neutral-0)); }
.bp-table__cell {
  background: rgb(var(--neutral-100));
  padding: 14px 16px;
  font-family: "Inter", sans-serif;
  font-weight: 300;
  font-size: 15px;
  line-height: 1.5;
  color: rgb(var(--neutral-0));
}
.bp-table__cell--label {
  font-weight: 400;
  background: rgb(var(--neutral-99));
}
.bp-table__cell--accent { border-left: 2px solid rgb(var(--brand-citrine)); }
.bp-table__cell--dim { color: rgb(var(--neutral-20)); }
.bp-table__cell--mono {
  font-family: "JetBrains Mono", monospace;
  font-weight: 400;
  font-size: 14px;
  color: rgb(var(--neutral-40));
}
.bp-table__cell--num { display: inline-flex; justify-content: flex-end; }
.bp-table__cell--type {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  color: rgb(var(--brand-azure));
  display: inline-flex;
  align-items: center;
}

/* ---------- Holdings (live-hydrated, mirrors .np-holdings) ---------- */
.bp-holdings { display: grid; grid-template-columns: 2.2fr 0.8fr; gap: 1.5px; background: rgb(var(--neutral-80)); }
.bp-holdings__h {
  background: rgb(var(--neutral-99)); padding: 11px 18px;
  font-family: "JetBrains Mono", monospace; font-size: 12px;
  text-transform: uppercase; letter-spacing: .06em; color: rgb(var(--neutral-20));
}
.bp-holdings__h--num { display: inline-flex; justify-content: flex-end; }
.bp-holdings__name { background: rgb(var(--neutral-100)); padding: 13px 18px; display: flex; flex-direction: column; gap: 3px; }
.bp-holdings__name span:first-child { font-family: "Inter", sans-serif; font-size: 14.5px; font-weight: 300; color: rgb(var(--neutral-0)); }
.bp-holdings__cp { font-family: "Inter", sans-serif; font-size: 13px; font-weight: 300; color: rgb(var(--neutral-40)); }
.bp-holdings__w {
  background: rgb(var(--neutral-100)); padding: 13px 18px;
  font-family: "JetBrains Mono", monospace; font-size: 14px; color: rgb(var(--neutral-0));
  display: inline-flex; justify-content: flex-end; align-items: center;
}
.bp-table__cell--neg { color: rgb(var(--brand-amethyst-dark)); }

/* ---------- Performance callout ---------- */
.bp-callout-line {
  display: flex;
  gap: 20px;
  align-items: stretch;
  margin-top: 20px;
  border: 1.5px solid rgb(var(--neutral-80));
  border-radius: var(--border-radius);
  background: rgb(var(--neutral-100));
  padding: 22px 24px;
}
.bp-callout-line__bar { width: 4px; background: rgb(var(--brand-azure)); flex-shrink: 0; }
.bp-callout-line__head {
  font-family: "PP Formula", sans-serif;
  font-weight: 500;
  font-size: 18px;
  color: rgb(var(--neutral-0));
  margin-bottom: 8px;
}
.bp-callout-line p {
  font-family: "Inter", sans-serif;
  font-weight: 300;
  font-size: 15px;
  line-height: 1.6;
  color: rgb(var(--neutral-20));
  margin: 0;
}

/* ---------- Premium / discount rows ---------- */
.bp-kvlist {
  display: flex;
  flex-direction: column;
  gap: 1.5px;
  background: rgb(var(--neutral-80));
  border: 1.5px solid rgb(var(--neutral-80));
  border-radius: var(--border-radius);
  overflow: hidden;
}
.bp-kvlist__row {
  background: rgb(var(--neutral-100));
  padding: 16px 20px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
}
.bp-kvlist__k { font-family: "Inter", sans-serif; font-weight: 300; font-size: 15px; color: rgb(var(--neutral-20)); }
.bp-kvlist__v { font-family: "JetBrains Mono", monospace; font-size: 15px; color: rgb(var(--neutral-0)); }

/* ---------- CTA card ---------- */
.bp-cta-card {
  background: rgb(var(--brand-azure));
  border-radius: var(--border-radius);
  padding: 26px 28px;
}
.bp-cta-card__head {
  font-family: "PP Formula", sans-serif;
  font-weight: 500;
  font-size: 20px;
  color: rgb(var(--neutral-100));
  margin-bottom: 10px;
}
.bp-cta-card p {
  font-family: "Inter", sans-serif;
  font-weight: 300;
  font-size: 15px;
  line-height: 1.55;
  color: rgb(var(--neutral-100));
  margin: 0 0 18px;
}

/* ---------- Distributions table (live-hydrated, mirrors .np-dist-*) ---------- */
.bp-card { border: 1.5px solid rgb(var(--neutral-80)); border-radius: var(--border-radius); overflow: hidden; background: rgb(var(--neutral-100)); }
.bp-dist__grid { display: grid; grid-template-columns: 1.4fr 0.6fr; gap: 24px; align-items: start; }
.bp-dist-table { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1.5px; background: rgb(var(--neutral-80)); }
.bp-dist-table__c {
  background: rgb(var(--neutral-100)); padding: 12px 14px;
  font-family: "JetBrains Mono", monospace; font-size: 13px; color: rgb(var(--neutral-0));
  display: inline-flex; align-items: center;
}
.bp-dist-table__c--num { justify-content: flex-end; }
.bp-dist-table__empty { grid-column: 1 / -1; background: rgb(var(--neutral-100)); padding: 16px; font-family: "Inter", sans-serif; font-weight: 300; font-size: 14px; color: rgb(var(--neutral-40)); }
.bp-dist-next__date { font-family: "Inter", sans-serif; font-weight: 500; font-size: 26px; margin-top: 8px; font-variant-numeric: tabular-nums; color: rgb(var(--neutral-0)); }
.bp-dist-next__meta { font-family: "JetBrains Mono", monospace; font-size: 11px; color: rgb(var(--neutral-40)); margin-top: 6px; line-height: 1.5; }
.bp-dist-aside { display: flex; flex-direction: column; gap: 16px; }

@media (max-width: 900px) {
  .bp-dist__grid { grid-template-columns: 1fr; }
  .bp-dist-table { overflow-x: auto; min-width: 560px; }
}

/* ---------- Fund details grid ---------- */
.bp-details-table {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5px;
  background: rgb(var(--neutral-80));
  border: 1.5px solid rgb(var(--neutral-80));
  border-radius: var(--border-radius);
  overflow: hidden;
}
.bp-details-table__cell {
  background: rgb(var(--neutral-100));
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.bp-details-table__v { font-family: "JetBrains Mono", monospace; font-size: 15px; color: rgb(var(--neutral-0)); }

.bp-h3 {
  font-family: "PP Formula", sans-serif;
  font-weight: 500;
  font-size: 24px;
  margin: 40px 0 16px;
  color: rgb(var(--neutral-0));
}
.bp-h3--tight { margin-top: 0; }

.bp-pm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.bp-pm-card {
  border: 1.5px solid rgb(var(--neutral-80));
  border-radius: var(--border-radius);
  background: rgb(var(--neutral-100));
  padding: 24px 26px;
}
.bp-pm-card__name { font-family: "PP Formula", sans-serif; font-weight: 500; font-size: 20px; color: rgb(var(--neutral-0)); }
.bp-pm-card__since {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: rgb(var(--brand-azure));
  margin: 6px 0 12px;
}
.bp-pm-card p { font-family: "Inter", sans-serif; font-weight: 300; font-size: 15px; line-height: 1.55; color: rgb(var(--neutral-20)); margin: 0; }

/* ---------- Documents / providers ---------- */
.bp-doclist {
  border: 1.5px solid rgb(var(--neutral-80));
  border-radius: var(--border-radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 1.5px;
  background: rgb(var(--neutral-80));
}
.bp-doclist a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  background: rgb(var(--neutral-100));
  color: rgb(var(--neutral-0));
  text-decoration: none;
}
.bp-doclist a:hover { background: rgb(var(--neutral-99)); }
.bp-doclist a span:first-child { font-family: "Inter", sans-serif; font-weight: 300; font-size: 16px; }
.bp-doclist a .bp-doc-icon { color: rgb(var(--brand-azure)); display: inline-flex; }

.bp-providers-card {
  border: 1.5px solid rgb(var(--neutral-80));
  border-radius: var(--border-radius);
  background: rgb(var(--neutral-100));
  padding: 24px 26px;
}
.bp-providers-card h3 { font-family: "PP Formula", sans-serif; font-weight: 500; font-size: 20px; margin: 0 0 14px; color: rgb(var(--neutral-0))}
.bp-provider-row { display: flex; flex-direction: column; gap: 2px; }
.bp-provider-row + .bp-provider-row { margin-top: 12px; }
.bp-provider-row__k {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: rgb(var(--neutral-40));
}
.bp-provider-row__v { font-family: "Inter", sans-serif; font-weight: 300; font-size: 15px; color: rgb(var(--neutral-0)); }

/* ---------- Invest modal ---------- */
.bp-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgb(16 35 36 / 0.4);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.bp-modal-overlay.is-open { display: flex; }
.bp-modal {
  background: rgb(var(--neutral-100));
  border-radius: var(--border-radius);
  box-shadow: 0 24px 60px rgb(16 35 36 / 0.25);
  width: 100%;
  max-width: 560px;
  padding: 32px 34px;
}
.bp-modal__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.bp-modal__eyebrow {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: rgb(var(--neutral-40));
}
.bp-modal__title { font-family: "PP Formula", sans-serif; font-weight: 500; font-size: 26px; margin: 8px 0 0; color: rgb(var(--neutral-0)); }
.bp-modal__close {
  width: 40px; height: 40px;
  border-radius: var(--border-radius);
  border: 1.5px solid rgb(var(--neutral-80));
  background: rgb(var(--neutral-100));
  color: rgb(var(--neutral-30));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}
.bp-modal__close:hover { background: rgb(var(--neutral-99)); }
.bp-broker-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5px;
  background: rgb(var(--neutral-80));
  border: 1.5px solid rgb(var(--neutral-80));
  border-radius: var(--border-radius);
  overflow: hidden;
  margin: 24px 0 18px;
}
.bp-broker-grid a {
  background: rgb(var(--neutral-100));
  padding: 16px 18px;
  font-family: "Inter", sans-serif;
  font-weight: 300;
  font-size: 16px;
  color: rgb(var(--neutral-0));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  text-decoration: none;
}
.bp-broker-grid a:hover { background: rgb(var(--neutral-99)); }
.bp-broker-grid a .bp-broker-view {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: .1em;
  color: rgb(var(--brand-azure));
}
.bp-modal p {
  font-family: "Inter", sans-serif;
  font-weight: 300;
  font-size: 13px;
  line-height: 1.6;
  color: rgb(var(--neutral-40));
  margin: 0;
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .bp-split { grid-template-columns: 1fr; gap: 32px; }
  .bp-statgrid { grid-template-columns: repeat(3, 1fr); }
  .bp-why__grid { grid-template-columns: 1fr; }
  .bp-why__item { padding: 8px 0 !important; }
  .bp-hero__ticker { font-size: 56px; }
  .bp-table--compare, .bp-table--perf { grid-template-columns: 1fr; }
  .bp-details-table { grid-template-columns: 1fr; }
  .bp-pm-grid { grid-template-columns: 1fr; }
  .bp-broker-grid { grid-template-columns: 1fr; }
}