/* ============================================================================
   RE.NUEVO — BOLD variant (local experiment, not deployed).
   Aggressively channels the 2026 poster + pitch deck: pastel green→cream→pink
   gradients, oversized Fraunces serif with pink italic accents, the flower
   motif used large, and green / pink / dashed-outline cards (deck business slide).
   Self-contained custom classes (prefix bh-) so nothing depends on the purged
   Tailwind build.
   ========================================================================== */

:root{
  --bh-green:#11574C; --bh-green-deep:#0A332C;
  --bh-pink:#F18CBA; --bh-pink-bright:#ED6BA6; --bh-pink-deep:#C8588C; --bh-pink-soft:#FBE7F0;
  --bh-cream:#F5F3EC; --bh-ink:#2C2824;
}

/* Whole page sits on a soft poster gradient. */
body.bold{
  background:
    radial-gradient(70% 52% at 4% -6%, rgba(17,87,76,0.15), transparent 55%),
    radial-gradient(82% 70% at 100% 4%, rgba(241,140,186,0.34), transparent 58%),
    radial-gradient(58% 52% at 90% 110%, rgba(241,140,186,0.18), transparent 60%),
    #F5F3EC;
  background-attachment: fixed;
  color: var(--bh-ink);
}
/* Let the gradient bleed through the sticky nav. */
body.bold header{ background: rgba(245,243,236,0.55) !important; }

/* ── Typography primitives ───────────────────────────────────────────────── */
.bh-eyebrow{
  display:inline-flex; align-items:center; gap:.55rem; font-family:'Inter',system-ui,sans-serif;
  font-weight:700; font-size:.78rem; letter-spacing:.22em; text-transform:uppercase; color:var(--bh-pink-deep);
}
.bh-eyebrow::before{ content:''; width:8px; height:8px; border-radius:50%; background:var(--bh-pink); flex:none; }
.bh-eyebrow--light{ color:var(--bh-pink); }

.bh-display{
  font-family:'Fraunces',Georgia,serif; font-weight:600; color:var(--bh-green);
  line-height:1.02; letter-spacing:-0.025em; font-size:clamp(2.9rem,7.2vw,5.6rem); margin:0;
}
.bh-h2{
  font-family:'Fraunces',Georgia,serif; font-weight:600; color:var(--bh-green);
  line-height:1.06; letter-spacing:-0.015em; font-size:clamp(2.05rem,4.6vw,3.3rem); margin:0;
}
.bh-accent{ font-style:italic; color:var(--bh-pink-bright); }
.bh-sub{
  font-family:'Inter',system-ui,sans-serif; color:#4A5550; line-height:1.6;
  font-size:clamp(1.05rem,1.5vw,1.3rem);
}

/* ── Layout ──────────────────────────────────────────────────────────────── */
.bh-wrap{ max-width:1180px; margin:0 auto; padding:0 1.25rem; }
.bh-section{ padding:clamp(3.5rem,7vw,6.5rem) 0; }

/* ── Hero ────────────────────────────────────────────────────────────────── */
.bh-hero{ position:relative; overflow:hidden; text-align:center;
  padding:clamp(3rem,7vw,6rem) 1.25rem clamp(4rem,8vw,7rem); }
.bh-hero-inner{ position:relative; z-index:2; max-width:940px; margin:0 auto; }
.bh-hero .bh-display{ margin-top:1.5rem; }
.bh-hero .bh-sub{ margin:1.6rem auto 0; max-width:680px; }
.bh-flower{ position:absolute; pointer-events:none; user-select:none; z-index:1; }
.bh-flower--a{ top:-7%; left:-7%; width:min(42vw,440px); opacity:.16; transform:rotate(-14deg); }
.bh-flower--b{ bottom:-16%; right:-8%; width:min(48vw,540px); opacity:.20; transform:rotate(12deg); }

.bh-pill{
  display:inline-flex; align-items:center; gap:.5rem; background:rgba(241,140,186,.16);
  color:var(--bh-pink-deep); font-family:'Inter',sans-serif; font-weight:600; font-size:.82rem;
  padding:.4rem 1rem; border-radius:999px; border:1px solid rgba(241,140,186,.35);
}

.bh-ctarow{ display:flex; flex-wrap:wrap; gap:.85rem; justify-content:center; margin-top:2.2rem; }
.bh-btn{
  display:inline-flex; align-items:center; gap:.55rem; font-family:'Inter',sans-serif; font-weight:600;
  font-size:1.02rem; padding:.95rem 1.9rem; border-radius:999px; text-decoration:none; cursor:pointer;
  transition:transform .15s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}
.bh-btn svg{ width:18px; height:18px; }
.bh-btn--green{ background:var(--bh-green); color:#fff; box-shadow:0 12px 30px rgba(17,87,76,.26); }
.bh-btn--green:hover{ transform:translateY(-2px); box-shadow:0 18px 42px rgba(17,87,76,.34); }
.bh-btn--pink{ background:var(--bh-pink); color:var(--bh-green); box-shadow:0 12px 30px rgba(241,140,186,.40); }
.bh-btn--pink:hover{ transform:translateY(-2px); box-shadow:0 18px 44px rgba(241,140,186,.52); }
.bh-btn--ghost{ background:transparent; color:var(--bh-green); border:2px solid rgba(17,87,76,.22); }
.bh-btn--ghost:hover{ transform:translateY(-2px); border-color:var(--bh-green); }

/* ── Audience cards (deck "business" slide: green / pink / dashed) ─────────── */
.bh-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; margin-top:2.75rem; }
.bh-card{ position:relative; overflow:hidden; border-radius:28px; padding:2.25rem; min-height:300px;
  display:flex; flex-direction:column; }
.bh-card--green{ background:var(--bh-green); color:#E9F2EE; }
.bh-card--pink{ background:var(--bh-pink); color:var(--bh-green); }
.bh-card--outline{ background:rgba(255,255,255,.55); border:2px dashed var(--bh-pink); color:var(--bh-green); }
.bh-ic{ width:54px; height:54px; border-radius:16px; display:flex; align-items:center; justify-content:center; margin-bottom:1.3rem; }
.bh-ic svg{ width:26px; height:26px; }
.bh-card--green .bh-ic{ background:var(--bh-pink); color:var(--bh-green); }
.bh-card--pink  .bh-ic{ background:var(--bh-green); color:var(--bh-pink); }
.bh-card--outline .bh-ic{ background:var(--bh-pink); color:#fff; }
.bh-card-eyebrow{ font-family:'Inter',sans-serif; font-size:.72rem; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; opacity:.8; margin-bottom:.45rem; }
.bh-card h3{ font-family:'Fraunces',serif; font-weight:600; font-size:1.75rem; line-height:1.1; margin:0 0 .65rem; }
.bh-card p{ font-family:'Inter',sans-serif; font-size:.98rem; line-height:1.55; opacity:.92; margin:0; flex:1; }
.bh-card-link{ margin-top:1.4rem; font-family:'Inter',sans-serif; font-weight:600; text-decoration:none;
  display:inline-flex; align-items:center; gap:.4rem; }
.bh-card-link svg{ width:16px; height:16px; }
.bh-card--green .bh-card-link{ color:#fff; }
.bh-card--pink  .bh-card-link{ color:var(--bh-green); }
.bh-card--outline .bh-card-link{ color:var(--bh-pink-deep); }
.bh-card-flower{ position:absolute; right:-34px; bottom:-34px; width:170px; opacity:.13; pointer-events:none; }
.bh-card--pink .bh-card-flower{ opacity:.18; }

/* ── Unify / defragmentation band (deck "defragmentation layer") ──────────── */
.bh-unify{ position:relative; overflow:hidden; background:var(--bh-green); color:#E9F2EE;
  border-radius:40px; padding:clamp(2.75rem,5vw,4.25rem); text-align:center; }
.bh-unify .bh-h2{ color:#fff; }
.bh-unify .bh-sub{ color:rgba(233,242,238,.85); margin:1.1rem auto 0; max-width:640px; }
.bh-chips{ display:flex; flex-wrap:wrap; gap:.6rem; justify-content:center; margin-top:1.9rem; position:relative; z-index:2; }
.bh-chip{ background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.22); border-radius:999px;
  padding:.5rem 1.05rem; font-family:'Inter',sans-serif; font-size:.9rem; font-weight:600; color:#fff; }
.bh-unify .bh-card-flower{ right:-30px; bottom:-30px; width:220px; opacity:.10; }

/* ── How it works (two glass panels) ─────────────────────────────────────── */
.bh-two{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.5rem; margin-top:2.75rem; }
.bh-panel{ background:rgba(255,255,255,.66); border:1px solid rgba(17,87,76,.10); border-radius:28px;
  padding:2.25rem; backdrop-filter:blur(6px); }
.bh-panel-head{ display:flex; align-items:center; gap:.8rem; margin-bottom:.5rem; }
.bh-panel-head .bh-ic{ margin-bottom:0; width:46px; height:46px; border-radius:13px; background:var(--bh-green); color:var(--bh-pink); }
.bh-panel-head h3{ font-family:'Fraunces',serif; font-weight:600; font-size:1.6rem; color:var(--bh-green); margin:0; }
.bh-step{ display:flex; gap:1rem; margin-top:1.3rem; }
.bh-step .n{ flex:none; width:34px; height:34px; border-radius:50%; background:var(--bh-pink); color:var(--bh-green);
  font-family:'Inter',sans-serif; font-weight:700; display:flex; align-items:center; justify-content:center; }
.bh-step .t{ font-family:'Inter',sans-serif; }
.bh-step .t b{ color:var(--bh-green); font-weight:600; }
.bh-step .t span{ display:block; color:#5C6661; font-size:.92rem; margin-top:.15rem; }

/* ── Closing CTA ─────────────────────────────────────────────────────────── */
.bh-cta{ position:relative; overflow:hidden; border-radius:40px; padding:clamp(3rem,6vw,5rem) 1.5rem; text-align:center;
  background:
    radial-gradient(60% 90% at 10% 0%, rgba(241,140,186,.55), transparent 60%),
    radial-gradient(60% 90% at 96% 100%, rgba(17,87,76,.40), transparent 60%),
    linear-gradient(135deg,#F8C9DF 0%,#EFEDE0 50%,#DCEDE4 100%); }
.bh-cta-inner{ position:relative; z-index:2; max-width:760px; margin:0 auto; }
.bh-cta .bh-display{ font-size:clamp(2.3rem,5.5vw,4rem); }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width:880px){
  .bh-cards{ grid-template-columns:1fr; }
  .bh-two{ grid-template-columns:1fr; }
  .bh-flower--a{ width:60vw; }
  .bh-flower--b{ width:66vw; }
}

/* ============================================================================
   Components for the inner pages (forms, legal, dashboards, marketing).
   These let every page adopt the bold look without touching functional markup.
   ========================================================================== */

/* ── Inner-page header (non-hero pages) ──────────────────────────────────── */
.bh-pagehead{ position:relative; padding:clamp(1rem,4vw,2rem) 0 clamp(1rem,3vw,1.5rem); }
.bh-pagehead .bh-eyebrow{ margin-bottom:.7rem; }
.bh-pagehead h1{
  font-family:'Fraunces',Georgia,serif; font-weight:600; color:var(--bh-green);
  line-height:1.04; letter-spacing:-0.02em; font-size:clamp(2.05rem,6vw,3.2rem); margin:0;
}
.bh-pagehead .bh-lede{ margin-top:.9rem; max-width:62ch; color:#4A5550; line-height:1.6;
  font-size:clamp(1rem,1.5vw,1.18rem); }
.bh-pagehead--center{ text-align:center; }
.bh-pagehead--center .bh-eyebrow{ justify-content:center; }
.bh-pagehead--center .bh-lede{ margin-left:auto; margin-right:auto; }

/* ── White card for forms / content blocks ──────────────────────────────── */
.bh-formcard{ background:#fff; border:1px solid rgba(17,87,76,.08); border-radius:28px;
  box-shadow:0 14px 40px rgba(17,87,76,.08); padding:clamp(1.4rem,5vw,2.5rem); }

/* icon + title row inside a card (replaces the small forest icon+h1 pattern) */
.bh-cardhead{ display:flex; align-items:center; gap:.85rem; margin-bottom:1rem; }
.bh-cardhead .bh-ic{ margin-bottom:0; width:48px; height:48px; border-radius:14px; flex:none;
  background:var(--bh-green); color:var(--bh-pink); }
.bh-cardhead .bh-ic svg{ width:22px; height:22px; }
.bh-cardhead h1, .bh-cardhead h2{ font-family:'Fraunces',serif; font-weight:600; color:var(--bh-green);
  font-size:clamp(1.45rem,4.5vw,2rem); line-height:1.1; margin:0; }

/* ── Prose (legal / about) ──────────────────────────────────────────────── */
.bh-prose{ color:#3C463F; font-size:clamp(.95rem,1.4vw,1.05rem); line-height:1.7; }
.bh-prose h2{ font-family:'Fraunces',serif; font-weight:600; color:var(--bh-green);
  font-size:clamp(1.3rem,2.6vw,1.65rem); line-height:1.2; }
.bh-prose a{ color:var(--bh-pink-deep); font-weight:600; text-decoration:underline;
  text-decoration-color:rgba(200,88,140,.4); }
.bh-prose a:hover{ text-decoration-color:var(--bh-pink-deep); }
.bh-prose strong{ color:var(--bh-green); }

/* ── Bold buttons can also be full width (forms) ─────────────────────────── */
.bh-btn--block{ width:100%; justify-content:center; }

/* Section divider inside long forms (buyer-new-search, seller-new). Replaces the
   tight `border-t border-gray-100 pt-6 mt-7` rhythm with more breathing room and a
   brand-green hairline, so sections like "Match quality" aren't cramped. */
.bh-formsec{ border-top:1px solid rgba(17,87,76,.10); padding-top:2.1rem; margin-top:2.4rem; }
@media (min-width:640px){ .bh-formsec{ padding-top:2.5rem; margin-top:2.9rem; } }

/* ── Footer skin (shared footer rendered by app.js — body.bold scopes it) ── */
body.bold footer{ background:transparent !important; border-top:1px solid rgba(17,87,76,.12) !important; }
body.bold footer a:hover{ color:var(--bh-pink-deep) !important; }

/* ============================================================================
   GLOBAL MOBILE SAFETY (99% of traffic is mobile).
   ========================================================================== */
/* overflow-x: clip stops any decorative bleed from creating a horizontal
   scrollbar, WITHOUT becoming a scroll container (so the sticky nav still works). */
body.bold{ overflow-x:clip; }
img{ max-width:100%; height:auto; }

/* Hide an element on phones. Used to drop a left icon badge that would
   otherwise indent a whole form (icon + form are flex siblings) on mobile.
   !important beats .bh-ic{display:flex}. */
@media (max-width:640px){ .bh-hide-mobile{ display:none !important; } }

@media (max-width:640px){
  .bh-section{ padding:clamp(2.25rem,9vw,3.25rem) 0; }
  .bh-wrap{ padding:0 1.1rem; }
  .bh-card{ min-height:0; padding:1.6rem; border-radius:24px; }
  .bh-card h3{ font-size:1.55rem; }
  .bh-unify, .bh-cta{ border-radius:26px; padding:2.1rem 1.25rem; }
  .bh-hero{ padding:2rem 1.1rem 3rem; }
  .bh-ctarow{ gap:.7rem; }
  .bh-btn{ padding:.85rem 1.4rem; font-size:.97rem; }
  /* keep hero flowers from feeling huge / cramped on small screens */
  .bh-flower--a{ top:-3%; left:-12%; opacity:.12; }
  .bh-flower--b{ bottom:-8%; right:-14%; opacity:.16; }
}