/* ============================================================
   CloudSite.ai - Design system (Claude-inspired)
   Warm, editorial, human. No gradients. Lots of whitespace.
   ============================================================ */

/* -- Global resets for Claude aesthetic -- */
body {
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}

/* -- Serif headings (editorial feel) -- */
h1, h2, .v2h1, .v2h2, .section-head h2 {
  font-family: var(--font-serif);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.15;
}

.v2serif, .v2serif--italic {
  font-family: var(--font-serif);
}
.v2serif--italic {
  font-style: italic;
  color: var(--primary);
}

/* -- Navigation (Claude-style: clean, no-fuss) -- */
.site-header {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
}

/* -- Buttons (Claude: dark fill primary, ghost outlines) -- */
.btn-primary,
.v2plan__cta--pop,
.v2prompt__btn {
  background: #1A1A1A !important;
  border-color: #1A1A1A !important;
  color: #fff !important;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 0.875rem;
  padding: 0.625rem 1.25rem;
  transition: background 0.15s ease, opacity 0.15s ease;
  letter-spacing: 0;
}
.btn-primary:hover,
.v2plan__cta--pop:hover,
.v2prompt__btn:hover {
  background: #333 !important;
  border-color: #333 !important;
}

.btn-ghost,
.btn-outline,
.v2plan__cta--ghost {
  background: transparent;
  border: 1.5px solid var(--border);
  color: var(--foreground);
  border-radius: var(--radius);
  font-weight: 500;
  font-size: 0.875rem;
  padding: 0.625rem 1.25rem;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.btn-ghost:hover,
.btn-outline:hover,
.v2plan__cta--ghost:hover {
  border-color: var(--foreground);
  background: var(--muted);
}

/* -- Cards (Claude: subtle border, no heavy shadow) -- */
.v2plan,
.feature-card,
.card,
.pricing-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.v2plan:hover,
.feature-card:hover,
.card:hover {
  border-color: #D0D0CB;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

/* Popular plan - warm coral top border (Claude-style accent line) */
.v2plan--pop {
  border-color: var(--border);
  border-top: 3px solid var(--primary);
}

/* -- Eyebrow badges (minimal, Claude-style) -- */
.v2eyebrow,
.eyebrow,
.badge {
  background: var(--muted);
  border: 1px solid var(--border);
  color: var(--muted-foreground);
  font-weight: 600;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: var(--radius-pill);
  padding: 0.3rem 0.75rem;
}

.badge--solid {
  background: #1A1A1A;
  color: #fff;
  border-color: #1A1A1A;
}

.v2plan__badge {
  background: var(--primary);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: var(--radius-pill);
  padding: 0.25rem 0.7rem;
}

/* -- Sections (lots of whitespace, Claude-like) -- */
.section,
.v2pricing,
.v2features,
.v2magic,
.v2steps,
.v2dream,
.v2social,
.v2faq,
.v2cta,
.v2proof {
  padding-block: 7rem;
}
@media (max-width: 640px) {
  .section,
  .v2pricing,
  .v2features,
  .v2magic,
  .v2steps,
  .v2dream,
  .v2social,
  .v2faq,
  .v2cta,
  .v2proof {
    padding-block: 4.5rem;
  }
}

/* -- Hero (clean white, editorial) -- */
.v2hero {
  padding-block: 5rem 4rem;
  background: var(--background);
}
.v2hero__bg,
.v2hero__scrim {
  display: none !important;
}

/* -- Dark sections (warm charcoal) -- */
.section--dark,
.v2cta {
  background: #1A1A1A;
  color: #F7F7F5;
}
.section--dark a,
.v2cta a {
  color: #F7F7F5;
}

/* -- Footer (Claude: dark, organized) -- */
.site-footer {
  background: #1A1A1A;
  color: #A8A8A3;
  border-top: none;
}
.site-footer a {
  color: #A8A8A3;
  transition: color 0.15s ease;
}
.site-footer a:hover {
  color: #FFFFFF;
}
.site-footer h2 {
  color: #F7F7F5;
  font-family: var(--font-sans);
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* -- Newsletter (warm accent background) -- */
.newsletter {
  background: var(--muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

/* -- Links -- */
a:hover {
  color: var(--primary);
}

/* -- Muted sections -- */
.section--muted,
.section--muted-soft {
  background: var(--muted);
}

/* -- Feature list checks -- */
.v2plan__features li svg,
.feature-check svg {
  color: var(--primary);
}

/* -- Trust bar (faded, minimal) -- */
.v2trust {
  opacity: 0.5;
}

/* -- Prompt box (Claude-style input) -- */
.v2prompt__field {
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--background);
  transition: border-color 0.2s ease;
}
.v2prompt__field:focus-within {
  border-color: #B8B8B3;
}

/* -- Pricing toggle -- */
.v2toggle button.is-active {
  background: #1A1A1A;
  color: #fff;
}

/* -- Remove all gradients except functional masks -- */
.v2hero::before,
.v2hero::after {
  display: none !important;
}

/* -- Icon tiles (Claude: warm background) -- */
.icon-tile {
  background: var(--muted);
  border: 1px solid var(--border);
}

/* -- Tabular numbers for prices -- */
.v2plan__amt,
.v2plan__meta strong {
  font-variant-numeric: tabular-nums;
}

/* -- Mega menu and dropdown panels (cleaner) -- */
.nav__mega-inner,
.nav__dropdown-inner {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}
.nav__mega,
.nav__dropdown {
  border: none;
  box-shadow: none;
}

/* -- Inner hero for subpages -- */
.inner-hero {
  background: var(--muted);
  padding-block: 4rem 3rem;
}

/* -- Feature page card styling -- */
.fv2-demo {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

/* -- Breadcrumb bar -- */
.site-breadcrumb {
  background: var(--muted);
  border-top: 1px solid var(--border);
}

/* -- Blog cards -- */
.blog-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.blog-card:hover {
  border-color: #D0D0CB;
}

/* -- Magic/Why section: override dark bg (now light section) -- */
.v2magic {
  background: var(--background) !important;
  color: var(--foreground) !important;
}
.v2magic h2,
.v2magic h3,
.v2magic__title {
  color: var(--foreground) !important;
}
.v2magic p,
.v2magic__sub {
  color: var(--muted-foreground) !important;
}

/* -- btn-secondary: visible on light backgrounds -- */
.btn-secondary {
  background: var(--background) !important;
  color: var(--foreground) !important;
  border: 1.5px solid var(--border) !important;
  border-radius: var(--radius);
  font-weight: 600;
}
.btn-secondary:hover {
  background: var(--muted) !important;
  border-color: var(--foreground) !important;
}

/* -- Ghost/outline buttons: ensure visible on light bg -- */
.btn-ghost,
.btn-outline {
  color: var(--foreground) !important;
  border-color: var(--border) !important;
}
.btn-ghost:hover,
.btn-outline:hover {
  border-color: var(--foreground) !important;
  background: var(--muted) !important;
  color: var(--foreground) !important;
}

/* Ghost buttons inside dark sections keep white text */
.section--dark .btn-ghost,
.v2cta .btn-ghost {
  color: #F7F7F5 !important;
  border-color: rgba(255,255,255,0.25) !important;
}
.section--dark .btn-ghost:hover,
.v2cta .btn-ghost:hover {
  background: rgba(255,255,255,0.1) !important;
  border-color: rgba(255,255,255,0.5) !important;
  color: #fff !important;
}

/* -- Newsletter: ensure readable text on light bg inside dark footer -- */
.newsletter h2 {
  color: var(--foreground) !important;
  font-family: var(--font-serif) !important;
  text-transform: none !important;
  letter-spacing: -0.01em !important;
  font-size: 1.25rem !important;
}
.newsletter p {
  color: var(--muted-foreground) !important;
}
.newsletter input[type="email"] {
  color: var(--foreground);
  border-color: var(--border);
}