/* Shared app + calculator — photo layer uses --rc-staff-hero-image (set in base.html = same URL as home hero) */
body.app-calculator {
  margin: 0;
  font-family: "Poppins", system-ui, sans-serif;
}

/* Staff + auth: same collage + pastel stack (falls back gracefully if PNG missing) */
.rc-wallpaper-bg,
.brand-page {
  position: relative;
  background-color: #f5f0e8;
  background-image:
    var(--rc-staff-hero-image, url("/static/images/hero-luxury-collage.png")),
    radial-gradient(ellipse 110% 85% at 15% 20%, rgba(254, 243, 199, 0.65) 0%, transparent 55%),
    radial-gradient(ellipse 95% 75% at 85% 40%, rgba(251, 207, 232, 0.5) 0%, transparent 52%),
    radial-gradient(ellipse 100% 60% at 50% 100%, rgba(186, 230, 253, 0.25) 0%, transparent 50%),
    linear-gradient(180deg, #fdfaf6 0%, #ebe3d6 100%);
  background-size: cover, cover, cover, cover, cover;
  background-position: center, center, center, center, center;
  background-repeat: no-repeat;
}

.rc-wallpaper-bg::before,
.brand-page::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 120% 90% at 50% 40%,
    rgba(255, 252, 248, 0.15) 0%,
    rgba(245, 240, 232, 0.45) 70%,
    rgba(230, 220, 208, 0.55) 100%
  );
  pointer-events: none;
}

.brand-page {
  min-height: calc(100vh - 56px);
}

/* Calculator hero strip: veil + same collage + fallbacks */
.bg-curtain {
  background-color: #f0ebe3;
  background-image:
    linear-gradient(
      105deg,
      rgba(20, 16, 14, 0.32) 0%,
      rgba(32, 28, 24, 0.1) 35%,
      rgba(255, 252, 248, 0.35) 100%
    ),
    var(--rc-staff-hero-image, url("/static/images/hero-luxury-collage.png")),
    radial-gradient(ellipse 95% 75% at 12% 25%, rgba(254, 243, 199, 0.75) 0%, transparent 55%),
    radial-gradient(ellipse 85% 70% at 88% 35%, rgba(251, 207, 232, 0.55) 0%, transparent 50%),
    radial-gradient(ellipse 90% 55% at 45% 95%, rgba(167, 243, 208, 0.28) 0%, transparent 48%),
    linear-gradient(165deg, #faf6ef 0%, #ebe3d6 100%);
  background-size: cover, cover, cover, cover, cover, cover;
  background-position: left center, left center, center, center, center, center;
  background-repeat: no-repeat;
}

.brand-shell {
  position: relative;
  z-index: 1;
}

/* Solid cards: no backdrop blur (blur reads as “hazy” on top of photos) */
.brand-card {
  background: rgba(255, 255, 255, 0.97);
  border: 1px solid rgba(226, 232, 240, 0.95);
  box-shadow: 0 8px 32px rgba(15, 23, 42, 0.12);
}

.input {
  width: 100%;
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid #d1d5db;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 400;
}

.btn-green {
  width: 100%;
  margin-top: 10px;
  background: #16a34a;
  color: white;
  padding: 10px;
  border-radius: 10px;
}

.btn-green-light {
  width: 100%;
  margin-top: 8px;
  background: #22c55e;
  color: white;
  padding: 10px;
  border-radius: 10px;
}