/* site-shared.css — common styles across pages */
html, body { color:#222; background:#fff; }
.top-bar { display:flex; align-items:center; gap:16px; padding:8px 16px; border-bottom:1px solid #eee; }
.top-bar nav a { margin-right:12px; text-decoration:none; color:#0b63ce; }
.top-bar nav a:hover { color:#094c9e; }
.top-bar nav a.active, .top-bar nav span.current { color:#111; cursor:default; text-decoration:none; font-weight:600; }
.box h2, .intro-text { color:#111; }
.muted { color:#555; }
.hero { background:#f7fbff; border:1px solid #e7f0ff; padding:24px; border-radius:10px; margin-top:10px; }
.card-neutral { background:#fafafa; border:1px solid #eee; border-radius:10px; padding:18px; }
.badge-soft { display:inline-block; background:#fff; border:1px solid #e5e7eb; padding:2px 8px; border-radius:999px; font-size:12px; }
code { background:#f3f3f3; padding:2px 6px; border-radius:6px; border:1px solid #e6e6e6; }
.cta { background:#f0f6ff; border:1px solid #d5e6ff; padding:16px; border-radius:10px; }
.footer-links a { font-size:14px; margin-right:10px; }
.section { margin: 16px 0; }

@media (prefers-color-scheme: dark) {
  html, body { background:#0b0b0b; color:#e6e6e6; }
  .top-bar { border-bottom:1px solid #2a2a2a; }
  .top-bar nav a { color:#9ecbff; }
  .top-bar nav a:hover { color:#c3ddff; }
  .top-bar nav a.active, .top-bar nav span.current { color:#ffffff; }
  .hero { background:#121821; border-color:#1e2a3a; }
  .card-neutral { background:#151515; border-color:#2a2a2a; }
  .badge-soft { background:#121212; border-color:#2a2a2a; color:#ddd; }
  code { background:#1a1a1a; border-color:#2d2d2d; color:#e6e6e6; }
  .cta { background:#142033; border-color:#2c3b52; color:#d6e4f7; }
  .copyright { color:#cfcfcf; }
  .copyright a { color:#9ecbff; }
  .copyright a:hover { color:#c3ddff; }
}

/* Current-page highlight */
.top-bar nav span.current {
    background: #1a2740;
    color: #eaf2ff;
    border-color: #2b4371;
    padding: 4px 8px;
    border-radius: 8px;
}
@media (prefers-color-scheme: dark) {
  .top-bar nav span.current {
    background: #1a2740;
    border-color: #2b4371;
    color: #eaf2ff;
  }
}

.steps-with-images {
    display: grid;
    gap: 16px;
}

.steps-with-images .step-row {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    background: #fff0; /* keep your background */
}

.steps-with-images img {
    height: 80px;
    width: auto;
    flex: 0 0 auto
}

.steps-with-images .step-text {
    line-height: 1.4
}

    .steps-with-images .step-text strong {
        display: block;
        margin-bottom: 2px
    }

@media (max-width: 600px) {
    .steps-with-images .step-row {
        flex-direction: column;
        align-items: flex-start
    }
}

/* Inline-style cleanup utilities */
.mt-18 {
    margin-top: 18px;
}
.footer-links a { font-size:14px; margin-right:10px; }

.fn-tip {
    cursor: help;
    margin-left: 2px;
    font-weight: 700
}

    .fn-tip:hover::after {
        content: " Auto-Sync requires the Ecomigrator Master plan ";
        position: relative;
        left: .25rem;
        padding: .15rem .4rem;
        border: 1px solid rgba(0,0,0,.15);
        border-radius: .35rem;
        background: #fff;
        box-shadow: 0 4px 14px rgba(0,0,0,.12);
        font-weight: 400;
    }