/* Detail sub-pages (strategy attributes, documents, article body) */

/* ---------- Centered detail hero (color bg + ascii) ---------- */
.dhero { position: relative; overflow: hidden; min-height: 736px; display: flex; align-items: center; justify-content: center; text-align: center; padding: 32px 0; }
.dhero--purple { background: var(--color-purple); }
.dhero--night { background: var(--color-night); }
.dhero--forest { background: var(--color-forest); }
.dhero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.dhero__inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 12px; max-width: 1169px; padding: 0 32px; }
.dhero__crumb { font-family: var(--font-heading); font-style: italic; font-size: 16px; line-height: 20px; color: var(--color-almost-white); }
.dhero__crumb .muted { color: var(--color-gray-40); }
.dhero__title { font-family: var(--font-heading); font-weight: 400; font-size: 84px; line-height: 0.9; letter-spacing: -1.26px; color: var(--color-almost-white); }
.dhero__desc { max-width: 469px; font-family: var(--font-body); font-size: 16px; line-height: 22px; color: var(--color-almost-white); }
@media (max-width: 768px) { .dhero { min-height: 0; padding: 100px 0 64px; } .dhero__title { font-size: 40px; letter-spacing: -0.4px; } .dhero__desc { font-size: 14px; } }

/* ---------- Strategy library ---------- */
.strat { background: var(--color-almost-white); padding-top: var(--sp-120); padding-bottom: var(--sp-120); }
.strat .container { display: flex; flex-direction: column; gap: 40px; }
.strat__head { align-items: start; }
.strat__head .label { max-width: 302px; font-family: var(--font-body); font-size: 16px; line-height: 22px; color: var(--color-blue-50); }
.strat__head h2 { font-family: var(--font-heading); font-weight: 400; font-size: 62px; line-height: 0.9; letter-spacing: -0.93px; color: var(--color-night); }
/* Subnav is a full-bleed bar; the selected strategy tab is filled, not outlined */
.strat__subnav {
  align-items: stretch; border-bottom: 1px solid var(--color-blue-10);
  margin-left: calc(-1 * var(--container-pad)); margin-right: calc(-1 * var(--container-pad));
  padding-left: var(--container-pad); padding-right: var(--container-pad);
}
.strat__subnav .label { align-self: center; font-family: var(--font-body); font-size: 16px; line-height: 22px; color: var(--color-blue-50); }
.strat-tabs { display: flex; gap: 16px; }
.strat-tab {
  flex: 1; min-width: 0; display: flex; align-items: center; height: 36px;
  padding: 0 0 0 16px; border: none; background: none; cursor: pointer;
  font-family: var(--font-body); font-size: 16px; line-height: 22px; color: var(--color-blue-50);
}
.strat-tab.is-active { background: var(--color-blue-10); color: var(--color-night); }
.strat-panel { display: flex; flex-direction: column; gap: 40px; }
.strat-panel[hidden] { display: none; }
.strat__body { align-items: start; }
.strat__body > .label { font-family: var(--font-body); font-size: 16px; color: var(--color-blue-50); }
.strat__main { display: flex; flex-direction: column; gap: 40px; }
.strat__intro h3 { font-family: var(--font-heading); font-weight: 400; font-size: 40px; line-height: 1; letter-spacing: -0.4px; color: var(--color-night); }
.strat__intro p { margin-top: 8px; max-width: 745px; font-family: var(--font-body); font-size: 16px; line-height: 22px; color: var(--color-blue-50); }
.strat-attrs__tag { font-family: var(--font-heading); font-style: italic; font-size: 16px; color: var(--color-blue-50); margin-bottom: 40px; }
.strat-attrs__grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 168px; row-gap: 80px; }
.attr h4 { font-family: var(--font-heading); font-weight: 400; font-size: 28px; line-height: 1; letter-spacing: -0.28px; color: var(--color-night); }
.attr p { margin: 16px 0; max-width: 302px; font-family: var(--font-body); font-size: 16px; line-height: 22px; color: var(--color-blue-50); }
.attr__doc { font-family: var(--font-body); font-weight: 500; font-size: 13px; color: var(--color-blue-50); }
.strat-docs__label { font-family: var(--font-body); font-size: 16px; line-height: 22px; color: var(--color-blue-50); }
/* the grid sits 16px left of the text column so the hover panel lines up */
.strat-docs__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin-left: -16px; padding-bottom: 64px; border-top: 1px solid var(--color-blue-10); }
/* documents are download links: panel and arrow appear on hover */
.doc-card { display: flex; flex-direction: column; gap: 4px; padding: 16px 16px 80px; color: inherit; text-decoration: none; }
.doc-card:hover { background: var(--color-blue-5); }
.doc-card h4 { display: flex; align-items: center; justify-content: space-between; gap: 16px; font-family: var(--font-heading); font-weight: 400; font-size: 28px; line-height: 1; letter-spacing: -0.28px; color: var(--color-night); }
.doc-card h4 span { opacity: 0; transition: opacity 0.2s ease; }
.doc-card:hover h4 span { opacity: 1; }
.doc-card p { margin: 0; font-family: var(--font-heading); font-style: italic; font-size: 16px; line-height: 20px; color: var(--color-blue-50); }
@media (max-width: 992px) {
  .strat__head, .strat__subnav, .strat__body { grid-template-columns: 1fr; row-gap: 24px; }
  .strat__head h2 { font-size: 40px; }
  .strat-attrs__grid { grid-template-columns: 1fr; column-gap: 32px; row-gap: 40px; }
  /* tabs scroll sideways edge to edge; documents are always panelled */
  .strat__subnav .label { display: none; }
  .strat__subnav { row-gap: 0; }
  .strat-tabs { margin-left: calc(-1 * var(--container-pad)); margin-right: calc(-1 * var(--container-pad)); overflow-x: auto; scrollbar-width: none; }
  .strat-tabs::-webkit-scrollbar { display: none; }
  .strat-tab { flex: 0 0 188px; }
  .strat-docs__grid {
    grid-template-columns: 1fr; gap: 16px; border-top: none; padding-bottom: 0;
    margin-left: calc(-1 * var(--container-pad)); margin-right: calc(-1 * var(--container-pad));
  }
  .doc-card { gap: 10px; padding: 16px 32px 40px var(--container-pad); background: var(--color-blue-5); }
  .doc-card h4 span { opacity: 1; }
}

/* ---------- Request documentation band (forest) ---------- */
.reqdoc { background: var(--color-forest); color: var(--color-almost-white); padding-top: var(--sp-120); padding-bottom: var(--sp-120); }
.reqdoc--night { background: var(--color-night); }
.reqdoc__inner { align-items: start; }
.reqdoc__inner > .label { font-family: var(--font-body); font-size: 16px; color: var(--color-gray-40); }
.reqdoc__main h2 { font-family: var(--font-heading); font-weight: 400; font-size: 40px; line-height: 1; letter-spacing: -0.4px; color: var(--color-almost-white); }
/* the muted second line is part of the same Newsreader lockup as the heading */
.reqdoc__main p { margin-top: 0; max-width: 716px; font-family: var(--font-heading); font-weight: 400; font-size: 40px; line-height: 1; letter-spacing: -0.4px; color: var(--color-gray-40); }
/* the rule runs past the container to the page edge, as in the Figma frame */
.reqdoc__cta {
  display: block; margin-top: 80px; margin-right: calc(-1 * var(--container-pad));
  padding: 10px 16px 10px 0; border-bottom: 1px solid var(--color-almost-white);
  font-family: var(--font-body); font-size: 16px; line-height: 22px; color: var(--color-almost-white);
}
@media (max-width: 992px) { .reqdoc__inner { grid-template-columns: 1fr; row-gap: 24px; } }

/* ---------- Long-form article body ---------- */
.article { background: var(--color-almost-white); padding-top: var(--sp-120); padding-bottom: var(--sp-120); }
.article__body { grid-column: 5 / 13; display: flex; flex-direction: column; gap: 40px; }
.article__lead { max-width: 854px; font-family: var(--font-body); font-size: 16px; line-height: 22px; color: var(--color-night); }
.article__block h3 { font-family: var(--font-heading); font-weight: 400; font-size: 40px; line-height: 1; letter-spacing: -0.4px; color: var(--color-night); margin-bottom: 24px; }
.article__block h4 { font-family: var(--font-heading); font-weight: 400; font-size: 28px; line-height: 1; letter-spacing: -0.28px; color: var(--color-night); margin-bottom: 24px; }
.article__block p { max-width: 872px; font-family: var(--font-body); font-size: 16px; line-height: 22px; color: var(--color-blue-50); }
.article__quote { display: flex; flex-direction: column; gap: 46px; }
.article__quote .mark { font-family: var(--font-body); font-size: 16px; color: var(--color-blue-50); }
.article__quote blockquote { max-width: 873px; font-family: var(--font-heading); font-weight: 400; font-size: 32px; line-height: 1.1; letter-spacing: -0.32px; color: var(--color-night); }
.article__quote cite { font-family: var(--font-body); font-size: 16px; font-style: normal; color: var(--color-blue-50); }
@media (max-width: 992px) { .article__body { grid-column: 1 / 13; } .article__block h3 { font-size: 32px; } }

/* ---------- Report article (Financing / On-Chain) ---------- */
.report { background: var(--color-almost-white); padding-top: var(--sp-120); padding-bottom: var(--sp-120); }
.report__body { grid-column: 5 / 13; display: flex; flex-direction: column; gap: 40px; }
.report__lead { max-width: 854px; font-family: var(--font-body); font-size: 16px; line-height: 22px; color: var(--color-night); }
.report h3 { font-family: var(--font-heading); font-weight: 400; font-size: 40px; line-height: 1; letter-spacing: -0.4px; color: var(--color-night); }
.report h4 { font-family: var(--font-heading); font-weight: 400; font-size: 28px; line-height: 1.05; letter-spacing: -0.28px; color: var(--color-night); }
.report p { max-width: 872px; font-family: var(--font-body); font-size: 16px; line-height: 22px; color: var(--color-blue-50); }
.report__sec { display: flex; flex-direction: column; gap: 16px; }
.report__quote { display: flex; flex-direction: column; gap: 24px; margin: 24px 0; }
.report__quote blockquote { max-width: 873px; font-family: var(--font-heading); font-size: 32px; line-height: 1.1; letter-spacing: -0.32px; color: var(--color-night); }
.report__quote cite { font-family: var(--font-body); font-size: 16px; font-style: normal; color: var(--color-blue-50); }
/* Data tables sit on a grey panel: small half-opacity DM Sans head, Newsreader
   body rows separated by a hairline. Columns run on a 235px pitch (203 + 32). */
.data-table-wrap { background: var(--color-blue-5); padding: 16px; }
.data-table { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 0 4px; font-family: var(--font-body); }
.data-table th, .data-table td { text-align: left; padding-right: 32px; }
.data-table th { font-weight: 400; font-size: 16px; line-height: 22px; color: var(--color-night); opacity: 0.5; }
.data-table td { border-top: 1px solid var(--color-blue-10); padding-top: 16px; padding-bottom: 16px; font-family: var(--font-heading); font-size: 20px; line-height: 22px; letter-spacing: -0.2px; color: var(--color-night); }
.data-table th:nth-child(-n+3), .data-table td:nth-child(-n+3) { width: 235px; }

/* Pre-footer onboarding CTA — ascii field, label on top, single button */
.home-cta--onboard { min-height: 800px; padding: 24px 32px 0; justify-content: space-between; gap: 0; }
.home-cta--onboard .home-cta__graphic { top: 50%; left: 50%; transform: translate(-50%, -50%); width: 1800px; }
.home-cta--onboard .home-cta__body { position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; width: 1185px; max-width: 100%; }
.home-cta--onboard .home-cta__title { font-size: 62px; letter-spacing: -0.93px; }
.home-cta--onboard .home-cta__text { max-width: 456px; font-family: var(--font-body); font-size: 16px; line-height: 22px; color: var(--color-almost-white); }
.home-cta--onboard .btn--light { color: var(--color-forest); }
@media (max-width: 992px) { .report__body { grid-column: 1 / 13; } .report h3 { font-size: 32px; } }

/* ---------- Stats row (investor relations intro) ---------- */
.statsrow { background: var(--color-almost-white); padding-top: var(--sp-80); padding-bottom: var(--sp-80); }
.statsrow__lead { grid-column: 1 / 6; font-family: var(--font-body); font-size: 16px; line-height: 22px; color: var(--color-blue-50); }
.statsrow__grid { grid-column: 5 / 13; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--grid-gap-lg); align-self: start; }
.stat-cell { background: var(--color-blue-5); padding: 24px 16px; }
.stat-cell h3 { font-family: var(--font-heading); font-weight: 400; font-size: 40px; line-height: 1; letter-spacing: -0.4px; color: var(--color-night); }
.stat-cell p { margin-top: 8px; font-family: var(--font-body); font-size: 13px; color: var(--color-blue-50); }
@media (max-width: 992px) { .statsrow__lead, .statsrow__grid { grid-column: 1 / 13; } .statsrow__grid { grid-template-columns: 1fr 1fr; margin-top: 24px; } }

/* ---------- Section with label + content-8 (tables / lists) ---------- */
.lblsec { background: var(--color-almost-white); padding-top: var(--sp-80); padding-bottom: var(--sp-80); }
.lblsec__inner { align-items: start; }
.lblsec__inner > .label { font-family: var(--font-body); font-size: 16px; color: var(--color-blue-50); }
.lblsec__main h2 { font-family: var(--font-heading); font-weight: 400; font-size: 40px; line-height: 1; letter-spacing: -0.4px; color: var(--color-night); margin-bottom: 40px; }
.gov-list__item { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; padding: 16px 0; border-top: 1px solid var(--color-blue-10); }
.gov-list__item:last-child { border-bottom: 1px solid var(--color-blue-10); }
.gov-list__item span:first-child { font-family: var(--font-body); font-size: 16px; color: var(--color-night); }
.gov-list__item span:last-child { font-family: var(--font-body); font-size: 13px; color: var(--color-blue-50); flex-shrink: 0; }

/* Reports & documents — download rows. The grey panel and the trailing arrow
   are the hover state on desktop; on mobile both are always on. */
.lblsec--docs .lblsec__main h2 { font-size: 64px; line-height: 0.9; letter-spacing: -0.96px; margin-bottom: 80px; }
.doc-list { display: flex; flex-direction: column; gap: 40px; }
.doc-row { display: flex; flex-direction: column; gap: 4px; color: inherit; text-decoration: none; }
.doc-row__desc { max-width: 398px; font-family: var(--font-body); font-size: 16px; line-height: 22px; color: var(--color-blue-50); }
.doc-row__body { position: relative; display: flex; flex-direction: column; gap: 10px; border-top: 1px solid var(--color-blue-10); padding: 16px 32px 40px 0; }
/* the panel bleeds 16px to the left of the text column */
.doc-row__body::before { content: ""; position: absolute; left: -16px; right: 0; top: 0; bottom: 0; background: var(--color-blue-5); opacity: 0; transition: opacity 0.2s ease; }
.doc-row__body > * { position: relative; }
.doc-row:hover .doc-row__body::before { opacity: 1; }
.doc-row__title { font-family: var(--font-heading); font-size: 40px; line-height: 1; letter-spacing: -0.4px; color: var(--color-night); }
.doc-row__dl { padding-left: 0.2em; opacity: 0; transition: opacity 0.2s ease; }
.doc-row:hover .doc-row__dl { opacity: 1; }
.doc-row__meta { font-family: var(--font-heading); font-style: italic; font-size: 16px; line-height: 20px; color: var(--color-blue-50); }
.doc-row__more { position: relative; display: block; border-bottom: 1px solid var(--color-night); padding: 4px 32px 4px 0; font-family: var(--font-body); font-size: 16px; line-height: 22px; color: var(--color-night); }
.doc-row__more::after { content: ""; position: absolute; right: -10px; top: 0; width: 1px; height: 30px; background: var(--color-night); }
@media (max-width: 992px) { .lblsec__inner { grid-template-columns: 1fr; row-gap: 24px; } }

/* light-blue centered hero (article) */
.dhero--lightblue { background: var(--color-light-blue); }
.dhero--lightblue .dhero__title { color: var(--color-night); }
.dhero--lightblue .dhero__crumb { color: var(--color-night); }
.dhero--lightblue .dhero__crumb .muted { color: var(--color-blue-50); }
.dhero--lightblue .dhero__desc { color: var(--color-blue-50); }
/* article meta sidebar */
.report__meta { grid-column: 1 / 5; align-self: start; display: flex; flex-direction: column; gap: 24px; padding-right: 32px; }
.report__meta .m-item p:first-child { font-family: var(--font-heading); font-size: 20px; letter-spacing: -0.2px; color: var(--color-night); }
.report__meta .m-item p:last-child { margin-top: 4px; font-family: var(--font-body); font-size: 14px; color: var(--color-blue-50); }
@media (max-width: 992px) { .report__meta { grid-column: 1 / 13; padding-right: 0; margin-bottom: 24px; flex-direction: row; flex-wrap: wrap; gap: 32px; } }

/* deep-blue CTA modifier (shared for detail pages) */
.home-cta--deepblue { background: var(--color-night); }

/* Mobile type scale — verified against Figma 375 frames */
@media (max-width: 768px) {
  .strat__head h2 { font-size: 40px; }
  .strat__intro h3 { font-size: 24px; }
  .attr h4 { font-size: 28px; }
  .doc-card h4 { font-size: 28px; }
  /* Figma 375: 44px between label, lockup and CTA; CTA runs edge to edge */
  .reqdoc { padding-top: 64px; padding-bottom: 80px; }
  .reqdoc__inner { row-gap: 44px; }
  .reqdoc__main h2 { font-size: 24px; letter-spacing: -0.24px; }
  .reqdoc__main p { margin-top: 8px; font-size: 24px; letter-spacing: -0.24px; }
  .reqdoc__cta {
    margin-top: 44px; margin-left: calc(-1 * var(--container-pad));
    padding-left: var(--container-pad); font-size: 14px;
  }
  .article__block h3, .report h3 { font-size: 40px; }
  .article__block h4, .report h4 { font-size: 28px; }
  .article__quote blockquote, .report__quote blockquote { font-size: 28px; }
  /* Stats are 62px in the Figma mobile frame — stack to one column so the
     big numbers get full width and don't overflow. */
  .statsrow__grid { grid-template-columns: 1fr; }
  .stat-cell h3 { font-size: 62px; }
  .lblsec__main h2 { font-size: 28px; }
  /* Figma 375: the table is wider than the viewport and scrolls sideways */
  .data-table-wrap { overflow-x: auto; }
  .data-table { min-width: 704px; }
  .data-table th, .data-table td { padding-right: 16px; }
  .data-table th { font-size: 12px; line-height: 16px; }
  .data-table td { font-family: var(--font-body); font-size: 14px; line-height: 22px; letter-spacing: 0; padding-top: 9px; padding-bottom: 9px; }
  .data-table th:nth-child(-n+3), .data-table td:nth-child(-n+3) { width: 180px; }
  .home-cta--onboard { min-height: 700px; padding: 16px 16px 0; }
  .home-cta--onboard .home-cta__graphic { width: 1350px; }
  .home-cta--onboard .home-cta__body { gap: 16px; width: 100%; }
  .home-cta--onboard .home-cta__title { font-size: 32px; line-height: 1; letter-spacing: -0.32px; }
  .home-cta--onboard .home-cta__text { max-width: 306px; }
  /* Figma 375: rows run edge to edge, panel and arrow always visible */
  .lblsec--docs { padding-bottom: 80px; }
  .lblsec--docs .lblsec__main h2 { font-size: 32px; line-height: 1; letter-spacing: -0.32px; margin-bottom: 52px; }
  /* the CTA tick sits 10px past the full-bleed edge; clipped, as in the frame */
  .doc-list { margin-left: calc(-1 * var(--container-pad)); margin-right: calc(-1 * var(--container-pad)); overflow: hidden; }
  .doc-row__desc { max-width: none; padding: 0 var(--container-pad); }
  .doc-row__body { border-top-color: var(--color-blue-5); padding-left: var(--container-pad); }
  .doc-row__body::before { left: 0; opacity: 1; }
  .doc-row__title { font-size: 28px; letter-spacing: -0.28px; }
  .doc-row__dl { opacity: 1; }
  .doc-row__more { padding-left: var(--container-pad); }
}