.mkt {
  --mkt-panel: var(--white);
  --mkt-panel-soft: var(--paper);
  --mkt-ink: var(--fg);
  --mkt-muted: var(--muted);
  --mkt-rule: var(--border);
  --mkt-accent: var(--accent);
  --mkt-accent-soft: rgba(184, 57, 15, 0.09);
  /* Grounded elevation: a tight neutral contact shadow + soft spread (was a single
     flat glow), paired with a catch-light so cards read as physical paper. */
  --mkt-shadow: 0 1px 2px rgba(26, 23, 20, 0.05), 0 14px 36px -10px rgba(38, 30, 25, 0.13);
  --mkt-catch: inset 0 1px 0 rgba(255, 255, 255, 0.7);
  font-optical-sizing: auto;
}

.mkt .mkt-proof-strip {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.mkt .mkt-proof-item,
.mkt .mkt-step,
.mkt .mkt-price-card,
.mkt .mkt-faq {
  background: var(--mkt-panel);
  border: 1px solid var(--mkt-rule);
  border-radius: 8px;
}

.mkt .mkt-proof-item,
.mkt .mkt-step {
  padding: clamp(18px, 3vw, 28px);
  box-shadow: var(--mkt-shadow), var(--mkt-catch);
}

.mkt .step-num {
  font-variant-numeric: tabular-nums lining-nums;
}

/* Screen-reader-only utility. Used by visible-section labels (e.g. agents.html
   "Available agents" h2) that must stay in the a11y tree but off-screen. The
   marketing pages don't load shared/recovery.css where this otherwise lives, so
   define it in the always-loaded marketing overlay. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Brand-logos band heading: use the site heading font (it was a bare
   .section-tag, which has no style on marketing pages -> fell back to body
   sans). Sized down from the giant default .section-title. */
.mkt .logos-title {
  font-size: clamp(22px, 3vw, 32px);
  letter-spacing: -0.02em;
  line-height: 1.1;
  text-align: center;
  margin-bottom: clamp(28px, 4vw, 44px);
}

.mkt .mkt-price-card {
  padding: clamp(24px, 4vw, 40px);
  box-shadow: var(--mkt-shadow), var(--mkt-catch);
}

.mkt .mkt-price-card.is-featured {
  border-color: var(--mkt-accent);
  background: linear-gradient(180deg, var(--mkt-accent-soft), var(--mkt-panel) 42%);
}

.mkt .mkt-price {
  color: var(--mkt-ink);
  font-family: var(--font-display, var(--font-heading));
  font-size: clamp(36px, 6vw, 64px);
  line-height: 1;
}

.mkt .mkt-faq {
  padding: 2px 18px;
}

.mkt .mkt-faq summary {
  cursor: pointer;
  font-weight: 700;
  padding: 18px 0;
}

.mkt .mkt-faq p {
  color: var(--mkt-muted);
  line-height: 1.6;
  margin: 0 0 18px;
}

.mkt .mkt-badge {
  align-items: center;
  background: var(--mkt-accent-soft);
  border: 1px solid rgba(184, 57, 15, 0.18);
  border-radius: 999px;
  color: var(--mkt-accent);
  display: inline-flex;
  font-size: 13px;
  font-weight: 700;
  gap: 8px;
  line-height: 1;
  padding: 9px 12px;
}

/* ── Solutions nav dropdown (shared across marketing pages) ─────────────────
   Accessible: <button aria-expanded> toggles on click/keyboard/touch; desktop
   also opens on hover/focus-within. Keeps our look (warm border, brand shadow). */
.mkt .nav-dd { position: relative; display: inline-flex; }
.mkt .nav-dd-btn {
  display: inline-flex; align-items: center; gap: 5px;
  background: none; border: 0; padding: 0; margin: 0;
  font: inherit; color: inherit; line-height: inherit; cursor: pointer;
}
.mkt .nav-dd-btn:hover { opacity: .6; }
.mkt .nav-dd-btn:focus-visible { outline: 2px solid var(--mkt-accent); outline-offset: 4px; border-radius: 3px; }
.mkt .nav-dd-caret { opacity: .7; transition: transform .18s ease; }
.mkt .nav-dd-btn[aria-expanded="true"] .nav-dd-caret { transform: rotate(180deg); }
.mkt .nav-dd-panel {
  position: absolute; top: calc(100% + 12px); left: 0;
  min-width: 286px; padding: 8px;
  background: var(--mkt-panel); border: 1px solid var(--mkt-rule);
  border-radius: 14px; box-shadow: var(--mkt-shadow);
  display: none; z-index: 200;
}
.mkt .nav-dd-panel a {
  display: block; padding: 11px 12px; border-radius: 9px;
  text-decoration: none; color: var(--mkt-ink); font-size: 14px; font-weight: 600;
}
.mkt .nav-dd-panel a span {
  display: block; margin-top: 2px; font-size: 12px; font-weight: 400; color: var(--mkt-muted);
}
.mkt .nav-dd-panel a:hover { background: var(--mkt-panel-soft); opacity: 1; }
.mkt .nav-dd-panel a[aria-current="page"] { color: var(--mkt-accent); }
.mkt .nav-dd-panel a:focus-visible { outline: 2px solid var(--mkt-accent); outline-offset: -2px; }
.mkt .nav-dd-sep { height: 1px; background: var(--mkt-rule); margin: 6px; }
.mkt .nav-dd-cta { color: var(--mkt-accent) !important; }
.mkt .nav-dd-btn[aria-expanded="true"] + .nav-dd-panel { display: block; }
@media (hover: hover) and (min-width: 961px) {
  .mkt .nav-dd:hover .nav-dd-panel,
  .mkt .nav-dd:focus-within .nav-dd-panel { display: block; }
  /* Invisible bridge across the 12px gap between the trigger and the panel so
     moving the cursor down into the menu doesn't drop :hover and close it. */
  .mkt .nav-dd-panel::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
}
/* Collapsed mobile menu: dropdown nests inline, no floating panel. */
@media (max-width: 960px) {
  .mkt .nav-dd { display: block; }
  .mkt .nav.is-open .nav-dd-btn { padding: 10px 0; font-size: 16px; font-weight: 500; width: 100%; justify-content: space-between; }
  .mkt .nav-dd-panel {
    position: static; min-width: 0; padding: 0 0 6px 12px;
    border: none; border-radius: 0; box-shadow: none;
  }
  .mkt .nav-dd-panel a { padding: 9px 0; }
}