/* MP Site Code — snippet #7504063. Edited in wp-admin; do not edit this file. */
/* ============================================================
   YOU ASKED, WE ANSWERED — Site Code CSS snippet
   Scope: page containing [mp_directory]
   Namespace: .mp-yawa  (typography inherits from theme)
   ============================================================ */

.mp-yawa{
  --berry:#8E2C4E;
  --berry-hover:#7A2542;
  --light-pink:#FDEEF2;
  --lav:#F3EEFB;
  --ivory:#FCF8F5;
  --black:#000;
  --muted:#645A60;
  --line:#F1E0E6;
  --shadow-md:0 14px 40px rgba(142,44,78,.10);
  margin-block-start:0 !important;
}
.mp-yawa .yawa-wrap{max-width:1120px;margin:0 auto;padding:0 24px}

/* ---------- shared ---------- */
.mp-yawa .yawa-eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--berry);margin-bottom:14px;
}
.mp-yawa .yawa-eyebrow::before{content:"";width:20px;height:2px;background:var(--berry);border-radius:2px}
.mp-yawa .yawa-h1,
.mp-yawa .yawa-h2,
.mp-yawa .yawa-h3{font-weight:800;letter-spacing:-.02em;margin:0}

/* ============================================================
   HERO (Block A) — wash fades to white so the plugin's
   search bar below sits on a continuous background
   ============================================================ */
.mp-yawa .yawa-hero{
  position:relative;overflow:hidden;text-align:center;
  padding:64px 0 8px;
  background:
    radial-gradient(560px 360px at 88% 8%, var(--light-pink) 0%, transparent 65%),
    linear-gradient(180deg, var(--ivory), #fff);
}
.mp-yawa .yawa-hero .yawa-wrap{position:relative;z-index:1}
.mp-yawa .yawa-h1{font-size:clamp(2rem,4.6vw,3.1rem);margin:0 0 14px}
.mp-yawa .yawa-h1 em{font-style:normal;color:var(--berry)}
.mp-yawa .yawa-deck{
  max-width:640px;margin:0 auto;
  line-height:1.65;color:var(--black);
}

/* ============================================================
   HOW EVERY ANSWER GETS HERE (Block B)
   ============================================================ */
.mp-yawa .yawa-how{
  background:var(--ivory);
  margin-top:56px; /* space above the section */
  padding:56px 0;
}
.mp-yawa .yawa-sec-head{text-align:center;margin-bottom:34px}
.mp-yawa .yawa-h2{font-size:clamp(1.5rem,3vw,2rem)}
.mp-yawa .yawa-how-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:28px;
  max-width:960px;margin:0 auto;
}
.mp-yawa .yawa-how-step{text-align:center;padding:0 8px}
.mp-yawa .yawa-how-n{
  width:36px;height:36px;margin:0 auto 12px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--berry);color:#fff;font-size:.9rem;font-weight:800;
}
.mp-yawa .yawa-h3{font-size:1.02rem;letter-spacing:-.01em;margin:0 0 6px}
.mp-yawa .yawa-how-step p{margin:0;font-size:.9rem;color:var(--muted);line-height:1.6}

/* ============================================================
   ASK CTA BAND (Block B)
   ============================================================ */
.mp-yawa .yawa-ask{padding:72px 0}
.mp-yawa .yawa-ask-band{
  position:relative;overflow:hidden;text-align:center;
  background:linear-gradient(135deg,var(--berry),#6E2140);
  border-radius:26px;padding:56px 32px;color:#fff;
}
.mp-yawa .yawa-ask-band::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(420px 280px at 90% 0%, rgba(201,187,232,.28), transparent 65%),
    radial-gradient(420px 280px at 5% 100%, rgba(253,238,242,.16), transparent 65%);
}
.mp-yawa .yawa-ask-band > *{position:relative}
.mp-yawa .yawa-ask-band .yawa-h2{color:#fff;margin-bottom:12px}
.mp-yawa .yawa-ask-band p{max-width:520px;margin:0 auto 26px;line-height:1.65;color:#F6E4EA}
.mp-yawa .yawa-btn{
  display:inline-block;font-size:16px;font-weight:700;text-decoration:none;
  color:var(--berry);background:#fff;border-radius:100px;padding:14px 34px;
  transition:transform .18s,box-shadow .18s;
}
.mp-yawa .yawa-btn:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(0,0,0,.25);color:var(--berry)}

/* ============================================================
   MOBILE
   ============================================================ */
@media (max-width:720px){
  .mp-yawa .yawa-wrap{padding:0 18px}
  .mp-yawa .yawa-hero{padding:44px 0 4px}
  .mp-yawa .yawa-how-grid{grid-template-columns:1fr;gap:30px}
  .mp-yawa .yawa-ask{padding:48px 0}
  .mp-yawa .yawa-ask-band{padding:44px 22px;border-radius:20px}
}