/* ==========================================================================
   Solutions v2 — new sections for solutions-2.html, measured against the
   Figma Dev Mode source (file CR70V8ZRQR9Qg7LWefymrS, desktop frame
   1643:13941 "Solutions v1", mobile frame 1764:1777). Loaded only by
   solutions-2.html, after solutions.css and before v2-shared.css, so the
   old solutions.html is untouched.

   Figma section heights (desktop 1440): Hero 800 (header overlaps it),
   Asset Management 1032, Lending 546, On-chain 436, Footer 360.
   ========================================================================== */

/* ---------- Hero: forest ground + the hilbert-pattern video, breadcrumb,
   title, subtitle. Reuses .hero / .hero__video / .hero__breadcrumb /
   .hero__title / .hero__text from home.css + solutions.css as-is.

   Figma puts the content block's baseline 64px above the hero's foot
   (frame 1643:13944 sits 32px above the hero edge and carries another
   32px of its own bottom padding); home.css's shared .hero only pads 32px,
   which floated the whole block 32px low. ---------- */
.hero--v2 { background-color: var(--color-forest); padding-bottom: 64px; }
/* Figma tints the breadcrumb's "Home /" with additional/matcha at 60%,
   not the almost-white 50% the shared .hero__breadcrumb .muted uses. */
.hero--v2 .hero__breadcrumb .muted { color: var(--color-gray-60); }

/* ---------- Asset Management: heading + a list of fund rows ----------
   The rows are full-bleed in Figma (x=0..1440) with the text inset by the
   normal 32px page gutter, so the list breaks out of .container and the
   row carries the gutter as its own padding. Dropping the row's right
   padding makes its three tracks exactly (1440 - 32) / 3 = 469.33px wide,
   which is how Figma lands the description at x=502 and the link at
   x=972. ---------- */
/* Distance from the container's outer edge to the viewport edge: zero until
   the viewport passes --container-max, then half the surplus. A negative
   gutter margin alone only reaches the container's edge, which is why these
   bands stopped short of the screen on anything wider than 1440. 100vw
   counts the scrollbar, so the sections using it clip the few px of
   overshoot rather than growing a horizontal scrollbar. */
.fundlist-section,
.lending-section,
.onchain-cta-section {
  --page-bleed: calc((100vw - min(100vw, var(--container-max))) / 2);
  --bleed-x: calc(var(--container-pad) + var(--page-bleed));
  overflow-x: clip;
}

.fundlist-section { background: var(--color-almost-white); padding: var(--sp-120) 0; }
.fundlist-section h2 { font-family: var(--font-heading); font-weight: 400; font-size: 62px; line-height: 0.9; letter-spacing: -0.93px; color: var(--color-forest); margin-bottom: var(--sp-80); }
/* the row is a full-width band so its rule and hover ground reach both
   screen edges; the grid inside it stays aligned to the container */
.fund-row {
  display: block;
  border-bottom: 1px solid var(--color-green-10);
  color: inherit;
  text-decoration: none;
  transition: background-color 0.2s ease;
}
.fund-row:hover { background: var(--color-green-5); box-shadow: inset 0 1px 0 var(--color-green-10); }
/* no right gutter: that makes the three tracks (1440 - 32) / 3 = 469.33px,
   which is how Figma lands the description at x=502 and the link at x=972 */
.fund-row__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 48px 0 48px var(--container-pad);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: start;
}
.fund-row__name h3 { font-family: var(--font-heading); font-weight: 400; font-size: 40px; line-height: 1; letter-spacing: -0.4px; color: var(--color-forest); }
.fund-row__name p { margin-top: var(--sp-8); font-family: var(--font-heading); font-style: italic; font-size: 16px; line-height: 20px; color: var(--color-green-50); }
.fund-row__desc { max-width: 345px; font-family: var(--font-body); font-size: 16px; line-height: 22px; color: var(--color-green-50); }
.fund-row__link { font-family: var(--font-body); font-size: 14px; line-height: 20px; color: var(--color-forest); }
.fund-row__link:hover { text-decoration: underline; text-underline-position: from-font; }

/* ---------- Lending & Borrowing: eyebrow + a tag line + one light card ----------
   The band's ground is green/5 laid over almost-white — composited from the
   two existing tokens rather than a new hex. The card sits 16px left of the
   content track and runs out to the page edge, and the "Financing Solution"
   tag sits above it (outside the card box), 4px clear of its top rule. */
.lending-section {
  padding: var(--sp-120) 0;
  background-color: var(--color-almost-white);
  background-image: linear-gradient(var(--color-green-5), var(--color-green-5));
}
.lending-section .split { align-items: start; }
.lending-section .label { font-family: var(--font-body); font-size: 16px; line-height: 22px; color: var(--color-green-50); }
.lending-card__tag { margin-bottom: var(--sp-4); font-family: var(--font-body); font-size: 16px; line-height: 22px; color: var(--color-forest); opacity: 0.5; }
.lending-card {
  position: relative;
  overflow: hidden;
  height: 280px;
  margin-left: -16px;
  /* runs out to the screen edge, taking the artwork anchored to its right
     edge with it */
  margin-right: calc(-1 * var(--bleed-x));
  padding: 16px 32px 16px 16px;
  background: var(--color-green-5);
  border-top: 1px solid var(--color-green-10);
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
  color: var(--color-forest);
  text-decoration: none;
}
.lending-card__title { font-family: var(--font-heading); font-weight: 400; font-size: 40px; line-height: 1; letter-spacing: -0.4px; color: var(--color-forest); }
.lending-card__body { position: relative; flex: 1 0 0; min-height: 0; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; width: 672px; max-width: 100%; }
.lending-card__desc { max-width: 436px; font-family: var(--font-body); font-size: 16px; line-height: 22px; color: var(--color-forest); opacity: 0.6; }
.lending-card__link { font-family: var(--font-body); font-size: 14px; line-height: 20px; color: var(--color-forest); }
.lending-card:hover .lending-card__link { text-decoration: underline; text-underline-position: from-font; }
/* Figma anchors the hilbert artwork off the card's right edge at its native
   3202px, so only a ~490px-wide slice of the middle of the pattern shows. */
.lending-card__graphic { position: absolute; width: 3202px; height: 3202px; right: -2713px; top: -1651px; max-width: none; pointer-events: none; }

/* ---------- On-chain: eyebrow + two-tone heading + a two-link CTA bar ---------- */
.onchain-cta-section { background: var(--color-light-green); padding: var(--sp-80) 0 var(--sp-120); }
.onchain-cta-section .split { align-items: start; }
.onchain-cta-section .label { font-family: var(--font-body); font-size: 16px; line-height: 22px; color: var(--color-green-50); }
.onchain-cta-section h2,
.onchain-cta-section .onchain-cta__sub { font-family: var(--font-heading); font-weight: 400; font-size: 40px; line-height: 1; letter-spacing: -0.4px; color: var(--color-forest); }
/* the strapline is a 698px-wide text box in Figma, which breaks it after
   "on-chain" — the 907px content track would otherwise keep it on one line */
.onchain-cta-section .onchain-cta__sub { max-width: 698px; opacity: 0.4; }
.onchain-cta__links {
  display: flex;
  margin-top: var(--sp-80);
  /* the rule runs out to the screen edge, but the padding gives back exactly
     what the extra margin took, so the content box — and with it the 50/50
     split that puts the divider on Figma's midpoint — is unchanged */
  margin-right: calc(-1 * var(--bleed-x));
  padding-right: var(--page-bleed);
  border-bottom: 1px solid var(--color-forest);
}
.onchain-cta__links a {
  /* border-box so the two halves stay exactly 469.5px each — with the
     inherited content-box the asymmetric padding pushed the divider 7px
     left of Figma's midpoint */
  box-sizing: border-box;
  flex: 0 0 50%;
  min-width: 0;
  padding: 10px 16px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 13px;
  line-height: 16px;
  color: var(--color-forest);
}
.onchain-cta__links a:first-child { border-right: 1px solid var(--color-forest); padding-left: 0; }
.onchain-cta__links a:hover { text-decoration: underline; text-underline-position: from-font; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1024px) {
  .fund-row__inner { grid-template-columns: 1fr 1fr; row-gap: var(--sp-16); padding-right: var(--container-pad); }
  .fund-row__name { grid-column: 1 / -1; }
  .fund-row__desc { max-width: none; }
}

@media (max-width: 992px) {
  /* v2-shared collapses .split to a single column here, so the card no
     longer sits in a right-hand track — pull it back to the page gutter. */
  .lending-card { margin-left: 0; }
  .lending-card__tag { margin-top: var(--sp-24); }
}

/* ==========================================================================
   Mobile — measured against Figma frame 1764:1777 "Solutions [375]"
   (Hero 564 incl. the 64px header, Asset Management 1072, Lending 568,
   On-chain 392). Every band pads 80px top and bottom at this width, and the
   fund row re-orders to tag / title / description / link.
   ========================================================================== */
@media (max-width: 768px) {
  /* home.css's mobile hero rules centre .hero__inner and flatten
     .hero__content (display:contents) for the old sidebar-stats hero. This
     hero has neither buttons nor a stats sidebar, so undo the centring and
     keep the breadcrumb/title/subtitle left-aligned in plain source order. */
  .hero--v2 .hero__inner { align-items: stretch; text-align: left; }
  .hero--v2 .hero__content { display: flex; flex-direction: column; gap: 12px; }
  .hero--v2 { min-height: 500px; padding-bottom: var(--sp-32); }
  .hero--v2 .hero__title { font-size: 44px; line-height: 0.9; letter-spacing: -0.66px; }
  .hero--v2 .hero__text { font-size: 14px; line-height: 20px; margin-top: 12px; }

  .fundlist-section { padding: 80px 0; }
  .fundlist-section h2 { font-size: 40px; line-height: 1; letter-spacing: -0.6px; margin-bottom: 40px; }
  .fund-row__inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: var(--sp-24) var(--container-pad);
  }
  /* Figma flips the pair on mobile: the italic denomination tag sits above
     the fund name, not below it */
  .fund-row__name { display: flex; flex-direction: column-reverse; gap: 10px; }
  .fund-row__name h3 { font-size: 28px; }
  .fund-row__name p { margin-top: 0; }
  .fund-row__desc { max-width: none; font-size: 14px; line-height: 20px; }
  .fund-row__link { margin-top: 22px; }

  /* style.css gives the stacked .split a 32px row-gap; Figma specifies the
     label-to-content gap per band (44px here, 52px on the on-chain band),
     so drive it from the label's own margin instead */
  .lending-section .split,
  .onchain-cta-section .split { row-gap: 0; }

  .lending-section { padding: 80px 0; }
  .lending-section .label { line-height: 20px; margin-bottom: 44px; }
  .lending-card__tag { margin-top: 0; line-height: 20px; }
  .lending-card {
    height: 320px;
    margin-left: calc(-1 * var(--container-pad));
    padding: var(--sp-16);
  }
  .lending-card__title { font-size: 24px; letter-spacing: -0.36px; }
  .lending-card__body { flex: 0 0 auto; width: 247px; gap: var(--sp-16); justify-content: flex-start; }
  .lending-card__desc { max-width: none; font-size: 14px; line-height: 20px; }
  .lending-card__graphic { width: 2342px; height: 2342px; right: auto; left: -1056px; top: 174px; }

  .onchain-cta-section { padding: 80px 0; }
  .onchain-cta-section .label { line-height: 20px; margin-bottom: 52px; }
  .onchain-cta-section h2,
  .onchain-cta-section .onchain-cta__sub { font-size: 24px; letter-spacing: -0.36px; }
  .onchain-cta-section .onchain-cta__sub { max-width: none; }
  /* the CTA pair stays side-by-side at 375 in Figma. Here the rule runs to
     BOTH screen edges while the link text stays on the container, so the
     left side gets the same margin/padding pair the right side already has */
  .onchain-cta__links {
    margin-top: 52px;
    margin-left: calc(-1 * var(--bleed-x));
    padding-left: var(--bleed-x);
  }
}