:root {
  --oc-ink: #132b38;
  --oc-mint: #b9f3d2;
}

.oc-hero {
  padding: clamp(1.5rem, 4vw, 3rem);
  margin: 0 0 2rem;
  border: 1px solid #2e5660;
  border-radius: 1rem;
  background: radial-gradient(ellipse at top right, #24534c 0, transparent 65%), #112732;
  color: #e7f1ef;
}

.md-typeset .oc-hero h1 {
  max-width: 15ch;
  margin: .7rem 0 1rem;
  color: #fff;
  font-size: clamp(2rem, 4vw, 3.1rem);
  font-weight: 750;
  line-height: 1.12;
  letter-spacing: -.045em;
}

.oc-eyebrow {
  color: var(--oc-mint);
  font-family: var(--md-code-font-family);
  font-size: .65rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.oc-hero > p { max-width: 37rem; }
.oc-hero .md-button { margin: .3rem .3rem .3rem 0; border-color: var(--oc-mint); color: var(--oc-mint); }
.oc-hero .md-button--primary { background: var(--oc-mint); color: var(--oc-ink); }
.oc-hero .md-button:hover, .oc-hero .md-button:focus-visible { background: #fff; color: var(--oc-ink); border-color: #fff; }
.oc-note { font-size: .72rem; color: #c3d8d3; }

.oc-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; margin: 1rem 0 2rem; }
.oc-cards > div { display: flex; flex-direction: column; padding: 1rem; border: 1px solid var(--md-default-fg-color--lightest); border-radius: .65rem; }
.md-typeset .oc-cards h3 { margin-top: .2rem; font-weight: 700; }
.oc-cards p { font-size: .76rem; }
.oc-cards p:last-child { margin-top: auto; padding-top: .5rem; }
.oc-cards a { font-weight: 600; }
.oc-qr { float: right; width: 150px; max-width: 40%; margin: 0 0 1rem 1.2rem; background: white; border-radius: .4rem; }

@media (max-width: 700px) {
  .oc-cards { grid-template-columns: 1fr; }
  .oc-hero { border-radius: .7rem; }
}