:root {
  --hpcg-ink: #24332c;
  --hpcg-muted: #52655a;
  --hpcg-green: #246b43;
  --hpcg-line: #dce8de;
  --hpcg-paper: #ffffff;
  --hpcg-page: #f7faf8;
  --hpcg-prose-width: 60rem;
}

html {
  scroll-padding-top: 5rem;
}

body {
  color: var(--hpcg-ink);
  background: var(--hpcg-page);
  line-height: 1.6;
}

.navbar.bg-dark {
  background: #17231e !important;
  box-shadow: 0 3px 14px rgba(17, 35, 25, .14);
}

.navbar-brand {
  font-size: 1.25rem;
  letter-spacing: .025em;
}

.navbar .navbar-nav {
  gap: .35rem;
}

.navbar-dark .navbar-nav .nav-link {
  color: #d4e0d6;
  border-radius: .4rem;
  padding-inline: .75rem;
}

.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link:focus-visible,
.navbar-dark .navbar-nav .nav-link.active {
  color: #fff;
  background: rgba(145, 198, 111, .17);
}

main > .container {
  max-width: 1120px;
  padding-top: 92px;
  padding-bottom: 4rem;
}

.page-header .card {
  overflow: hidden;
  border: 0;
  border-radius: 1rem;
  box-shadow: 0 10px 28px rgba(22, 45, 30, .11);
}

.page-header .card img {
  display: block;
  width: 100%;
  height: auto;
}

main > .container > br,
main > .container > p:empty,
main > .container > span[style*="height: 100"] {
  display: none !important;
}

main > .container > .lead,
main .col-md-12.lead {
  max-width: var(--hpcg-prose-width);
  margin-top: 2rem;
  margin-bottom: 2rem;
  font-size: 1.13rem;
  line-height: 1.7;
  color: var(--hpcg-muted);
}

h1,
h2,
h3 {
  color: #1d3426;
  letter-spacing: -.025em;
}

h1 {
  margin-bottom: 1.2rem;
}

h2,
h3 {
  margin-top: 2rem;
  margin-bottom: 1rem;
}

main a:not(.btn) {
  color: var(--hpcg-green);
  text-underline-offset: .18em;
}

main a:not(.btn):hover {
  color: #16492d;
}

main .p-5.mb-4.bg-light {
  background: #edf5ef !important;
  border: 1px solid #d5e6d8;
  border-radius: 1rem !important;
  padding: 2rem 2.5rem !important;
}

main .p-5.mb-4.bg-light .container-fluid.py-5 {
  padding-block: 1rem !important;
}

main .display-5 {
  font-size: clamp(2rem, 3vw, 2.75rem);
}

main h1 svg,
main h2 svg,
main h2 img {
  max-width: 2.25rem;
  max-height: 2.25rem;
  vertical-align: middle;
  margin-left: .35rem;
}

main .btn {
  border-radius: .6rem;
  font-weight: 600;
  margin-bottom: .5rem;
}

main .container-fluid.py-5 > .btn,
main .col-md-6 .btn,
main .container > p > .btn {
  margin-right: .45rem !important;
  margin-left: 0 !important;
}

.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: #246b43;
  --bs-btn-border-color: #246b43;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #195333;
  --bs-btn-hover-border-color: #195333;
}

.btn-outline-success,
.btn-primary-second {
  --bs-btn-color: #246b43;
  --bs-btn-bg: #edf5ef;
  --bs-btn-border-color: #9abda3;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #246b43;
  --bs-btn-hover-border-color: #246b43;
}

main .container-fluid.py-5 > .btn-outline-success,
main .container > p > .btn-outline-success {
  --bs-btn-color: #fff;
  --bs-btn-bg: #246b43;
  --bs-btn-border-color: #246b43;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #195333;
  --bs-btn-hover-border-color: #195333;
}

main .container-fluid.py-5 > .btn-primary {
  --bs-btn-color: #31533d;
  --bs-btn-bg: transparent;
  --bs-btn-border-color: #9ab8a2;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #31533d;
  --bs-btn-hover-border-color: #31533d;
}

.btn-outline-secondary,
.btn-outline-danger {
  --bs-btn-color: #31533d;
  --bs-btn-bg: transparent;
  --bs-btn-border-color: #9ab8a2;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #31533d;
  --bs-btn-hover-border-color: #31533d;
}

.row.align-items-md-stretch {
  row-gap: 1rem;
}

.row .text-bg-dark {
  color: var(--hpcg-ink) !important;
  background: var(--hpcg-paper) !important;
  border: 1px solid var(--hpcg-line);
  border-top: 4px solid #72a85a;
  box-shadow: 0 7px 22px rgba(22, 45, 30, .06);
  border-radius: 1rem !important;
  padding: 2rem !important;
}

.row .text-bg-dark h2 {
  margin-top: 0;
}

.table-responsive {
  background: var(--hpcg-paper);
  border: 1px solid var(--hpcg-line);
  border-radius: .75rem;
}

.table-responsive .table {
  margin-bottom: 0;
  min-width: 850px;
}

.table-responsive th,
.table-responsive td {
  padding: .8rem;
  vertical-align: middle;
}

.table-responsive .table > thead > tr:first-child,
.table-responsive .table > tbody:first-child > tr:first-child {
  background: #e7f2e9;
}

#toc + ol {
  max-width: 78ch;
  padding: 1.5rem 2rem 1.5rem 3rem;
  background: var(--hpcg-paper);
  border: 1px solid var(--hpcg-line);
  border-radius: .75rem;
}

#toc + ol > li {
  margin-bottom: .45rem;
}

.heading-with-toc {
  gap: 1rem;
  margin-top: 2rem;
}

.heading-with-toc h2 {
  min-width: 0;
  font-size: clamp(1.45rem, 2.1vw, 1.8rem);
}

.heading-with-toc > a {
  flex: none;
  font-size: .9rem;
}

ul.contacts {
  line-height: 1.9;
}

ul.contacts li {
  margin-bottom: .5rem;
}

footer.bg-light {
  background: #eef3ef !important;
  border-top: 1px solid var(--hpcg-line);
}

footer .container {
  max-width: 1120px;
}

.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .75rem 2rem;
}

.footer-brand {
  color: var(--hpcg-ink);
  font-weight: 700;
  white-space: nowrap;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem 1.1rem;
}

.footer-links a {
  color: var(--hpcg-green);
  text-decoration: none;
  text-underline-offset: .18em;
}

.footer-links a:hover {
  text-decoration: underline;
}

@media (max-width: 767px) {
  .footer-inner {
    align-items: flex-start;
    flex-direction: column;
  }
}

:focus-visible,
.table-responsive:focus-visible {
  outline: 3px solid #2b7b4b;
  outline-offset: 3px;
}

@media (max-width: 767px) {
  main > .container {
    padding-top: 76px;
    padding-bottom: 2.5rem;
  }

  main .p-5.mb-4.bg-light {
    padding: 1.25rem !important;
  }

  .row .text-bg-dark {
    padding: 1.5rem !important;
  }

  main .container-fluid.py-5 > .btn,
  main .container > p > .btn {
    display: block;
    width: 100%;
    margin-inline: 0 !important;
    text-align: center;
  }
}

/* Scientific AI */
.service-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: 1.5rem;
}

.service-actions .btn {
  margin-bottom: 0;
}

@media (max-width: 575px) {
  .service-actions .btn {
    width: 100%;
  }
}

.ai-service-feature {
  background: #edf5ef;
  border: 1px solid #d5e6d8;
  border-radius: 1rem;
  padding: 2rem 2.5rem;
}

.hero-actions .btn-outline-success,
.ai-service-feature .btn-outline-success {
  --bs-btn-bg: var(--hpcg-paper);
}

.cluster-hero .hero-stats {
  margin-top: 0;
}

.cluster-intro {
  max-width: var(--hpcg-prose-width);
  margin: -.75rem 0 2rem;
}

.ai-service-feature .ai-note {
  margin: 0;
  font-size: .85rem;
  color: var(--hpcg-muted);
}

.ai-service-feature .service-actions {
  align-items: center;
}

.ai-service-feature > .service-actions {
  margin-top: 0;
}

.ai-chat-section {
  margin-top: 1.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid #bfd8c4;
}

.ai-chat-section h4 {
  margin: 0 0 .5rem;
  color: #1d3426;
  font-size: 1.3rem;
  font-weight: 700;
}

.ai-chat-section .model-list {
  margin: .75rem 0 1rem;
}

.ai-chat-more {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
}

.cluster-section {
  margin-top: 2.5rem;
}

.cluster-section > h2 {
  margin-top: 0;
}

main code {
  color: var(--hpcg-green);
}

.ai-service-card {
  background: var(--hpcg-paper);
  border: 1px solid var(--hpcg-line);
  border-top: 4px solid #72a85a;
  border-radius: 1rem;
  padding: 1.5rem;
}

.ai-service-feature h3 {
  font-size: 1.6rem;
  font-weight: 700;
  margin: 0 0 .6rem;
}

.ai-service-card h3 {
  font-size: 1.25rem;
  margin: 0 0 .6rem;
}

.ai-service-feature p,
.ai-service-card p {
  margin-bottom: 0;
}

.ai-service-grid {
  margin-top: .5rem;
}

.ai-page > section {
  margin-top: 2.5rem;
}

.ai-page > section h2 {
  margin-top: 0;
}

.person-card {
  display: flex;
  flex-direction: column;
  background: var(--hpcg-paper);
  border: 1px solid var(--hpcg-line);
  border-radius: 1rem;
  padding: 1.5rem;
  box-shadow: 0 7px 22px rgba(22, 45, 30, .06);
}

.person-card h2,
.person-card h3 {
  font-size: 1.25rem;
  margin: 0 0 .4rem;
}

.person-role {
  color: var(--hpcg-green);
  font-weight: 600;
}

.ai-responsibilities .table {
  min-width: 640px;
}

.ai-responsibilities th {
  width: 36%;
}

.ai-responsibilities thead {
  background: #e7f2e9;
}

.ai-responsibilities tbody tr + tr {
  border-top: 1px solid var(--hpcg-line);
}

.ai-work,
.ai-boundary,
.home-hero-description {
  max-width: var(--hpcg-prose-width);
}

.ai-work {
  padding-left: 1.4rem;
}

.ai-work li {
  padding-left: .25rem;
  margin-bottom: .6rem;
}


@media (max-width: 767px) {
  .person-card {
    padding: 1.25rem;
  }
}

/* Larger Services card on the homepage */
.home-service-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem;
  margin-top: 1.5rem;
}

.home-service-links a {
  display: block;
  padding: 1rem 1.1rem;
  border: 1px solid var(--hpcg-line);
  border-radius: .75rem;
  background: #f7faf8;
  text-decoration: none;
  transition: border-color .15s ease, background-color .15s ease;
}

.home-service-links a:hover,
.home-service-links a:focus-visible {
  background: #edf5ef;
  border-color: #92b79c;
}

.home-service-links strong,
.home-service-links span {
  display: block;
}

.home-service-links strong {
  font-size: 1.08rem;
}

.home-service-links span {
  margin-top: .25rem;
  color: var(--hpcg-muted);
  font-size: .95rem;
  line-height: 1.4;
}

@media (max-width: 575px) {
  .home-service-links {
    grid-template-columns: 1fr;
  }
}

/* Service overview and detail pages */
.service-overview-card {
  display: block;
  padding: 1.5rem;
  background: var(--hpcg-paper);
  border: 1px solid var(--hpcg-line);
  border-top: 4px solid #72a85a;
  border-radius: 1rem;
  text-decoration: none;
  box-shadow: 0 7px 22px rgba(22, 45, 30, .06);
}

.service-overview-card:hover,
.service-overview-card:focus-visible {
  border-color: #92b79c;
  background: #f2f8f3;
}

.service-overview-card h2 {
  margin: 0 0 .5rem;
  font-size: 1.4rem;
}

.service-overview-card p {
  color: var(--hpcg-muted);
}

.service-overview-card span {
  font-weight: 600;
}

.service-back {
  margin-top: 2rem;
}

.service-detail {
  max-width: 82ch;
  margin-top: 2rem;
}

.service-detail h2 {
  font-size: 1.5rem;
}

.service-detail li {
  margin-bottom: .4rem;
}

/* Nested Services navigation */
.nav-current-service {
  margin-left: .25rem;
  color: #aed6b5;
  font-weight: 400;
}

.navbar .dropdown-menu {
  min-width: 14rem;
  padding: .4rem;
  border: 1px solid var(--hpcg-line);
  border-radius: .7rem;
  box-shadow: 0 12px 28px rgba(17, 35, 25, .16);
}

.navbar .dropdown-item {
  border-radius: .4rem;
  padding: .55rem .75rem;
  color: var(--hpcg-ink);
}

.navbar .dropdown-item:hover,
.navbar .dropdown-item:focus-visible,
.navbar .dropdown-item.active {
  color: #174b2e;
  background: #e7f2e9;
}

@media (min-width: 768px) and (max-width: 991px) {
  .nav-current-service {
    display: none;
  }
}

@media (max-width: 767px) {
  .navbar .dropdown-menu {
    border: 0;
    background: #22352a;
    box-shadow: none;
  }

  .navbar .dropdown-item {
    color: #d4e0d6;
  }

  .navbar .dropdown-item:hover,
  .navbar .dropdown-item:focus-visible,
  .navbar .dropdown-item.active {
    color: #fff;
    background: rgba(145, 198, 111, .2);
  }
}

/* Contact cards share the personnel treatment used on service pages. */
.contact-people {
  margin-top: 1.5rem;
}

.person-card h2,
.person-card h3 {
  line-height: 1.35;
}

.person-card .person-phone {
  margin-top: auto;
  margin-bottom: 0;
  padding-top: 1rem;
  color: var(--hpcg-muted);
}

.person-card .person-roles {
  padding-left: 1.25rem;
  margin: .25rem 0 0;
  color: var(--hpcg-muted);
}

.person-card .person-roles li + li {
  margin-top: .25rem;
}

.contacts-page .person-card > .person-role {
  margin-bottom: .25rem;
}

/* Account request dialogs */
.account-request-modal .modal-content {
  border: 1px solid var(--hpcg-line);
  border-radius: 1rem;
  overflow: hidden;
}

.account-request-modal .modal-header {
  background: #edf5ef;
  border-bottom-color: var(--hpcg-line);
}

.account-request-modal .modal-body li + li {
  margin-top: .75rem;
}

.hardware-table .generation-total td {
  background: var(--hpcg-page);
  border-bottom: 2px solid var(--hpcg-line);
  color: var(--hpcg-muted);
}

.hardware-table .cluster-total td {
  background: #e7f2e9;
  border-top: 2px solid var(--hpcg-green);
  border-bottom: 0;
  color: var(--hpcg-ink);
  font-weight: 600;
}

.hero-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  max-width: 44rem;
  margin: 1.5rem 0 2rem;
}

.hero-stats > div {
  padding: .9rem 1rem;
  background: var(--hpcg-paper);
  border: 1px solid var(--hpcg-line);
  border-radius: .75rem;
}

.hero-stats dt {
  color: var(--hpcg-green);
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.1;
}

.hero-stats dd {
  margin: 0;
  color: var(--hpcg-muted);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem;
}

@media (max-width: 575.98px) {
  .hero-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hero-actions .btn {
    width: 100%;
  }
}

.account-steps {
  max-width: var(--hpcg-prose-width);
  margin: 1.5rem 0;
  padding: 1.5rem 1.75rem;
  background: var(--hpcg-paper);
  border: 1px solid var(--hpcg-line);
  border-radius: .75rem;
}

.account-steps ol {
  margin-bottom: 0;
}

.account-steps li + li {
  margin-top: .5rem;
}

.account-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
}

@media (max-width: 575.98px) {
  .ai-service-feature {
    padding: 1.5rem;
  }

  .ai-service-feature .hero-stats dt {
    font-size: 1.1rem;
  }
}

.status-badge {
  display: inline-block;
  margin-left: .4rem;
  padding: .15rem .55rem;
  font-size: .8rem;
  font-weight: 600;
  vertical-align: middle;
  color: #7a4b00;
  background: #fff3d6;
  border: 1px solid #f0d596;
  border-radius: 999px;
}

.ai-service-feature .hero-stats {
  max-width: none;
  margin: 1.25rem 0;
}

.ai-service-feature .hero-stats dt {
  font-size: 1.35rem;
}

.model-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  margin-bottom: 1.5rem;
}

.model-list-label {
  font-weight: 600;
  color: var(--hpcg-muted);
}

.model-chip {
  padding: .3rem .75rem;
  font-size: .9rem;
  font-weight: 500;
  background: var(--hpcg-paper);
  border: 1px solid var(--hpcg-line);
  border-radius: 999px;
}

.model-chip small {
  font-family: var(--bs-body-font-family);
  color: #7a4b00;
}

.heading-logo {
  width: auto;
  height: 1em;
  margin-left: .35rem;
  vertical-align: -.12em;
}


/* Button with a tag segment on the right, e.g. "Ask the docs | IOCB VPN". */
.btn-split {
  display: inline-flex;
  align-items: stretch;
  gap: .75rem;
  padding-right: 0;
  overflow: hidden;
}

.btn-split > span:first-child {
  flex: 1;
  align-self: center;
}

.btn-split-tag {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-block: calc(-1 * var(--bs-btn-padding-y));
  padding: 0 .6rem;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .05em;
  line-height: 1.15;
  text-align: center;
  color: #7a4b00;
  background: #fff3d6;
  border-left: 1px solid #f0d596;
}

.home-tool-links {
  grid-template-columns: minmax(0, 1fr);
}

.home-tool-links a {
  display: flex;
  align-items: center;
  gap: .75rem;
}

.home-tool-links .tool-text {
  flex: 1;
  margin: 0;
  color: inherit;
  font-size: inherit;
}

.home-tool-links strong img {
  vertical-align: -.2em;
}

.home-tool-links .tool-tag {
  flex: none;
  margin: 0;
  padding: .3rem .5rem;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .05em;
  line-height: 1.15;
  text-align: center;
  color: #7a4b00;
  background: #fff3d6;
  border: 1px solid #f0d596;
  border-radius: .4rem;
}

.ai-service-card .ai-card-links {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem 1rem;
  align-items: baseline;
  margin-top: .75rem;
  font-weight: 600;
}

.ai-service-card .ai-card-links small {
  font-weight: 400;
  color: var(--hpcg-muted);
}