/* Hosting note injected after each article intro */
.host-tip {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: .35rem 1.5rem;
  margin: 1.75rem 0 2rem;
  padding: .85rem 1.1rem;
  border: 2px dashed rgba(20, 108, 117, .45);
  border-radius: .8rem;
  background: rgba(20, 108, 117, .05);
}
[data-theme="dark"] .host-tip { border-color: rgba(63, 178, 189, .45); background: rgba(63, 178, 189, .07); }
.host-tip__logo {
  display: inline-flex;
  align-items: baseline;
  font-weight: 800;
  font-size: 1.55rem;
  line-height: 1;
  letter-spacing: -.02em;
  text-decoration: none !important;
}
.host-tip__logo .f3 { color: #146c75; }
.host-tip__logo .cloud { color: #192c32; }
[data-theme="dark"] .host-tip__logo .f3 { color: #3fb2bd; }
[data-theme="dark"] .host-tip__logo .cloud { color: #e9f1f3; }
.host-tip__body { display: flex; flex-direction: column; justify-content: center; gap: .1rem; min-width: 0; }
.host-tip__body strong { font-size: .9rem; font-weight: 700; line-height: 1.35; }
.host-tip__body span { font-size: .82rem; line-height: 1.45; color: var(--ifm-color-content-secondary); font-variant-numeric: tabular-nums; }
.host-tip__body em { font-style: normal; font-weight: 700; color: #146c75; white-space: nowrap; }
[data-theme="dark"] .host-tip__body em { color: #3fb2bd; }
.host-tip__cta {
  white-space: nowrap;
  font-size: .85rem;
  font-weight: 700;
  color: #fff !important;
  background: #146c75;
  padding: .7rem 1.2rem;
  border-radius: .55rem;
  text-decoration: none !important;
}
.host-tip__cta:hover { background: #10545b; }
[data-theme="dark"] .host-tip__cta { background: #3fb2bd; color: #10242a !important; }
[data-theme="dark"] .host-tip__cta:hover { background: #63c4cd; }

@media (max-width: 720px) {
  .host-tip { grid-template-columns: 1fr; justify-items: start; gap: .7rem; }
  .host-tip__cta { width: 100%; text-align: center; }
}