/* ===== Adoption landing (scoped) ===== */
.extras-landing{ max-width:925px; margin:22px auto 28px; padding:0 16px; }
.extras-landing .intro{ text-align:center; max-width:62ch; margin:0 auto 18px; }
.extras-landing h2{ margin:0 0 10px; }

/* grid: 3 across on desktop, wrap down */
.extras-landing .extras-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(180px,1fr));
  gap:14px;
  margin-bottom:18px;
}
@media (min-width:900px){
  .extras-landing .extras-grid{ grid-template-columns: repeat(3, 1fr); }
}

/* whole tile clickable; dotted underline only on text when hovered */
.extras-landing .extras-card{
  display:grid; place-items:center; text-align:center;
  padding:18px 14px; border-radius:14px;
  background:#fcfcfb;
  border:1px solid rgba(167,124,207,.18);
  outline:1px solid rgba(0,0,0,.04);
  box-shadow:0 4px 12px rgba(70,56,104,.10);
  transition: transform .12s ease, box-shadow .18s ease;
  color:var(--text); text-decoration:none;
}
.extras-landing .extras-card:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 22px rgba(70,56,104,.16),
             0 0 0 3px rgba(90,201,180,.10) inset;
}
.extras-landing .extras-card i{
  font-size:1.25rem; color:#5ac9b4; margin-bottom:6px;
}
.extras-landing .extras-card .label{
  font-family:'Raleway',sans-serif; font-weight:700; letter-spacing:.04em;
  color:var(--text); text-transform:uppercase; text-decoration:none;
}
.extras-landing .extras-card:hover .label,
.extras-landing .extras-card:focus-visible .label{
  text-decoration-line:underline;
  text-decoration-style:dotted;
  text-underline-offset:6px;
  text-decoration-thickness:2px;
  color:var(--link-hover);
}

.coming-soon {
  position: relative;
  opacity: 0.95;
  pointer-events: none;
}

.ribbon {
  position: absolute;
  top: 10px;
  right: -30px;
  background: #cbb6f7; /* soft lilac */
  color: #fff;
  text-transform: uppercase;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 4px 40px;
  transform: rotate(35deg);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  letter-spacing: 0.8px;
  border-radius: 2px;
}