/* ==========================================================================
   "Stay in the loop your way" (Get Involved → #connect) — a visual refresh laid
   over the YPR Stay Connected plugin (mu-plugins/ypr-stay-connected.php, deployed
   from Nicholas's repo). The plugin's markup, form and Brevo hand-off are untouched;
   every rule is scoped with `body` so it outranks the plugin's own inline <style>.
   Loaded on the Get Involved page only (inc/giving.php → sr_stay_connected_skin).
   ========================================================================== */

/* Panel: deeper violet with a warm gold glow and a soft brand ring, rounder corners */
body .ypr-sc{position:relative;overflow:hidden;overflow:clip;isolation:isolate; /* clip, not hidden: hidden would stop the left column staying in view */
  grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(28px,5vw,72px);align-items:start;
  padding:clamp(28px,5vw,64px);border-radius:28px;
  background:radial-gradient(70% 60% at 0% 0%,rgba(236,168,3,.24),transparent 62%),radial-gradient(70% 70% at 100% 100%,rgba(17,114,162,.32),transparent 60%),linear-gradient(140deg,#B309AD 0%,#8f0a8b 100%);
  box-shadow:0 30px 80px rgba(120,10,115,.25)}
body .ypr-sc::before{content:"";position:absolute;z-index:-1;left:-200px;bottom:-240px;width:560px;height:560px;border-radius:50%;border:64px solid rgba(255,255,255,.06);pointer-events:none}

/* Left: stays in view while the form scrolls past; the three promises become check rows; a team photo below */
body .ypr-sc__copy{position:sticky;top:120px}
body .ypr-sc__kicker{font-size:clamp(1.5rem,2.4vw,2rem)}
body .ypr-sc__title{font-size:clamp(2.4rem,4.4vw,3.8rem);line-height:.95;margin-top:.25rem}
body .ypr-sc__copy p{font-size:1.08rem;line-height:1.6;color:rgba(255,255,255,.92);max-width:42ch}
body .ypr-sc__points{list-style:none;margin:1.5rem 0 0;padding:0;display:grid;gap:10px;max-width:440px}
body .ypr-sc__points li{position:relative;margin:0;padding:12px 16px 12px 50px;border-radius:14px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);font-weight:600;line-height:1.35}
body .ypr-sc__points li::before{content:"";position:absolute;left:14px;top:50%;width:24px;height:24px;margin-top:-12px;border-radius:50%;
  background:#ECA803 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4L18 8' fill='none' stroke='%231a1306' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat}
body .ypr-sc__copy::after{content:"";display:block;max-width:440px;margin-top:26px;aspect-ratio:16/9;border-radius:18px;
  background:url("../img/ypr-merch-group.jpg.webp") center 30%/cover;box-shadow:0 18px 44px rgba(40,0,40,.3);border:4px solid rgba(255,255,255,.14)}

/* Right: a softer white card */
body .ypr-sc__card{border-radius:22px;padding:clamp(22px,3vw,36px);box-shadow:0 26px 60px rgba(40,0,40,.3)}
body .ypr-sc__form{gap:16px}
body .ypr-sc__form label,body .ypr-sc__via legend{font-size:.74rem;letter-spacing:.08em;color:#2c2a31}
body .ypr-sc__form input[type=text],body .ypr-sc__form input[type=email],body .ypr-sc__form input[type=tel],body .ypr-sc__phone select{
  margin-top:7px;border:1.5px solid #dcd8e0;border-radius:12px;padding:13px 14px;background:#faf9fb;transition:border-color .2s ease,box-shadow .2s ease,background .2s ease}
body .ypr-sc__form input[type=text]:hover,body .ypr-sc__form input[type=email]:hover,body .ypr-sc__form input[type=tel]:hover,body .ypr-sc__phone select:hover{border-color:#bdb7c5}
body .ypr-sc__form input:focus,body .ypr-sc__phone select:focus{outline:none;border-color:#B309AD;background:#fff;box-shadow:0 0 0 4px rgba(179,9,173,.16)}
body .ypr-sc__phone{margin-top:-6px}
body .ypr-sc__zip input{max-width:9em}

/* "How may we contact you?": three tiles in a row instead of three full-width bars */
body .ypr-sc__tiles{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
body .ypr-sc__tile{flex-direction:column;justify-content:flex-start;min-height:72px;border:1.5px solid #dcd8e0;border-radius:12px;background:#faf9fb;font-weight:700;text-align:center;padding:12px 6px 10px;gap:7px;line-height:1.15 !important;
  transition:border-color .2s ease,background .2s ease,color .2s ease,box-shadow .2s ease}
body .ypr-sc__tile:hover{border-color:#bdb7c5}
body .ypr-sc__tile:has(input:checked){border-color:#B309AD;background:#fbeefb;color:#7a0676;box-shadow:0 0 0 3px rgba(179,9,173,.12)}
body .ypr-sc__tile:has(input:focus-visible){outline:3px solid #ECA803;outline-offset:2px}
body .ypr-sc__via .ypr-sc__hint{margin-top:6px}

/* The button comes before the fine print */
body .ypr-sc__submit{order:10;width:100%;border-radius:999px;padding:16px 22px;font-size:1.3rem;box-shadow:0 12px 26px rgba(236,168,3,.38);transition:transform .15s ease,box-shadow .2s ease}
body .ypr-sc__submit:hover{transform:translateY(-2px);box-shadow:0 16px 32px rgba(236,168,3,.48)}
body .ypr-sc__submit:focus-visible{outline:3px solid #B309AD;outline-offset:3px}
body .ypr-sc__foot{order:11;margin-top:-6px}
body .ypr-sc__legal{order:12;font-size:.72rem;line-height:1.55;color:#6c6776}
body .ypr-sc__legal + .ypr-sc__legal{order:13;margin-top:-8px}
body .ypr-sc__legal a{color:#7a0676}

/* After sign-up */
body .ypr-sc__thanks{text-align:center;padding:24px 8px}
body .ypr-sc__thanks h3{font-size:2.2rem}

@media (max-width:820px){
  body .ypr-sc{grid-template-columns:1fr;border-radius:22px}
  body .ypr-sc__copy{position:static}
  body .ypr-sc__copy::after{display:none}
  body .ypr-sc__card{box-shadow:0 18px 40px rgba(40,0,40,.28)}
}
@media (max-width:420px){
  body .ypr-sc__tile{font-size:.86rem !important;padding:10px 4px 9px;min-height:68px}
}
@media (prefers-reduced-motion:reduce){body .ypr-sc__submit,body .ypr-sc__tile{transition:none}}