/*
 * marketing/-only Blocks (CUBE CSS, same methodology as the main app's
 * components.css) — genuinely new components not needed anywhere in the
 * authenticated app (docs/design-system.md's bar: reuse an existing Block
 * before writing a new one). Everything here references only var(--...)
 * tokens from the synced tokens.css — no raw literals
 * (scripts/check-design-tokens.sh scans marketing/**\/*.css too).
 *
 * NOT a synced file — hand-written for this site, edited directly.
 */

/* ---------- Public header nav (Exception on the shared .site-header) ---------- */

/* .site-header/.brand/.nav-panel/.primary-nav/.user-menu/.theme-toggle-btn
   are all reused byte-identical from the synced components.css — this is
   the same Block, just anchor links instead of authenticated page links, so
   no new header CSS is needed. This one rule only widens the shared
   .site-main cap for the homepage's full-bleed sections below it. */
.site-main[data-page="marketing"] {
  max-width: none;
  padding: 0;
}

.marketing-container {
  max-width: 72rem;
  margin-inline: auto;
  padding-inline: var(--space-5);
}

/* ---------- Hero (Block) ---------- */

.hero {
  padding-block: var(--space-8);
  text-align: center;
}

.hero__kicker {
  display: inline-block;
  color: var(--accent-text);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-block-end: var(--space-3);
}

.hero h1 {
  font-size: var(--text-3xl);
  max-width: 44rem;
  margin-inline: auto;
  margin-block-end: var(--space-4);
}

.hero__subhead {
  max-width: 40rem;
  margin-inline: auto;
  font-size: var(--text-md);
  color: var(--text-secondary);
}

.hero__cta-row {
  justify-content: center;
  margin-block: var(--space-5);
}

.hero__cta-note {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}

/* ---------- Section band (Block) ---------- */

/* Every content section after the hero is wrapped in one of these — a
   consistent padding-block + top-divider rhythm is what actually makes the
   page read as "sectioned," not color variation (see data-band below).
   scroll-margin-top keeps the nav's #how-it-works/#pricing/#faq anchors
   clear of the sticky header, the same reason Connect's jump-nav targets
   need it (components.css's .connect-toc comment). */
.section {
  padding-block: var(--space-9);
  border-top: 1px solid var(--border-subtle);
  background: var(--bg-canvas);
  scroll-margin-top: var(--header-height);
}

/* Reserved for the one section with no --bg-surface-colored children of its
   own (FAQ) — every other section already has surface-colored cards
   (.feature-card/.integration-badge/.plan-card/.panel), so banding those
   sections too would make the cards blend into their own background
   instead of standing out. Not a literal alternating stripe pattern. */
.section[data-band="surface"] {
  background: var(--bg-surface);
}

/* Marketing-only heading scale (Exception on the shared base.css h2) —
   base.css's global `h2 { font-size: var(--text-xl) }` stays untouched for
   the authenticated app (Bots/Runs/Billing/Settings); a marketing page
   needs more visual weight per section, so this reuses the app's own --h1
   size (--text-2xl) scoped to data-page="marketing" instead of introducing
   a new size token. */
.site-main[data-page="marketing"] h2 {
  font-size: var(--text-2xl);
  margin-block-end: var(--space-5);
}

/* ---------- Section heading (Utility, reused across marketing sections) ---------- */

.section-heading {
  text-align: center;
  max-width: 44rem;
  margin-inline: auto;
  margin-block-end: var(--space-6);
}

.section-heading p {
  color: var(--text-secondary);
}

/* Stops a .table-wrapper's own margin-block-end (components.css) from
   stacking with .panel's, when the differentiation comparison table is
   wrapped in a .panel for visual-weight parity with the .plan-card/
   .feature-card sections around it. */
.panel > .table-wrapper:last-child {
  margin-block-end: 0;
}

/* ---------- Feature grid (Block, how-it-works / platform strip) ---------- */

.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-5);
}

.feature-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  text-align: left;
}

.feature-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-md);
  background: var(--status-neutral-subtle-bg);
  color: var(--accent-text);
  margin-block-end: var(--space-3);
}

.feature-card__icon svg {
  width: 22px;
  height: 22px;
}

.feature-card h3 {
  margin-block-end: var(--space-2);
}

.feature-card p {
  margin-block-end: 0;
  font-size: var(--text-xs);
}

/* ---------- Section note (Utility, muted follow-up line under a section) ---------- */

.section-note {
  text-align: center;
  margin-block-start: var(--space-4);
}

/* ---------- Integration badge (Block, platform strip) ---------- */

.integration-list {
  justify-content: center;
}

.integration-badge {
  display: inline-flex;
  align-items: center;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-default);
  background: var(--bg-surface);
  color: var(--text-secondary);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-medium);
}

/* ---------- Final CTA band (Exception on the shared .panel) ---------- */

.cta-band {
  text-align: center;
}

.cta-band p {
  max-width: 36rem;
  margin-inline: auto;
}

/* ---------- Legal placeholder pages (Block, privacy.html / terms.html) ---------- */

.legal-page {
  padding-block: var(--space-8);
}

.legal-page .panel {
  max-width: 40rem;
  margin-inline: auto;
}

/* ---------- Footer (Block) ---------- */

.footer {
  border-top: 1px solid var(--border-subtle);
  padding-block: var(--space-6);
}

.footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: var(--space-5);
  margin-block-end: var(--space-5);
}

.footer__tagline {
  color: var(--text-tertiary);
  font-size: var(--text-xs);
  max-width: 28rem;
  margin-block-start: var(--space-2);
  margin-block-end: 0;
}

.footer__col h4 {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-tertiary);
  margin-block-end: var(--space-2);
}

.footer__col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font-size: var(--text-xs);
}

.footer__bottom {
  padding-block-start: var(--space-4);
  border-top: 1px solid var(--border-subtle);
  color: var(--text-tertiary);
  font-size: var(--text-xs);
}

@media (max-width: 640px) {
  .footer__grid {
    grid-template-columns: 1fr;
  }
}