/* STAMP Across Industries. Every class here starts with "sai-". */

.sai-grey { background: #f3f5f8; }

.sai-intro { background: #fff; }
.sai-intro-text { max-width: 860px; margin: 0 auto; text-align: center; font-size: 22px; line-height: 1.8; color: #1b2232; }
.sai-intro-text p { margin-bottom: .5em; }

.sai-more { margin-top: auto; padding: 12px 22px; border-radius: 2px; font-size: 14px; gap: 10px; }
.sai-more .icon { width: 16px; height: 16px; }

/* Sector and "how can we help" cards. */
.sai-sectors { max-width: 1080px; margin: 0 auto; gap: 20px; }
.sai-sector { display: flex; flex-direction: column; align-items: flex-start; padding: 20px 24px 28px; }
.sai-sector .icon-tile { width: 40px; height: 40px; border-radius: 10px; background: #dbe9f8; color: var(--steel); font-size: 20px; }
.sai-sector h3 { margin: 22px 0 14px; font-family: var(--font-head); font-size: 21px; line-height: 1.35; }
.sai-sector p { font-size: 14px; line-height: 1.75; color: #334155; }
.sai-sector .sai-more { margin-top: 12px; }

/* "A Comprehensive Industry List": the dark band. */
.sai-dark { background: linear-gradient(135deg, #1a2b4b 0%, #1c3463 50%, #1a2b4b 100%); color: #cbd5e1; text-align: center; }
.sai-dark .section-head { margin-bottom: 48px; }
.sai-dark .section-head h2 { color: #fff; }
.sai-dark .lede { font-size: 16px; color: #dbe3ee; }
.sai-list-link { margin: 0 0 56px; }
.sai-list-link a { color: #fff; }
.sai-list-link a:hover { color: var(--steel-faint); }
.sai-list-intro { margin: 0 0 36px; font-size: 18px; font-weight: 600; font-style: italic; color: #8fc0f2; } /* light steel: this sits on the navy band */
.sai-specials { max-width: 1216px; margin: 0 auto; gap: 20px; text-align: left; }
.sai-special { display: flex; align-items: flex-start; gap: 36px; padding: 24px 24px 32px; border: 1px solid rgb(255 255 255 / 5%); border-radius: 12px; background: rgb(255 255 255 / 5%); }
.sai-special .icon-tile { width: 48px; height: 48px; border-radius: 10px; background: rgb(72 146 220 / 15%); color: var(--steel); font-size: 22px; }
.sai-special h3 { margin: 4px 0 6px; font-family: var(--font-head); font-size: 22px; color: #fff; }
.sai-special p { margin: 0; color: #a7b3c6; }

@media (max-width: 760px) {
  .sai-intro-text { font-size: 17px; }
  .sai-special { gap: 18px; padding: 20px; }
  .sai-special h3 { font-size: 19px; }
}


/* ---- Dark mode, generated by tools/darkmode.py when the site is built. Don't edit this part in site/; change the light rule in src/, or add a hand-written dark rule. ---- */
@media (prefers-color-scheme: dark) {
  .sai-grey { background-color: #181e28; }
  .sai-intro { background-color: #111620; }
  .sai-intro-text { color: #d4def4; }
  .sai-sector .icon-tile { background-color: #222a32; color: #7ebaf9; }
  .sai-sector p { color: #c2d3ec; }
  .sai-dark .section-head h2 { color: #ffffff; }
  .sai-list-link a { color: #ffffff; }
  .sai-list-link a:hover { color: #d6e6f8; }
  .sai-special { border-color: rgb(42 49 60 / 5%); background-color: rgb(17 22 32 / 5%); }
  .sai-special .icon-tile { background-color: rgb(72 146 220 / 15%); color: #7ebaf9; }
  .sai-special h3 { color: #ffffff; }
}