/* The three solutions pages. Loads after site.css and adds only what
   site.css does not already set. Rules shared with site.css are not repeated here. */
:root { --space-section: clamp(4rem, 9vw, 7.5rem); }
* { min-width: 0; }
figcaption { margin: 0; }
ol, ul { padding: 0; list-style: none; }
strong { font-weight: 600; }

/* Skip link */
.skip { position: absolute; left: 1rem; top: -5rem; z-index: 10; display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0.5rem 1rem; background: var(--cream-field); color: var(--navy); border: 1px solid var(--gold); border-radius: 2px; }
.skip:focus { top: 1rem; outline: 2px solid var(--navy); outline-offset: 2px; }

/* Hero */
.hero { padding-top: clamp(1rem, 3vw, 2rem); padding-bottom: clamp(4rem, 9vw, 7.5rem); }
.hero-grid { margin-top: clamp(2rem, 5vw, 4rem); gap: clamp(2.5rem, 6vw, 5rem); }
.eyebrow { font-size: 0.9375rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cream-soft); }
.hero h1 { margin-top: 1.5rem; font-size: clamp(2.625rem, 1.75rem + 3.6vw, 4.5rem); line-height: 1.04; }
.hero-body { margin-top: 1.75rem; max-width: 32em; }
.hero-actions { margin-top: 2.25rem; }
.button { padding: 0.6rem 1.75rem; text-align: center; }

/* Editorial sections */
.section { scroll-margin-top: 1rem; }
.section h2 { font-size: clamp(2rem, 1.4rem + 2.4vw, 3.25rem); line-height: 1.1; max-width: 18em; }
.section h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(1.375rem, 1.2rem + 0.6vw, 1.75rem); line-height: 1.25; }
.lede { margin-top: 1.5rem; }
.two-col .lede { margin-top: 0; }

/* Closing CTA */
.cta .lede { color: var(--cream-soft); }
.cta .hero-actions { margin-top: 2rem; }

/* Investment platforms */
.ip-roles { margin-top: clamp(2.5rem, 5vw, 4rem); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(2rem, 4vw, 3.5rem); }
.ip-roles > div { border-top: 1px solid var(--navy); padding-top: 1.25rem; }
.ip-roles p { margin-top: 0.875rem; color: var(--ink-soft); }

/* Responsive */
@media (max-width: 900px) {
  .hero-grid, .two-col { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px) {
  .nav-links li:first-child a { padding-left: 0; }
  .button { width: 100%; }
  .ip-roles { grid-template-columns: minmax(0, 1fr); }
}