/* ============================================================
   Marketing pages — public landing (home/marketing) + pricing.
   Token-driven, vanilla CSS. Shared visual bits (.hero-glow, .pill,
   .surface, .icon-tile, .accent-txt, .subtle, .btn-accent) live in
   components.css; this file owns the marketing page LAYOUT.

   Responsive: intrinsic where possible (auto-fit grid, flex-wrap);
   otherwise the app's single breakpoint, @media (max-width: 48rem),
   desktop-first (narrow overrides the default).
   ============================================================ */

/* ---------- Shared marketing pieces ---------- */
/* Section heading: 4xl on desktop, 3xl on narrow (was text-3xl md:text-4xl). */
.marketing-heading {
  font-size: var(--txt-4xl);
  font-weight: var(--weight-black);
  letter-spacing: var(--tracking-tight);
}

/* Accent pill button (full-width on narrow, auto on wide). */
.marketing-cta {
  display: inline-block;
  width: 100%;
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-full);
  font-size: var(--txt-base);
  font-weight: var(--weight-bold);
  white-space: nowrap;
  text-align: center;
}
.marketing-cta:focus { outline: none; }
.marketing-cta--lg { padding: var(--space-3-5) var(--space-8); }

.marketing-trust {
  margin-top: var(--space-4);
  font-size: var(--txt-sm);
}

/* ---------- Hero ---------- */
.marketing-hero {
  position: relative;
  overflow: hidden;
  padding: var(--space-24) var(--space-5) var(--space-12);
  text-align: center;
}
.marketing-hero__inner {
  position: relative;
  z-index: 1;
  margin-inline: auto;
  max-width: 48rem;
}
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--txt-xs);
  font-weight: var(--weight-bold);
}
.hero-title {
  font-size: var(--txt-6xl);
  font-weight: var(--weight-black);
  line-height: 1.1;
  letter-spacing: var(--tracking-tight);
}
.hero-subtitle {
  margin: var(--space-5) auto 0;
  max-width: 42rem;
  font-size: var(--txt-xl);
}
.hero-actions {
  margin-top: var(--space-8);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
}
.hero-actions .marketing-cta { width: auto; }
.hero-preview {
  position: relative;
  z-index: 1;
  margin: var(--space-12) auto 0;
  max-width: 48rem;
}
.hero-preview img {
  border-radius: var(--radius-3xl);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-xl);
}

/* ---------- Currencies strip ---------- */
.currency-strip {
  padding: var(--space-8) var(--space-5);
}
.currency-strip__list {
  margin-inline: auto;
  max-width: 48rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-3) var(--space-8);
  font-size: var(--txt-sm);
  font-weight: var(--weight-bold);
}

/* ---------- Features ---------- */
.features {
  padding: var(--space-16) var(--space-5);
}
.features__container {
  margin-inline: auto;
  max-width: 72rem;
}
.features__header {
  margin-inline: auto;
  max-width: 42rem;
  text-align: center;
}
.features__subheading {
  margin-top: var(--space-3);
  font-size: var(--txt-lg);
}
.features__grid {
  margin-top: var(--space-12);
  display: grid;
  gap: var(--space-5);
  /* Intrinsic 1 -> 2 -> 3 columns; container max-width caps it at 3. */
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
}
.feature-card {
  border-radius: var(--radius-3xl);
  padding: var(--space-6);
}
.feature-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--space-12);
  height: var(--space-12);
  border-radius: var(--radius-2xl);
  font-size: var(--txt-lg);
}
.feature-card__title {
  margin-top: var(--space-4);
  font-size: var(--txt-lg);
  font-weight: var(--weight-black);
}
.feature-card__body {
  margin-top: var(--space-2);
  font-size: var(--txt-sm);
}

/* ---------- Independent / self-funded ---------- */
.independent {
  padding: var(--space-12) var(--space-5);
}
.independent__card {
  margin-inline: auto;
  max-width: 56rem;
  padding: var(--space-12);
  border-radius: var(--radius-3xl);
  text-align: center;
  background: var(--accent-soft);
}
.independent__icon { font-size: var(--txt-2xl); }
.independent__title {
  margin-top: var(--space-3);
  font-size: var(--txt-3xl);
  font-weight: var(--weight-black);
  letter-spacing: var(--tracking-tight);
}
.independent__body {
  margin: var(--space-4) auto 0;
  max-width: 42rem;
  font-size: var(--txt-lg);
  color: var(--txt);
}

/* ---------- Closing CTA ---------- */
.closing-cta {
  padding: var(--space-16) var(--space-5);
  text-align: center;
}
.closing-cta__inner {
  margin-inline: auto;
  max-width: 42rem;
}
.closing-cta__actions {
  margin-top: var(--space-7);
  display: flex;
  justify-content: center;
}
.closing-cta__actions .marketing-cta { width: auto; }

/* ---------- Pricing page ---------- */
.pricing {
  padding: var(--space-16) var(--space-5) var(--space-4);
}
.pricing__intro {
  margin-inline: auto;
  max-width: 28rem;
  text-align: center;
}
.pricing__subheading {
  margin-top: var(--space-3);
  font-size: var(--txt-lg);
}
.pricing-card {
  margin-top: var(--space-8);
  padding: var(--space-8);
  border-radius: var(--radius-3xl);
  text-align: left;
  box-shadow: var(--shadow-xl);
}
.pricing-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.pricing-card__name {
  font-size: var(--txt-lg);
  font-weight: var(--weight-black);
}
.pricing-card__badge {
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--txt-xs);
  font-weight: var(--weight-bold);
}
.pricing-card__price {
  margin-top: var(--space-4);
  display: flex;
  align-items: baseline;
  gap: var(--space-1);
}
.pricing-card__amount {
  font-size: var(--txt-5xl);
  font-weight: var(--weight-black);
}
.pricing-card__features {
  margin-top: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  font-size: var(--txt-sm);
  font-weight: var(--weight-medium);
}
.pricing-card__feature {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.pricing-card .marketing-cta { margin-top: var(--space-8); }
.pricing-card__trust {
  margin-top: var(--space-3);
  text-align: center;
  font-size: var(--txt-xs);
}

/* ---------- Pricing FAQ ---------- */
.pricing-faq {
  padding: var(--space-12) var(--space-5);
}
.pricing-faq__inner {
  margin-inline: auto;
  max-width: 28rem;
}
.pricing-faq__heading {
  font-size: var(--txt-2xl);
  font-weight: var(--weight-black);
  letter-spacing: var(--tracking-tight);
}
.pricing-faq__list {
  margin-top: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.faq-card {
  border-radius: var(--radius-3xl);
  padding: var(--space-6);
}
.faq-card__question { font-weight: var(--weight-black); }
.faq-card__answer {
  margin-top: var(--space-2);
  font-size: var(--txt-sm);
}

/* ---------- Narrow: single breakpoint overrides ---------- */
@media (max-width: 48rem) {
  .marketing-hero { padding-top: var(--space-16); }
  .hero-title { font-size: var(--txt-4xl); }
  .hero-subtitle { font-size: var(--txt-lg); }
  .hero-actions { flex-direction: column; }
  .hero-actions .marketing-cta,
  .closing-cta__actions .marketing-cta { width: 100%; }
  .marketing-heading { font-size: var(--txt-3xl); }
  .independent__card { padding: var(--space-8); }
  .independent__title { font-size: var(--txt-2xl); }
  .pricing { padding-top: var(--space-12); }
}

/* ============================================================
   Marketing layout shell (nav / flash / footer) — deferred from
   the initial marketing PR, migrated in the Tailwind teardown.
   ============================================================ */
.mkt-header {
  position: sticky;
  top: 0;
  z-index: 30;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--page-bg) 85%, transparent);
  backdrop-filter: blur(8px);
}
.mkt-nav {
  margin-inline: auto;
  max-width: 64rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3-5) var(--space-4);
}
.mkt-nav__brand {
  display: flex;
  align-items: center;
}
.mkt-nav__actions {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}
@media (min-width: 40rem) {
  .mkt-nav__actions { gap: var(--space-2); }
}
.mkt-nav__link {
  border-radius: var(--radius-full);
  font-weight: var(--weight-bold);
  font-size: var(--txt-sm);
  padding: var(--space-2) var(--space-3);
  white-space: nowrap;
}
.mkt-nav__link:hover { opacity: 0.8; }
.mkt-nav__link--desktop { display: none; }
@media (min-width: 40rem) {
  .mkt-nav__link--desktop { display: block; }
}
.mkt-main {
  margin-inline: auto;
  max-width: 64rem;
  padding-inline: var(--space-2);
}
.mkt-footer {
  margin-top: var(--space-12);
  border-top: 1px solid var(--border);
  padding: var(--space-8) var(--space-5);
  text-align: center;
  font-size: var(--txt-sm);
}
.mkt-footer__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  column-gap: var(--space-5);
  row-gap: var(--space-2);
  font-weight: var(--weight-medium);
}
.mkt-footer__copy { margin-top: var(--space-4); }