/* ==============================
   Brand Variables
   ============================== */
:root {
  --accent: #1fa2c1;
  --accent-soft: rgba(31, 162, 193, 0.12);
  --accent-soft-strong: rgba(31, 162, 193, 0.22);
  --accent-border: rgba(31, 162, 193, 0.25);

  --text-primary: #777777;
  --text-muted: rgba(119, 119, 119, 0.75);

  --border-soft: rgba(0, 0, 0, 0.08);
  --bg-white-soft: rgba(255, 255, 255, 0.72);
}

/* ==============================
   Base
   ============================== */
body {
  background:
    radial-gradient(1200px 700px at 10% 10%, var(--accent-soft), transparent 60%),
    radial-gradient(900px 600px at 90% 30%, rgba(31, 162, 193, 0.10), transparent 55%),
    #ffffff;
  color: var(--text-primary);
  font-family: Cambria, "Hoefler Text", "Liberation Serif",
               Times, "Times New Roman", serif;
}

/* ==============================
   Heading Scale (Brand-Controlled)
   ============================== */

h1 {
  font-size: 2.25rem;   /* ~36px */
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: #5f5f5f;
}

h2 {
  font-size: 1.6rem;    /* ~26px */
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: #5f5f5f;
}

h3 {
  font-size: 1.25rem;   /* ~20px */
  font-weight: 600;
  line-height: 1.3;
}

h4 {
  font-size: 1.1rem;    /* ~18px */
  font-weight: 600;
}

h5 {
  font-size: 1rem;      /* ~16px */
  font-weight: 600;
}

h6 {
  font-size: 0.9rem;    /* ~14px */
  font-weight: 600;
}


/* ==============================
   Navigation
   ============================== */
.nav-blur {
  backdrop-filter: blur(10px);
  background: var(--bg-white-soft);
  border-bottom: 1px solid var(--border-soft);
}

/* ==============================
   Typography Helpers
   ============================== */
.muted {
  color: var(--text-muted);
}

/* ==============================
   Badges
   ============================== */
.badge-soft {
  background: var(--accent-soft);
  color: var(--accent);
  border: 1px solid var(--accent-border);
  font-weight: 600;
}

/* ==============================
   Buttons
   ============================== */
.btn-accent {
  background: var(--accent);
  border-color: var(--accent);
  color: #ffffff;
  box-shadow: 0 10px 25px var(--accent-soft-strong);
}

.btn-accent:hover {
  filter: brightness(0.95);
}

/* Focus states */
.btn:focus,
.btn:active,
a:focus {
  outline: none !important;
  box-shadow: 0 0 0 0.25rem var(--accent-soft-strong) !important;
}

/* ==============================
   Cards
   ============================== */
.card-soft {
  border: 1px solid var(--border-soft);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.06);
  border-radius: 18px;
}

/* ==============================
   Hero
   ============================== */
.hero {
  padding: 64px 0 40px 0;
}

.hero h1 {
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: #5f5f5f; /* slightly darker for hierarchy */
}

/* ==============================
   Step Indicators
   ============================== */
.step-num {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--accent-soft);
  border: 1px solid var(--accent-border);
  color: var(--accent);
  font-weight: 700;
}

/* ==============================
   Sticky CTA
   ============================== */
.sticky-cta {
  position: sticky;
  bottom: 16px;
  z-index: 10;
}

/* ==============================
   Brand Logo
   ============================== */
.brand-logo {
  height: 55px;        /* primary control */
  width: auto;
  max-width: 160px;   /* prevents oversized logos */
  object-fit: contain;
  display: block;
}

/* ==============================
   Links
   ============================== */
a {
  color: var(--accent);
  text-decoration: none;
  transition: color 0.15s ease, opacity 0.15s ease;
}

a:hover {
  color: #168aa3; /* slightly darker brand shade */
  text-decoration: none;
}

/* Muted links (nav, footer, subtle UI links) */
a.muted,
.muted a {
  color: var(--text-muted);
}

a.muted:hover,
.muted a:hover {
  color: var(--accent);
}

/* Inline content links (paragraphs, FAQ, etc.) */
p a,
.accordion-body a,
.card-body a {
  font-weight: 600;
}

/* Focus accessibility */
a:focus-visible {
  outline: none;
  box-shadow: 0 0 0 0.25rem var(--accent-soft-strong);
  border-radius: 4px;
}

/* ==============================
   Accordion (FAQ) - Brand Override
   ============================== */

/* Default (collapsed) button */
.accordion-button {
  color: var(--text-primary);
  background-color: #fff;
}

/* Expanded (active) button */
.accordion-button:not(.collapsed) {
  color: var(--accent);
  background-color: var(--accent-soft);
  box-shadow: none; /* removes Bootstrap blue-ish inset */
}

/* Remove the default blue focus ring */
.accordion-button:focus {
  border-color: var(--accent-border);
  box-shadow: 0 0 0 0.25rem var(--accent-soft-strong);
}

/* Optional: match accordion item border + rounding to your cards */
.accordion-item {
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 10px;
}

/* Optional: soften the body text */
.accordion-body {
  color: var(--text-primary);
}

/* Brand the chevron icon (Bootstrap uses a background-image) */
.accordion-button::after {
  filter: none; /* reset */
  opacity: 0.85;
}

/* When expanded, keep chevron on-brand */
.accordion-button:not(.collapsed)::after {
  opacity: 1;
}

/* ==============================
   Placeholder Styling (Muted)
   ============================== */

/* Bootstrap inputs */
.form-control::placeholder,
.form-select::placeholder,
textarea.form-control::placeholder {
  color: var(--text-muted) !important;
  opacity: 1; /* Firefox */
}

/* Safari / older WebKit */
.form-control::-webkit-input-placeholder {
  color: var(--text-muted) !important;
}

/* Edge / IE */
.form-control:-ms-input-placeholder {
  color: var(--text-muted) !important;
}

.form-control::-ms-input-placeholder {
  color: var(--text-muted) !important;
}

/* Ensure typed text is darker */
.form-control,
.form-select,
textarea {
  color: var(--text-primary);
}

/* Ensure bootstrap button-check shows selected state */
.btn-check:checked + .btn.btn-outline-dark {
  background-color: var(--accent);
  border-color: var(--accent);
  color: #fff;
}


/* ==============================
   Footer
   ============================== */
.footer {
  border-top: 1px solid var(--border-soft);
  padding: 26px 0;
  color: var(--text-muted);
  font-size: 0.95rem;
}

/* Mobile tweak */
@media (max-width: 576px) {
  .brand-logo {
    height: 36px;
  }
}