/*********************** <!--Form styles--> **************/
.subscribe-wrapper {
    border:1px solid #e5e7eb; 
    border-radius: var(--border-radius-lg);
    padding: 1em;

}


.perks-wrapper {
    display: flex;
    flex-direction: column;
    gap: 1em;
    margin-bottom: 2em;
}


/* Grid Logic */
.perks-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}

/* Bento-style highlighting */
.perk-card.featured {
  grid-column: span 2;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(192, 132, 252, 0.1));
  border: 1px solid rgba(99, 102, 241, 0.3);
}








form {
    max-width: 800px; 
    margin: .5em auto;
    
}

.grid{
  display:grid; gap:20px;
  grid-template-columns:1fr;
}


fieldset{
  border:1px solid #e5e7eb; border-radius: var(--border-radius); padding:16px; margin:15px 0 0 0;
}
legend{ padding:0 ; font-weight:500; color:#0f172a; }

label{ display:block; font-weight:500; margin: 15px 10px 5px 10px; }
.muted{ color:#6b7280; font-weight:400; font-size:.92rem; }

input[type="text"], input[type="email"], input[type="tel"], select, textarea{
  width:100%; padding:12px 14px; border:1px solid #cbd5e1; border-radius: 8px;
  font:inherit; color:inherit; background:#fff;
  outline:none; transition:border .15s, box-shadow .15s; height: 3em;
}
textarea{ min-height:110px; resize:vertical; }

input:focus, select:focus, textarea:focus{
  border-color:#9723ad;
  box-shadow:0 0 0 3px color-mix(in srgb, #93c5fd 40%, transparent);
}

.row{ display:flex; gap:12px; flex-wrap:wrap; }
.chip{
  display:inline-flex; align-items:center; gap:10px;
  border:1px solid #cbd5e1; padding:10px 12px; border-radius: 18px;
  cursor:pointer; user-select:none; background:#fff;
}
.chip input{ accent-color:#9723ad; }

 .help{ font-size:.9rem; color:#6b7280; margin-top:6px; }

.actions{
  display:flex; gap:12px; align-items:center; margin-top:8px;
}


/* tiny “required” dot */
.req::after{
  content:"*"; color:#dc2626; margin-left:6px; font-weight:900;
}



@media (min-width:768px){
  .grid.two{ grid-template-columns:1fr 1fr; }
  .perks-wrapper {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }
    .perks-wrapper > * {
        flex: 1;
    }
    .perks-wrapper div {
        margin-top: 1em;
    }
}