/* Shared extras for secondary marketing pages (features, use cases, contact).
   Layers on top of homepage.css and uses its --mkt-* design tokens. */

.hp-nav-link.mkt-active {
  color: var(--mkt-blue);
}

/* .hp-nav is a fixed, single-row, fixed-height bar (see homepage.css), so it
   has no room to wrap extra links the way a normal flex row would. On a
   phone the full set (secondary nav links + Log in + Start Free Trial)
   doesn't fit and pushes the whole page wider than the screen. These pages
   already repeat every nav link in the footer, so on phones we just show
   the two links every other secondary page shows in its nav (Log in and
   Start Free Trial) and let the footer carry the rest. */
@media (max-width: 480px) {
  .mkt-nav-extra {
    display: none;
  }
}

/* Outline button on a dark section: the shared .btn-outline is white on
   white for light sections, so it needs its own look here instead of an
   inline style override per page. */
.hp-dark .btn-outline {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #ffffff;
}

.hp-dark .btn-outline:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.6);
}

/* Groups a primary CTA button with the trust microcopy that belongs to it,
   so the line sits directly under the button it is actually about instead
   of floating underneath an entire row that may hold other buttons too. */
.mkt-cta-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

/* The primary button's row also holds its own microcopy underneath it, which
   makes that column taller than a lone secondary button beside it. Without
   this, .hp-cta-row's default center alignment centers the secondary button
   against the whole stack's height instead of lining up with the primary
   button itself. */
.mkt-cta-row-top {
  align-items: flex-start;
}

/* .hp-cta-row switches to a centered column on phones (homepage.css), but
   loads before this file so the flex-start override above would otherwise
   win and leave the stack pinned to the left edge instead of centered. */
@media (max-width: 640px) {
  .mkt-cta-row-top {
    align-items: center;
  }
}

/* On desktop, .hp-cta-row's justify-content: center treats the stack and the
   secondary button as one cluster and centers that cluster as a whole. Since
   the secondary button is wider than the stack, this drags the primary CTA
   (and its trust line) off to the left of the section's actual center. A
   3-column grid keeps the primary CTA pinned to the true center column while
   the secondary button hangs in its own lane beside it, so it never pulls
   the primary CTA's centering off balance regardless of its own width. */
@media (min-width: 641px) {
  .mkt-cta-row-top {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: start;
    gap: 0 16px;
    max-width: 820px;
    margin: 0 auto;
  }

  .mkt-cta-row-top .mkt-cta-stack {
    grid-column: 2;
  }

  .mkt-cta-row-top > .btn-outline {
    grid-column: 3;
    justify-self: start;
  }
}

.mkt-cta-microcopy {
  font-size: 13px;
  color: var(--mkt-faint);
}

/* ---------- Feature block grid ---------- */

.mkt-block-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  max-width: 1020px;
  margin: 0 auto;
}

.mkt-block-card {
  background: #ffffff;
  border: 1px solid var(--mkt-border);
  border-radius: 14px;
  padding: 22px 20px;
  text-align: left;
}

.mkt-block-card svg,
.mkt-block-card i {
  width: 20px;
  height: 20px;
  stroke-width: 1.75;
  color: var(--mkt-blue);
  margin-bottom: 14px;
  display: block;
}

.mkt-block-name {
  font-family: var(--mkt-heading);
  font-size: 15px;
  font-weight: 600;
  color: var(--mkt-ink);
  margin-bottom: 6px;
}

.mkt-block-card p {
  font-size: 13px;
  color: var(--mkt-muted);
  line-height: 1.6;
  margin: 0;
}

/* ---------- Split layout (logic demo) ---------- */

.mkt-split {
  max-width: 1000px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}

.mkt-split-text p {
  font-size: 15px;
  color: var(--mkt-body);
  line-height: 1.8;
  margin: 0 0 16px;
}

.mkt-split-text p:last-child { margin-bottom: 0; }

.mkt-logic-demo {
  background: #141414;
  border-radius: 12px;
  padding: 26px;
  font-family: 'JetBrains Mono', monospace;
}

.mkt-logic-step {
  color: white;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 16px;
}

.mkt-logic-branch {
  font-size: 13px;
  color: #9a9a9a;
  padding: 11px 0;
  border-top: 1px solid #2c2c2c;
  display: flex;
  align-items: center;
  gap: 10px;
}

.mkt-logic-tag {
  background: #262626;
  color: #d4d4d4;
  padding: 3px 9px;
  border-radius: 5px;
  font-size: 12px;
}

.mkt-logic-tag.yes {
  background: rgba(37, 99, 235, 0.25);
  color: #7fadfd;
}

/* ---------- Integration pills ---------- */

.mkt-logo-row {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  max-width: 900px;
  margin: 0 auto;
}

.mkt-integration-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #ffffff;
  border: 1px solid var(--mkt-border);
  border-radius: 8px;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 500;
  color: var(--mkt-ink);
}

.mkt-integration-pill svg,
.mkt-integration-pill i {
  width: 16px;
  height: 16px;
  stroke-width: 1.75;
  color: var(--mkt-blue);
}

.mkt-integration-note {
  max-width: 620px;
  margin: 32px auto 0;
  text-align: center;
  font-size: 14px;
  color: var(--mkt-muted);
  line-height: 1.7;
}

/* ---------- Contact page ---------- */

.mkt-contact-link {
  font-family: var(--mkt-heading);
  font-size: 18px;
  font-weight: 600;
  color: var(--mkt-blue);
  text-decoration: none;
}

.mkt-contact-link:hover {
  text-decoration: underline;
}

/* ---------- Use-case vertical cards ---------- */

.mkt-usecase-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  max-width: 1000px;
  margin: 0 auto;
}

.mkt-usecase-card {
  background: #ffffff;
  border: 1px solid var(--mkt-border);
  border-radius: 16px;
  padding: 32px;
}

.mkt-usecase-icon {
  width: 40px;
  height: 40px;
  background: var(--mkt-blue-light);
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--mkt-blue);
  margin-bottom: 18px;
}

.mkt-usecase-icon svg,
.mkt-usecase-icon i {
  width: 20px;
  height: 20px;
  stroke-width: 1.75;
}

.mkt-usecase-title {
  font-family: var(--mkt-heading);
  font-size: 18px;
  font-weight: 600;
  color: var(--mkt-ink);
  margin-bottom: 10px;
  letter-spacing: -0.01em;
}

.mkt-usecase-pain {
  font-size: 13px;
  font-weight: 500;
  color: #b3411f;
  margin-bottom: 10px;
}

.mkt-usecase-body {
  font-size: 14px;
  color: var(--mkt-muted);
  line-height: 1.7;
  margin: 0 0 16px;
}

.mkt-usecase-template {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
  color: var(--mkt-blue);
  background: var(--mkt-blue-light);
  padding: 6px 12px;
  border-radius: 6px;
}

.mkt-usecase-template svg,
.mkt-usecase-template i {
  width: 13px;
  height: 13px;
  stroke-width: 2;
}

@media (max-width: 900px) {
  .mkt-block-grid { grid-template-columns: repeat(2, 1fr); }
  .mkt-split { grid-template-columns: 1fr; gap: 28px; }
  .mkt-usecase-grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .mkt-block-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .mkt-block-card { padding: 16px 14px; }
}