/* BGCaddy marketing site — single-page, no build step. */
/* BUILD MARKER: v5-inline-dots — if you don't see this at the top of the
   styles.css served by the site, the server is holding a STALE stylesheet. */

:root {
  --pink: #ff0066;
  --pink-dark: #d40056;
  --bg: #0d0d12;
  --bg-elev: #16161f;
  --bg-elev-2: #1e1e2a;
  --text: #f4f4f6;
  --text-muted: #a1a1b3;
  --border: #2a2a38;
  --radius: 14px;
  --container: 1080px;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 24px; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }

/* Respect users who prefer reduced motion. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .carousel-track { transition: none; }
  .btn:hover, .carousel-arrow:hover { transform: none; }
}

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 24px;
}

/* --- Buttons --- */
.btn {
  display: inline-block;
  padding: 12px 22px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.95rem;
  border: 1px solid transparent;
  transition: transform 0.12s ease, background 0.15s ease, border-color 0.15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--pink); color: #fff; }
.btn-primary:hover { background: var(--pink-dark); }
.btn-ghost { border-color: var(--border); color: var(--text); }
.btn-ghost:hover { border-color: var(--pink); color: #fff; }

/* --- Header --- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  backdrop-filter: blur(10px);
  background: color-mix(in srgb, var(--bg) 80%, transparent);
  border-bottom: 1px solid var(--border);
}
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 14px;
}
.brand-logo { height: 48px; width: auto; display: block; }

/* --- Hero --- */
.hero {
  padding-top: 72px;
  padding-bottom: 48px;
  background:
    radial-gradient(circle at 50% -10%, color-mix(in srgb, var(--pink) 22%, transparent), transparent 55%);
}
.hero-inner { text-align: center; max-width: 760px; margin-inline: auto; }
.hero-title {
  font-size: clamp(2.4rem, 6vw, 4rem);
  line-height: 1.08;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 20px;
}
.hero-title .line { display: block; white-space: nowrap; }
.accent { color: var(--pink); }
.hero-sub {
  font-size: clamp(1.05rem, 2.2vw, 1.3rem);
  color: var(--text-muted);
  margin: 0 auto 32px;
  max-width: 620px;
}
.hero-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.hero-note { color: var(--text-muted); font-size: 0.85rem; margin-top: 18px; }

/* Screenshot frame */
.screenshot-frame {
  margin-top: 56px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-elev);
  padding: 10px;
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.8);
}
.screenshot-placeholder {
  width: 100%;
  height: 100%;
  border-radius: 8px;
  background:
    repeating-linear-gradient(45deg, var(--bg-elev-2), var(--bg-elev-2) 14px, var(--bg-elev) 14px, var(--bg-elev) 28px);
  display: grid;
  place-items: center;
  color: var(--text-muted);
  font-size: 0.95rem;
}

/* --- Carousel --- */
.carousel { position: relative; margin-top: 56px; }
.carousel .screenshot-frame { margin-top: 0; }
.carousel-viewport {
  overflow: hidden;
  border-radius: 8px;
  aspect-ratio: 16 / 9;
}
.carousel-track {
  display: flex;
  height: 100%;
  transition: transform 0.5s ease;
}
.carousel-slide {
  flex: 0 0 100%;
  height: 100%;
}
.carousel-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 8px;
}

.carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg) 70%, transparent);
  backdrop-filter: blur(6px);
  color: var(--text);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.12s ease;
}
.carousel-arrow:hover { border-color: var(--pink); color: #fff; }
.carousel-prev { left: -10px; }
.carousel-next { right: -10px; }

.carousel-dots {
  display: flex;
  gap: 9px;
  justify-content: center;
  margin-top: 20px;
}
.carousel-dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border-radius: 999px;
  border: none;
  background: var(--border);
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}
.carousel-dot:hover { background: var(--text-muted); }
.carousel-dot.is-active { background: var(--pink); transform: scale(1.25); }

@media (max-width: 720px) {
  .carousel-prev { left: 6px; }
  .carousel-next { right: 6px; }
}

/* --- Features --- */
.features { padding-block: 80px; }
.section-title {
  text-align: center;
  font-size: clamp(1.6rem, 3.5vw, 2.3rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  margin: 0 0 14px;
}
/* Small uppercase kicker above a section title (Free forever / Premium / …). */
.eyebrow {
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-muted);
  margin: 0 0 10px;
}
.eyebrow-premium { color: var(--pink); }
.section-sub {
  text-align: center;
  color: var(--text-muted);
  max-width: 620px;
  margin: 0 auto 44px;
  font-size: 1.02rem;
}
.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 20px;
}
/* 6-card grids (Premium) look lopsided at 4-across (4 + 2); force a tidy 3 x 2. */
.feature-grid--three {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.feature {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 26px 24px;
}
.feature-icon {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  margin-bottom: 16px;
  color: var(--pink);
  background: color-mix(in srgb, var(--pink) 14%, transparent);
}
.feature-icon svg { width: 24px; height: 24px; }
.feature h3 { margin: 0 0 10px; font-size: 1.15rem; white-space: nowrap; }
.feature p { margin: 0; color: var(--text-muted); }

/* "And much more" strip — full width below the feature grid */
.more-box {
  margin-top: 20px;
  display: flex;
  align-items: center;
  gap: 14px 22px;
  flex-wrap: wrap;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 24px;
}
.more-label {
  font-weight: 700;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.more-label::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--pink);
}
.more-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.more-list li {
  font-size: 0.85rem;
  color: var(--text-muted);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 5px 12px;
  white-space: nowrap;
}

/* --- Premium --- */
.premium {
  padding-block: 88px;
  border-top: 1px solid var(--border);
  background:
    radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--pink) 10%, transparent), transparent 60%);
}
/* Premium feature cards get a subtle pink lift to read as the paid tier. */
.feature--premium {
  border-color: color-mix(in srgb, var(--pink) 30%, var(--border));
  background: linear-gradient(180deg, color-mix(in srgb, var(--pink) 7%, var(--bg-elev)), var(--bg-elev));
}
.more-box--premium {
  border-color: color-mix(in srgb, var(--pink) 26%, var(--border));
}

/* --- Beta / lifetime band --- */
.beta-band { padding-block: 72px; }
.beta-inner {
  text-align: center;
  max-width: 720px;
  margin-inline: auto;
  background: linear-gradient(135deg, color-mix(in srgb, var(--pink) 22%, var(--bg-elev)), var(--bg-elev));
  border: 1px solid color-mix(in srgb, var(--pink) 30%, var(--border));
  border-radius: 22px;
  padding: 48px 28px;
}
.beta-inner h2 {
  font-size: clamp(1.6rem, 3.5vw, 2.2rem);
  letter-spacing: -0.01em;
  margin: 0 0 12px;
  /* Even out the two lines so the last word ("life.") isn't left on its own. */
  text-wrap: balance;
}
.beta-inner p {
  color: var(--text-muted);
  margin: 0 auto;
  max-width: 560px;
}
.beta-inner .btn { margin-top: 28px; }

/* --- Footer --- */
.site-footer { border-top: 1px solid var(--border); padding-block: 32px; }
.footer-inner {
  display: flex;
  align-items: center;
  gap: 16px;
  justify-content: space-between;
  flex-wrap: wrap;
  color: var(--text-muted);
  font-size: 0.875rem;
}
.footer-left { display: flex; align-items: center; gap: 12px; }
.footer-mark { height: 26px; width: auto; }
.footer-bgg {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text-muted);
  opacity: 0.8;
  transition: opacity 0.15s ease;
}
.footer-bgg:hover { opacity: 1; }
.footer-bgg-logo { height: 20px; width: auto; display: block; }
.footer-inner p { margin: 0; }

@media (max-width: 560px) {
  .footer-inner { justify-content: center; text-align: center; }
}

/* --- Mobile fixes --- */
@media (max-width: 600px) {
  /* Let the hero title wrap instead of overflowing off-screen. */
  .hero-title .line { white-space: normal; }

  /* On mobile the pill chrome fights the layout (items won't reliably pair up),
     so drop the pills entirely and render the extras as compact flowing text
     separated by pink dots. It wraps as a natural paragraph — no flex pairing,
     no width thresholds — filling every line. Desktop pills are untouched. */
  .more-box { flex-direction: column; align-items: stretch; gap: 12px; }
  .more-list {
    display: block;
    width: 100%;
    font-size: 0.8rem;
    line-height: 1.8;
  }
  .more-list li {
    display: inline;
    /* Must be normal (not nowrap): nowrap makes each feature name an
       unbreakable block so only one fits per narrow line. normal lets the
       dot-separated text flow and fill every line, wrapping freely. */
    white-space: normal;
    background: none;
    border: none;
    border-radius: 0;
    padding: 0;
  }
  .more-list li:not(:last-child)::after {
    content: "•";
    color: var(--pink);
    margin: 0 7px;
  }

  /* Tighter header button so "Open App" fits on one line. */
  .site-header .btn-ghost { padding: 9px 16px; font-size: 0.9rem; }

  /* Inset the beta card so it isn't flush against the screen edges. */
  .beta-band { padding-inline: 16px; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   Legal / content pages (privacy, terms, contact).
   Narrower measure than the marketing sections: these are read, not scanned.
   ───────────────────────────────────────────────────────────────────────────── */
.legal-hero {
  padding: 56px 0 28px;
  border-bottom: 1px solid var(--border);
}
.legal-hero .container { max-width: 760px; }
.legal-title {
  font-size: clamp(1.7rem, 4vw, 2.4rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  margin: 0 0 10px;
}
.legal-updated {
  color: var(--text-muted);
  font-size: 0.875rem;
  margin: 0;
}
.legal-lede {
  color: var(--text-muted);
  font-size: 1.02rem;
  margin: 14px 0 0;
}

.legal { padding: 40px 0 64px; }
.legal .container { max-width: 760px; }
.legal h2 {
  font-size: 1.15rem;
  font-weight: 700;
  margin: 36px 0 12px;
  padding-top: 4px;
}
.legal h2:first-child { margin-top: 0; }
.legal h3 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  margin: 24px 0 8px;
}
.legal p { margin: 0 0 14px; color: var(--text-muted); }
.legal strong { color: var(--text); font-weight: 600; }
.legal a { color: var(--pink); text-decoration: underline; text-underline-offset: 3px; }
.legal a:hover { color: var(--pink-dark); }
.legal ul { margin: 0 0 16px; padding-left: 20px; color: var(--text-muted); }
.legal li { margin-bottom: 8px; }

/* Callout for the points people actually care about (we don't sell your data). */
.legal-callout {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-left: 3px solid var(--pink);
  border-radius: var(--radius);
  padding: 18px 20px;
  margin: 0 0 28px;
}
.legal-callout p:last-child { margin-bottom: 0; }

/* Contact page cards. These opt out of the narrow prose measure (see
   .legal--cards) so three fit across without breaking the email address. */
.legal--cards { padding: 40px 0 0; }
.legal.legal--cards .container { max-width: var(--container); }
.legal--after-cards { padding-top: 36px; }

.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
}
.contact-card {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px;
}
.contact-card h2 { font-size: 1rem; margin: 0 0 8px; padding-top: 0; }
.contact-card p { margin: 0 0 10px; font-size: 0.95rem; }
/* The address is longer than a 200px column, so let it wrap instead of
   spilling past the card border. */
.contact-card a {
  color: var(--pink);
  text-decoration: none;
  font-weight: 600;
  overflow-wrap: anywhere;
  display: inline-block;
  max-width: 100%;
}
.contact-card a:hover { text-decoration: underline; }

/* ─────────────────────────────────────────────────────────────────────────────
   Analytics consent banner (injected by analytics.js, so it exists only when
   the visitor has not chosen yet). Deliberately not a modal: it does not block
   the page, trap focus, or dim anything. Declining is one click, same weight as
   accepting.
   ───────────────────────────────────────────────────────────────────────────── */
.consent-banner {
  position: fixed;
  z-index: 100;
  left: 16px;
  right: 16px;
  bottom: 16px;
  margin-inline: auto;
  max-width: 620px;
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  justify-content: space-between;
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 20px;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.5);
  animation: consent-rise 0.22s ease-out;
}
@keyframes consent-rise {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .consent-banner { animation: none; }
}
.consent-text {
  margin: 0;
  flex: 1 1 260px;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--text-muted);
}
.consent-text a { color: var(--pink); text-decoration: underline; text-underline-offset: 2px; }
.consent-actions { display: flex; gap: 10px; flex-shrink: 0; }
.consent-btn {
  cursor: pointer;
  font-family: inherit;
  padding: 9px 18px;
  font-size: 0.875rem;
}
/* .btn declares no background because every other use is an <a>. A <button>
   defaults to the UA's light "buttonface", which rendered Decline as pale text
   on a pale pill. Refusing has to be exactly as easy to see as accepting. */
.consent-btn.btn-ghost {
  background: transparent;
  color: var(--text);
}
.consent-btn.btn-ghost:hover { background: rgba(255, 255, 255, 0.04); }

/* Inline control on the privacy page for changing an earlier choice. */
.consent-reset {
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
  background: none;
  border: none;
  padding: 0;
  color: var(--pink);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.consent-reset:hover { color: var(--pink-dark); }

@media (max-width: 520px) {
  .consent-banner { gap: 14px; }
  .consent-actions { width: 100%; }
  .consent-btn { flex: 1; text-align: center; }
}

/* Footer link row, added alongside the copyright when legal pages went up. */
.footer-links {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  font-size: 0.875rem;
}
.footer-links a { color: var(--text-muted); }
.footer-links a:hover { color: var(--text); }

@media (max-width: 640px) {
  .legal-hero { padding-top: 40px; }
  .footer-inner { justify-content: center; text-align: center; }
  .footer-links { justify-content: center; }
}