/* Friends & Robots — Static Ad Factory pricing page.
   Loaded after static-ad-factory.css, which supplies the shared factory
   pieces (type ramp, eyebrows, CTA buttons, hero wash, sign-in dialog,
   footer), and static-ad-factory-plans.css, which supplies the plan and
   pack cards the workspace shares. This sheet holds only the pricing
   page's own sections. */

/* ── Head ───────────────────────────────────────────────────── */
/* Sits under the fixed 64px header; the shared hero wash paints the
   same brand gradients behind it as the landing's hero. */
.saf-price-hero {
  position: relative;
  overflow: hidden;
  padding: 80px 0 24px;
}
/* On phones the shared header is two rows (~93px tall); the crumbs
   need the extra clearance to stay out from under it. */
@media (max-width: 600px) {
  .saf-price-hero { padding-top: 112px; }
}
/* Breadcrumb: top-left wayfinding — the product name links back to the
   landing, the current page sits unlinked. Its container mirrors the
   header's .nav-inner (1200px, same fluid side padding) so the crumb's
   left edge lines up with the brandmark above it. position: relative
   lifts it above the hero wash, like the hero copy. */
.saf-price-crumbs {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  max-width: 1200px;
  margin: 0 auto;
  padding-inline: clamp(20px, 5vw, 64px);
  font-size: 13px;
  font-weight: var(--fw-semibold);
  color: var(--saf-muted);
}
.saf-price-crumbs a { color: var(--saf-ink-soft); text-decoration: none; }
.saf-price-crumbs a:hover { color: var(--saf-brand); }
.saf-price-crumbs svg { flex: none; }
.saf-price-crumbs [aria-current] { color: var(--saf-ink); }
.saf-price-hero-inner {
  position: relative;
  max-width: 56rem;
  margin: 28px auto 0;
  padding: 0 var(--sp-lg);
  text-align: center;
}
.saf-price-hero-sub {
  max-width: 42rem;
  margin: 20px auto 0;
  font-size: 16px;
  line-height: var(--lh-normal);
  color: var(--saf-ink-soft);
}

@media (min-width: 640px) {
  .saf-price-hero { padding: 88px 0 32px; }
  .saf-price-hero-inner { margin-top: 36px; }
}

/* ── Plans and packs ────────────────────────────────────────── */
/* The section head; the grid, cards and included strip beneath it come
   from static-ad-factory-plans.css. */
.saf-price-plans-inner {
  max-width: 72rem;
  margin: 0 auto;
  padding: 48px var(--sp-lg) 64px;
}
.saf-price-plans-head {
  max-width: 42rem;
  margin: 0 auto;
  text-align: center;
}
.saf-price-plans-head .saf-h2 { margin-top: var(--sp-md); }
.saf-price-plans-sub {
  margin: var(--sp-md) 0 0;
  font-size: 14px;
  line-height: var(--lh-relaxed);
  color: var(--saf-ink-soft);
}

/* ── FAQ ────────────────────────────────────────────────────── */
/* Layout and disclosure styling come from the shared .saf-faq rules;
   this only adds the rule separating it from the plans above. */
.saf-price-faq { border-top: 1px solid var(--saf-border); }

/* ── Closing: the free batch ────────────────────────────────── */
.saf-price-closing {
  border-top: 1px solid var(--saf-border);
  background: var(--saf-surface);
}
.saf-price-closing-inner {
  max-width: 72rem;
  margin: 0 auto;
  padding: 56px var(--sp-lg);
}
.saf-price-closing-card {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: var(--sp-2xl);
  border: 1px solid var(--saf-border);
  border-radius: var(--radius-2xl);
  background: var(--saf-bg);
  padding: var(--sp-xl);
  box-shadow: 0 1px 2px rgba(18, 22, 29, 0.05);
}
.saf-price-closing-card .saf-h2 { margin-top: var(--sp-md); }
.saf-price-closing-body {
  margin: var(--sp-md) 0 0;
  font-size: 14px;
  line-height: var(--lh-relaxed);
  color: var(--saf-ink-soft);
}
/* The CTA is an anchor; inline-flex sizes it to its label instead of
   the grid track. */
.saf-price-closing-cta { display: inline-flex; justify-self: start; }

@media (min-width: 640px) {
  .saf-price-closing-inner { padding: 80px var(--sp-lg); }
  .saf-price-closing-card { padding: 40px; }
  .saf-price-closing-body { font-size: 16px; }
}
@media (min-width: 1024px) {
  .saf-price-closing-card { grid-template-columns: 1.4fr auto; gap: 48px; padding: 56px; }
}