/* Layout helpers for standalone marketing feature pages (/platform, /database,
   /integrations, /email-deliverability). Complements auto_pilot_landing.css and
   reuses its design tokens. Static-only: no scroll-JS dependency, no gradients.
   All rules scoped under .apl to match the landing page's namespace. */

.apl .mkt-hero {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 140px var(--pad) 64px;
}
.apl .mkt-hero h1 {
  margin: 18px 0 0;
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.apl .mkt-lead {
  margin: 22px 0 0;
  max-width: 680px;
  color: var(--fg-2);
  font-size: 1.15rem;
  line-height: 1.6;
}
.apl .mkt-hero-cta { margin-top: 32px; display: flex; gap: 14px; flex-wrap: wrap; }

.apl .mkt-section {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 64px var(--pad);
  border-top: 1px solid var(--line);
}
.apl .mkt-section h2 {
  font-size: clamp(1.6rem, 3.4vw, 2.4rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 14px 0 0;
}
.apl .mkt-section > p {
  margin: 16px 0 0;
  max-width: 680px;
  color: var(--fg-2);
  line-height: 1.6;
}

/* Two-column split (copy + visual / list) */
.apl .mkt-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}
@media (max-width: 900px) {
  .apl .mkt-split { grid-template-columns: 1fr; gap: 32px; }
  .apl .mkt-hero { padding-top: 120px; }
}

/* Generic feature card grid */
.apl .mkt-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  margin-top: 32px;
}
.apl .mkt-card {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
}
.apl .mkt-card .ic { color: var(--accent-2); font-family: "Geist Mono", monospace; font-size: 0.85rem; }
.apl .mkt-card h3 { margin: 12px 0 6px; font-size: 1.05rem; }
.apl .mkt-card p { margin: 0; color: var(--fg-3); font-size: 0.92rem; line-height: 1.55; }

/* Cross-links to sibling marketing pages (internal link equity) */
.apl .mkt-crosslinks {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 48px var(--pad);
  border-top: 1px solid var(--line);
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
.apl .mkt-crosslinks a {
  border: 1px solid var(--line-2);
  border-radius: 999px;
  padding: 9px 18px;
  color: var(--fg-2);
  text-decoration: none;
  font-size: 0.92rem;
}
.apl .mkt-crosslinks a:hover { color: var(--fg); border-color: var(--fg-3); }

/* Blog index list */
.apl .blog-list { margin-top: 8px; }
.apl .blog-item { display: block; padding: 24px 0; border-bottom: 1px solid var(--line); }
.apl .blog-item:first-child { padding-top: 4px; }
.apl .blog-item h2 { font-size: 1.4rem; line-height: 1.2; letter-spacing: -0.01em; margin: 0 0 8px; }
.apl .blog-item h2 a { color: var(--fg); }
.apl .blog-item h2 a:hover { color: var(--accent-2); }
.apl .blog-item p { margin: 0; max-width: 760px; color: var(--fg-3); line-height: 1.55; }
.apl .blog-empty { margin-top: 28px; color: var(--fg-3); }