/* service.css — the service family on the system (scripts/service/migrate.mjs): the fourteen remaining hand pages
   keep their own sheets for their own parts (forms, instruments, the data desk, the deal-flow screen) and take the
   system's shell. css/system.css and this sheet load last on these pages, so the system's type wins ties with a
   family sheet; what remains here is the family's own layout around the shell. Tokens only. */

/* the July hero, one column now that its illustration is gone; the system's head type inside it */
.hero--single .hero__grid { grid-template-columns: minmax(0, 1fr); }
.hero--single .hero__content { max-width: 60rem; }
.hero .kicker.s-eyebrow, .section--dark .kicker.s-eyebrow { display: flex; margin: 0 0 var(--space-5); }
.hero__title.s-h1, .hero--compact h1.s-h1, .section--dark h1.s-h1 { font-family: var(--font-display); font-weight: 500; font-size: var(--text-display-xl); line-height: 1.06; letter-spacing: -0.022em; color: var(--color-charcoal); text-wrap: balance; }
.hero__title.s-h1 em, .hero--compact h1.s-h1 em { font-style: italic; font-weight: 400; color: var(--color-primary-dark); }
.hero__subtitle.s-lead { font-size: 18px; line-height: 1.65; color: var(--color-gray-600); max-width: 56ch; }
.hero__subtitle.s-meta { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-light); }
@media (max-width: 899px) { .hero__title.s-h1, .hero--compact h1.s-h1, .section--dark h1.s-h1 { font-size: var(--text-display-lg); } }

/* the market-data page's dark hero: the shell's colours on charcoal */
.section--dark .s-eyebrow { color: var(--green-300); }
.section--dark h1.s-h1 { color: var(--color-bg); margin-top: var(--space-5); }
.section--dark h1.s-h1 em { color: var(--gold-400); }
.section--dark .s-lead { color: var(--gray-300); margin: var(--space-4) auto 0; }

/* the September heads: the system's size wins over each family's own */
.svc-hero__title.s-h1, .inv-hero__title.s-h1, .intel-hero__title.s-h1, .ins-hero h1.s-h1 { font-size: var(--text-display-xl); line-height: 1.06; letter-spacing: -0.022em; }
.svc-hero__sub.s-lead, .inv-hero__sub.s-lead, .intel-hero__sub.s-lead, .ins-lede.s-lead, .ins-hero p.s-lead { font-size: 18px; line-height: 1.65; }
@media (max-width: 899px) { .svc-hero__title.s-h1, .inv-hero__title.s-h1, .intel-hero__title.s-h1, .ins-hero h1.s-h1 { font-size: var(--text-display-lg); } }

/* section headings in the system's type, whatever family set them */
.s-h2 { font-family: var(--font-display); font-weight: 500; font-size: var(--text-display-lg); line-height: 1.14; letter-spacing: -0.018em; color: var(--color-charcoal); text-wrap: balance; }
.svc-h2.s-h2, .inv-h2.s-h2, .intel-h2.s-h2, .svc-faq__h.s-h2 { font-size: var(--text-display-lg); }
@media (max-width: 899px) { .s-h2 { font-size: var(--text-display-md); } }

/* the questions: the system's card items over the July list and the September list */
.first-timer-faq.s-faq, .svc-faq__list.s-faq { display: grid; gap: var(--space-4); border: 0; }
.s-faq__item > summary.faq-item__question { padding: var(--space-5) var(--space-8); font-family: var(--font-body); font-size: var(--text-base); font-weight: 600; color: var(--color-text); }
.s-faq__item > summary.faq-item__question::after, .svc-faq__item.s-faq__item > summary::after { content: "+"; font-family: var(--font-body); font-size: inherit; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; border: 1.5px solid var(--color-border-strong); border-radius: var(--radius-full); font-weight: 400; color: var(--color-primary-dark); }
.s-faq__item[open] > summary.faq-item__question::after, .svc-faq__item.s-faq__item[open] > summary::after { content: "\2212"; }
.s-faq__item > .faq-item__answer, .s-faq__item > .svc-faq__a { padding: 0 var(--space-8) var(--space-6); font-size: var(--text-base); line-height: 1.65; color: var(--color-text-light); }
.s-faq__item > .faq-item__answer > :first-child, .s-faq__item > .svc-faq__a > :first-child { margin-top: 0; }
.s-faq__item > .faq-item__answer a, .s-faq__item > .svc-faq__a a { color: var(--color-primary-dark); font-weight: 600; }
@media (max-width: 599px) { .s-faq__item > summary.faq-item__question { padding: var(--space-4) var(--space-5); } .s-faq__item > .faq-item__answer, .s-faq__item > .svc-faq__a { padding: 0 var(--space-5) var(--space-5); } }

/* the band: the July final call to action and the September ending, both in the system's charcoal */
.final-cta.s-band { padding: 130px 0; background: var(--color-charcoal); }
.final-cta.s-band h2.ending__title { font-family: var(--font-display); font-weight: 500; font-size: var(--text-display-xl); line-height: 1.06; letter-spacing: -0.02em; color: var(--color-bg); margin: 0 auto 22px; max-width: 20ch; }
.final-cta.s-band p.ending__sub { margin: 0 auto 44px; max-width: 52ch; font-size: 17px; line-height: 1.6; color: var(--gray-300); }
.final-cta.s-band .ending__ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-4); margin: 0; }
.final-cta.s-band .btn--outline { background: transparent; border-color: var(--gray-400); color: var(--color-bg); }
.svc-ending.s-band::before { display: none; }
.svc-ending.s-band .svc-ending__inner { display: flex; flex-direction: column; align-items: center; gap: 0; padding: 0 var(--space-md); max-width: var(--max-width); text-align: center; }
.svc-ending.s-band .svc-ending__title { max-width: 20ch; margin: 0 auto 44px; font-size: var(--text-display-xl); line-height: 1.06; }
.svc-ending.s-band .svc-ending__ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-4); }
.svc-ending.s-band .svc-ending__primary, .svc-ending.s-band .svc-ending__secondary { font: inherit; font-weight: 600; }
@media (max-width: 899px) { .final-cta.s-band { padding: 80px 0; } .final-cta.s-band h2.ending__title, .svc-ending.s-band .svc-ending__title { font-size: var(--text-display-lg); } }

/* The phone (persona sweep, 6 Oct 2026, finding 10): the July hero's 60vh minimum left 253 px of empty ground between
   the contact page's lead and its form; under 768 px the one-column hero is as tall as its words. */
@media (max-width: 767px) {
  /* .hero.hero--single: layout.css sets the grid hero's padding through .hero:has(.hero__grid), two classes' worth */
  .hero.hero--single { min-height: 0; padding-top: var(--space-2xl); padding-bottom: var(--space-xl); }
}