@import "output.css";
@plugin "daisyui";

:root {
  /* Surfaces */
  --surface-page: #ffffff;
  --surface-card: #f8fafc;      /* slate-50 */
  --surface-border: #e2e8f0;    /* slate-200 */
  --background: #fcfaf8;
  --background-muted: #eaecf080;    /* slate-100 */
  /* Typography */
  --text-strong: #0f172a;       /* slate-900 */
  --text-muted: #64748b;        /* slate-500 */

  /* Brand */
  --brand-blue: #457aec;
  --brand-blue-dark: #2e4eb6;

  /* Shadows */
  --shadow-soft: 0 2px 6px rgba(0,0,0,0.04);
}

/* ============================================================
    GLOBAL
   ============================================================ */

body {
  background: var(--surface-page);
  color: var(--text-strong);
  margin: 0;
  height: 100%;
}

.page-shell {
  display: block;
  min-height: 100%;
}

/* Container helper (optional) */
.container {
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

/* ============================================================
    SECTIONS
   ============================================================ */

.section {
  padding-top: 5rem;
  padding-bottom: 5rem;
}

.section-title {
  font-size: 1.875rem;
  font-weight: 700;
  text-align: center;
  color: var(--text-strong);
}

/* ============================================================
    HERO
   ============================================================ */

#heroSection {
  background: var(--background);
  box-sizing: border-box;
  border: 0;
}

/* ============================================================
    How It Works
   ============================================================ */
#stepsSection {
  background: var(--background-muted);
}

/* ============================================================
    How It Works
   ============================================================ */
#membershipSection {
  background: var(--background-muted);
}

/* ============================================================
    Pricing
   ============================================================ */
#pricingSection, #footerCtaSection, footer {
  background: var(--brand-blue-dark);
}

/* ============================================================
    FooterCTA
   ============================================================ */
.CTAcontainer {
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}


/* ============================================================
    NAVIGATION
   ============================================================ */

/* Transparent dark navbar with blur */
.navbar-start a{
  /*background-color: rgba(15, 23, 42, 0.85);  slate-900/85 */
  backdrop-filter: blur(6px);
}

/* ============================================================
    CARDS
   ============================================================ */

.card {
  background: var(--surface-card);
  border: 1px solid var(--surface-border);
  border-radius: 0.75rem;
  box-shadow: var(--shadow-soft);
  padding: 1.5rem;
}

/* ============================================================
    BUTTONS (Brand overrides)
   ============================================================ */

.btn-primary {
  background: var(--brand-blue) !important;
  border-color: var(--brand-blue-dark) !important;
  color: white !important;
}

.btn-primary:hover {
  background: var(--brand-blue-dark) !important;
}

.btn-outline {
  border-color: var(--brand-blue) !important;
  color: var(--brand-blue) !important;
}

.btn-outline:hover {
  background: var(--brand-blue) !important;
  color: white !important;
}

/* Daisy overide */
.btn-logo {
  border: none;
  height: 2.5rem;
  width: 4rem;
}

/* ============================================================
    DAISYUI OVERRIDES (Surface alignment)
   ============================================================ */

.bg-base-100 {
  background-color: var(--surface-page) !important;
}

.bg-base-200 {
  background-color: var(--surface-card) !important;
}

.hero-text-accent {
  color: var(--brand-blue);
}

.typo-strong {
  color: var(--text-strong);
}

.typo-muted {
  color: var(--text-muted);
}

.pricing-header {
  width: fit-content;
}

.step-content { display: none; }
.step-content.active { display: block; }
.form-card { @apply bg-white border border-slate-200 rounded-xl p-6 shadow-sm; }
#Signup-agreement-links { text-decoration: underline; }
.shell-inner {
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
  height: 100%;
}