/* ============================================================
   BLOOM — LANDING PAGE STYLES
   Hand-written replacement for the Tailwind CDN build.
   Reproduces the redesigned bloom.html exactly (palette
   #6c47ff / #12112e / #f0f0fc), self-contained apart from
   fonts.css. Breakpoints match Tailwind: sm=640px, md=768px.
   ============================================================ */

@import url('fonts.css');

:root {
  --bh-bg: #f0f0fc;
  --bh-dark: #12112e;
  --bh-purple: #6c47ff;

  --bh-white: #ffffff;
  --bh-gray-700: #374151;
  --bh-gray-600: #4b5563;
  --bh-gray-500: #6b7280;
  --bh-gray-400: #9ca3af;
  --bh-gray-200: #e5e7eb;
  --bh-gray-100: #f3f4f6;

  --bh-purple-50: #faf5ff;
  --bh-purple-100: #f3e8ff;
  --bh-purple-200: #e9d5ff;
  --bh-purple-300: #d8b4fe;

  --bh-gradient-text: linear-gradient(90deg, #38bdf8, #6c47ff 55%, #a855f7);
  --bh-gradient-bg: linear-gradient(135deg, #6c47ff, #8b5cf6);
  --bh-glow: 0 8px 32px rgba(108, 71, 255, 0.22);
  --bh-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --bh-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }

.bloom-home {
  margin: 0;
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--bh-bg);
  color: var(--bh-dark);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* :where() keeps these element resets at zero specificity, the way Tailwind's
   Preflight did. Written plainly (.bloom-home a { … }) they score (0,1,1) and
   silently outrank every single-class rule below. */
:where(.bloom-home) :where(img) { display: block; max-width: 100%; }
:where(.bloom-home) :where(a) { color: inherit; text-decoration: none; }
:where(.bloom-home) :where(ul) { list-style: none; margin: 0; padding: 0; }
:where(.bloom-home) :where(h1, h2, h3, p) { margin: 0; }
:where(.bloom-home) :where(svg) { display: block; }
:where(.bloom-home) :where(button) { font-family: inherit; }

/* ---------- Shared helpers ---------- */
.bh-gradient-text {
  background: var(--bh-gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.bh-gradient-bg { background: var(--bh-gradient-bg); }
.bh-glow { box-shadow: var(--bh-glow); }

.bh-card-hover { transition: transform 0.2s ease, box-shadow 0.2s ease; }
.bh-card-hover:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(108, 71, 255, 0.1);
}

.bh-noscroll { -ms-overflow-style: none; scrollbar-width: none; }
.bh-noscroll::-webkit-scrollbar { display: none; }

/* Shared pill buttons */
.bh-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  background: var(--bh-gradient-bg);
  color: #fff;
  font-weight: 600;
  border-radius: 9999px;
  box-shadow: var(--bh-glow);
  transition: opacity 0.2s ease;
}
.bh-btn-primary:hover { opacity: 0.9; }

.bh-btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--bh-purple);
  color: var(--bh-purple);
  font-weight: 600;
  border-radius: 9999px;
  transition: background-color 0.2s ease;
}
.bh-btn-outline:hover { background: var(--bh-purple-50); }

/* ============================================================
   NAVIGATION
   ============================================================ */
.bh-header {
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  background: rgba(255, 255, 255, 0.7);
  border-bottom: 1px solid var(--bh-purple-100);
}

.bh-nav {
  max-width: 72rem;
  margin: 0 auto;
  padding: 0 1.25rem;
  height: 4rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.bh-logo {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  flex-shrink: 0;
}
.bh-logo-img { width: 2rem; height: 2rem; border-radius: 0.5rem; }
.bh-logo-text { font-weight: 700; font-size: 1.125rem; color: var(--bh-purple); }

.bh-navlinks {
  display: none;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.875rem;
  font-weight: 500;
}
.bh-navlinks a {
  display: block;
  padding: 0.5rem 1rem;
  border-radius: 9999px;
  color: var(--bh-gray-600);
  transition: color 0.15s ease, background-color 0.15s ease;
}
.bh-navlinks a:hover { color: var(--bh-purple); background: var(--bh-purple-50); }
.bh-navlinks a.is-active { color: var(--bh-purple); background: var(--bh-purple-50); }

.bh-nav-actions { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; }

.bh-nav-cta {
  font-size: 0.875rem;
  padding: 0.625rem 1.25rem;
}

.bh-menu-toggle {
  display: inline-flex;
  padding: 0.5rem;
  margin-right: -0.5rem;
  color: var(--bh-purple);
  background: none;
  border: none;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.bh-menu-toggle:hover { background: var(--bh-purple-50); }
.bh-menu-toggle svg { width: 1.5rem; height: 1.5rem; }
.bh-hidden { display: none; }

/* Mobile nav panel */
.bh-mobile-nav {
  border-top: 1px solid var(--bh-purple-100);
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.bh-mobile-nav ul {
  max-width: 72rem;
  margin: 0 auto;
  padding: 0.75rem 1.25rem;
  display: flex;
  flex-direction: column;
  font-size: 0.875rem;
  font-weight: 500;
}
.bh-mobile-nav a {
  display: block;
  padding: 0.75rem;
  border-radius: 0.5rem;
  color: var(--bh-gray-700);
  transition: color 0.15s ease, background-color 0.15s ease;
}
.bh-mobile-nav a:hover { color: var(--bh-purple); background: var(--bh-purple-50); }
.bh-mobile-nav a.is-active { color: var(--bh-purple); background: var(--bh-purple-50); }
.bh-mobile-nav .bh-mobile-divider {
  margin-top: 0.25rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--bh-purple-100);
}

@media (min-width: 768px) {
  .bh-navlinks { display: flex; }
  .bh-menu-toggle { display: none; }
  .bh-mobile-nav { display: none !important; }
}

/* ============================================================
   HERO
   ============================================================ */
.bh-hero {
  background: var(--bh-bg);
  padding: 5rem 0 3rem;
  overflow: hidden;
}
.bh-hero-inner {
  max-width: 48rem;
  margin: 0 auto;
  padding: 0 1.25rem;
  text-align: center;
}

.bh-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--bh-purple-100);
  color: var(--bh-purple);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.5rem 1rem;
  border-radius: 9999px;
  margin-bottom: 2rem;
}
.bh-badge svg { width: 0.875rem; height: 0.875rem; flex-shrink: 0; }

.bh-hero h1 {
  font-size: 3rem;
  line-height: 1.25;
  font-weight: 800;
  letter-spacing: -0.025em;
  margin-bottom: 1.5rem;
}

.bh-hero-subtext {
  color: var(--bh-gray-600);
  font-size: 1.125rem;
  line-height: 1.625;
  max-width: 42rem;
  margin: 0 auto 2.5rem;
}

.bh-hero-ctas {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-bottom: 3.5rem;
}
.bh-hero-ctas .bh-btn-primary { padding: 0.875rem 1.75rem; font-size: 1rem; }
.bh-hero-ctas .bh-btn-outline { padding: 0.75rem 1.75rem; font-size: 1rem; }

/* Screenshot strip */
.bh-shots {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  padding: 0 1.5rem 1rem;
  justify-content: flex-start;
}
.bh-shots img {
  width: 180px;
  flex-shrink: 0;
  border-radius: 28px;
  box-shadow: var(--bh-shadow-xl);
}

@media (min-width: 640px) {
  .bh-hero h1 { font-size: 3.75rem; }
  .bh-hero-ctas { flex-direction: row; }
}
@media (min-width: 768px) {
  .bh-shots { justify-content: center; }
}

/* ============================================================
   SECTIONS (shared)
   ============================================================ */
.bh-section { padding: 6rem 0; }
.bh-section--white { background: rgba(255, 255, 255, 0.6); }
.bh-section--bg { background: var(--bh-bg); }

.bh-container { max-width: 72rem; margin: 0 auto; padding: 0 1.25rem; }
.bh-container--narrow { max-width: 56rem; }
.bh-container--tight { max-width: 42rem; }

.bh-section-head { text-align: center; margin-bottom: 3.5rem; }
.bh-section-head h2 {
  font-size: 2.25rem;
  font-weight: 800;
  letter-spacing: -0.025em;
  margin-bottom: 1rem;
}
.bh-section-head p {
  color: var(--bh-gray-500);
  font-size: 1.125rem;
  max-width: 36rem;
  margin: 0 auto;
}

/* Reusable check list (feature bullets) */
.bh-checks { display: flex; flex-direction: column; gap: 0.625rem; }
.bh-checks li {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  font-size: 0.875rem;
  color: var(--bh-gray-700);
}
.bh-checks svg {
  width: 1rem;
  height: 1rem;
  margin-top: 0.125rem;
  flex-shrink: 0;
  color: var(--bh-purple);
}

/* ============================================================
   LIFECYCLE CARDS
   ============================================================ */
.bh-cards-3 { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }

.bh-card {
  background: #fff;
  border: 1px solid var(--bh-gray-100);
  border-radius: 1rem;
  padding: 1.75rem;
  box-shadow: var(--bh-shadow-sm);
}
.bh-card--featured {
  border: 2px solid var(--bh-purple-200);
  position: relative;
  overflow: hidden;
}
.bh-card-accent {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 0.25rem;
  background: var(--bh-gradient-bg);
  /* No own radius — the card's overflow:hidden clips the strip to the
     card's rounded corners, so the ends sit flush (a 1rem radius here
     over-rounds a 4px strip and leaves gaps at the corners). */
  border-radius: 0;
}
.bh-card h3 { font-size: 1.25rem; font-weight: 700; margin-bottom: 0.75rem; }
.bh-card > p {
  color: var(--bh-gray-500);
  font-size: 0.875rem;
  line-height: 1.625;
  margin-bottom: 1.25rem;
}

.bh-icon-box {
  width: 3rem;
  height: 3rem;
  border-radius: 0.75rem;
  background: var(--bh-gradient-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.25rem;
}
.bh-icon-box svg { width: 1.5rem; height: 1.5rem; color: #fff; }

@media (min-width: 768px) {
  .bh-cards-3 { grid-template-columns: repeat(3, 1fr); }
}

/* ============================================================
   PRIVACY BENTO
   ============================================================ */
.bh-privacy-head {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  margin-bottom: 2.5rem;
}
.bh-privacy-head h2 {
  font-size: 2.25rem;
  font-weight: 800;
  letter-spacing: -0.025em;
  margin-bottom: 0.75rem;
}
.bh-privacy-head p { color: var(--bh-gray-500); font-size: 1rem; max-width: 28rem; }
.bh-privacy-head .bh-btn-outline {
  flex-shrink: 0;
  font-size: 0.875rem;
  padding: 0.625rem 1.25rem;
  align-self: flex-start;
}

.bh-bento { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }

.bh-bento-dark {
  background: var(--bh-dark);
  color: #fff;
  border-radius: 1rem;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 380px;
}
.bh-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(147, 51, 234, 0.3);
  color: var(--bh-purple-300);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.375rem 0.75rem;
  border-radius: 9999px;
  margin-bottom: 1.5rem;
}
.bh-chip svg { width: 0.75rem; height: 0.75rem; }
.bh-bento-dark h3 {
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.375;
  margin-bottom: 1rem;
}
.bh-bento-dark p { color: var(--bh-gray-400); font-size: 0.875rem; line-height: 1.625; }

.bh-mini-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.bh-mini { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; text-align: center; }
.bh-mini-icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.75rem;
  background: rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
}
.bh-mini-icon svg { width: 1.25rem; height: 1.25rem; color: var(--bh-purple-300); }
.bh-mini span {
  font-size: 0.75rem;
  color: var(--bh-gray-400);
  font-weight: 500;
  line-height: 1.25;
}

.bh-bento-card {
  background: #fff;
  border: 1px solid var(--bh-gray-100);
  border-radius: 1rem;
  padding: 1.75rem;
  box-shadow: var(--bh-shadow-sm);
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
}
.bh-bento-card-icon {
  width: 3rem;
  height: 3rem;
  border-radius: 0.75rem;
  background: var(--bh-purple-50);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.bh-bento-card-icon svg { width: 1.5rem; height: 1.5rem; color: var(--bh-purple); }
.bh-bento-card h3 { font-size: 1.125rem; font-weight: 700; margin-bottom: 0.5rem; }
.bh-bento-card p { color: var(--bh-gray-500); font-size: 0.875rem; line-height: 1.625; }

.bh-subgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }

.bh-small-card {
  background: #fff;
  border: 1px solid var(--bh-gray-100);
  border-radius: 1rem;
  padding: 1.5rem;
  box-shadow: var(--bh-shadow-sm);
}
.bh-small-icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
}
.bh-small-icon svg { width: 1.25rem; height: 1.25rem; }
.bh-small-icon--red { background: #fef2f2; }
.bh-small-icon--red svg { color: #ef4444; }
.bh-small-icon--green { background: #f0fdf4; }
.bh-small-icon--green svg { color: #16a34a; }
.bh-small-card h3 { font-size: 1rem; font-weight: 700; margin-bottom: 0.5rem; }
.bh-small-card p { color: var(--bh-gray-500); font-size: 0.75rem; line-height: 1.625; }

@media (min-width: 640px) {
  .bh-privacy-head {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
  }
  .bh-privacy-head .bh-btn-outline { align-self: auto; }
}
@media (min-width: 768px) {
  .bh-bento { grid-template-columns: repeat(2, 1fr); }
  .bh-bento-dark { grid-row: span 2; }
}

/* ============================================================
   PRICING
   ============================================================ */
.bh-pricing-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  align-items: start;
}

.bh-price-card {
  background: #fff;
  border: 1px solid var(--bh-gray-200);
  border-radius: 1rem;
  padding: 2rem;
  box-shadow: var(--bh-shadow-sm);
}
.bh-price-card--dark {
  background: var(--bh-dark);
  color: #fff;
  border: none;
  box-shadow: var(--bh-shadow-xl);
  position: relative;
  overflow: hidden;
}

.bh-price-head { margin-bottom: 1.5rem; }
.bh-price-eyebrow {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--bh-gray-400);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.5rem;
}
.bh-price-card--dark .bh-price-eyebrow { color: var(--bh-purple-300); }

.bh-price-amount { display: flex; align-items: flex-end; gap: 0.25rem; }
.bh-price-amount .bh-price-num { font-size: 3rem; font-weight: 800; line-height: 1; }
.bh-price-amount .bh-price-per { color: var(--bh-gray-400); padding-bottom: 0.5rem; font-size: 0.875rem; }
.bh-price-sub { font-size: 0.875rem; color: var(--bh-gray-400); margin-top: 0.25rem; }
.bh-price-sub .bh-price-annual { color: var(--bh-purple-300); font-weight: 600; }
.bh-price-sub .bh-price-save { color: #4ade80; font-weight: 600; }

.bh-popular {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  background: var(--bh-gradient-bg);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
}

.bh-price-features { display: flex; flex-direction: column; gap: 0.875rem; margin-bottom: 2rem; }
.bh-price-features li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.875rem;
  color: var(--bh-gray-700);
}
.bh-price-features svg { width: 1rem; height: 1rem; flex-shrink: 0; color: var(--bh-purple); }
.bh-price-card--dark .bh-price-features li { color: #e5e7eb; }
.bh-price-card--dark .bh-price-features svg { color: #a78bfa; }

.bh-price-btn {
  display: block;
  width: 100%;
  text-align: center;
  font-weight: 600;
  font-size: 0.875rem;
  padding: 0.75rem;
  border-radius: 0.75rem;
}
.bh-price-btn--outline {
  border: 2px solid var(--bh-purple);
  color: var(--bh-purple);
  transition: background-color 0.2s ease;
}
.bh-price-btn--outline:hover { background: var(--bh-purple-50); }
.bh-price-btn--fill {
  background: var(--bh-gradient-bg);
  color: #fff;
  box-shadow: var(--bh-glow);
  transition: opacity 0.2s ease;
}
.bh-price-btn--fill:hover { opacity: 0.9; }

@media (min-width: 768px) {
  .bh-pricing-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   CTA BANNER
   ============================================================ */
.bh-cta-band { text-align: center; }
.bh-cta-band h2 {
  font-size: 3rem;
  font-weight: 800;
  letter-spacing: -0.025em;
  margin-bottom: 1rem;
}
.bh-cta-band p { color: var(--bh-gray-500); font-size: 1.125rem; margin-bottom: 2.5rem; }
.bh-store-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  background: var(--bh-gradient-bg);
  color: #fff;
  font-weight: 600;
  font-size: 1rem;
  padding: 1rem 2rem;
  border-radius: 1rem;
  box-shadow: var(--bh-glow);
  transition: opacity 0.2s ease;
}
.bh-store-btn:hover { opacity: 0.9; }
.bh-store-btn svg { width: 1.5rem; height: 1.5rem; }

/* ============================================================
   FOOTER
   ============================================================ */
.bh-footer {
  border-top: 1px solid var(--bh-gray-200);
  background: rgba(255, 255, 255, 0.7);
  padding: 2.5rem 0;
}
.bh-footer-inner {
  max-width: 72rem;
  margin: 0 auto;
  padding: 0 1.25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}
.bh-footer-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.375rem;
  text-align: center;
}
.bh-footer-brand-row { display: flex; align-items: center; gap: 0.625rem; }
.bh-footer-brand-row img { width: 1.75rem; height: 1.75rem; border-radius: 0.5rem; }
.bh-footer-brand-row span { font-weight: 700; color: var(--bh-purple); font-size: 1rem; }
.bh-footer-brand p { font-size: 0.75rem; color: var(--bh-gray-400); }
.bh-footer-brand a { color: var(--bh-gray-500); text-decoration: underline; text-underline-offset: 2px; transition: color 0.15s ease; }
.bh-footer-brand a:hover { color: var(--bh-purple); }

.bh-footer-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem 1.5rem;
  font-size: 0.875rem;
  color: var(--bh-gray-500);
}
.bh-footer-links a { transition: color 0.15s ease; }
.bh-footer-links a:hover { color: var(--bh-purple); }

@media (min-width: 768px) {
  .bh-footer-inner { flex-direction: row; justify-content: space-between; }
  .bh-footer-brand { align-items: flex-start; text-align: left; }
}