soulmate-mobile-social-follow {
  display: block;
  padding: 18px max(16px, env(safe-area-inset-right)) 44px max(16px, env(safe-area-inset-left));
  background: var(--page-background);
  color: var(--page-text);
  overflow-x: clip;
}

soulmate-mobile-social-follow *,
soulmate-mobile-social-follow *::before,
soulmate-mobile-social-follow *::after { box-sizing: border-box; }

.sm-social-card { width: 100%; max-width: 1200px; margin-inline: auto; }
.sm-social-copy { max-width: 64ch; margin-bottom: 20px; }
.sm-social-eyebrow {
  margin: 0 0 8px;
  color: var(--brand-pink);
  font: 700 .7rem/1.3 var(--font-primary);
  letter-spacing: .18em;
}
.sm-social-card h2 {
  margin: 0;
  color: var(--page-text);
  font: 750 clamp(1.55rem, 6vw, 2.1rem)/1.12 var(--font-primary);
  letter-spacing: -.035em;
  text-wrap: balance;
}
.sm-social-description {
  max-width: 48ch;
  margin: 10px 0 0;
  color: var(--page-muted);
  font: 400 clamp(.89rem, 2.5vw, 1rem)/1.5 var(--font-primary);
}

.sm-social-links { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.sm-social-link {
  --social-accent: 216 129 196;
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  width: 100%;
  height: clamp(200px, 55vw, 240px);
  min-width: 0;
  overflow: hidden;
  padding: 20px;
  border: 1px solid rgb(var(--social-accent) / .31);
  border-radius: 23px;
  background: radial-gradient(ellipse at 83% 42%, rgb(141 72 137 / .24), transparent 55%),
    linear-gradient(135deg, #21182b, #171321 58%, #251927);
  box-shadow: inset 0 1px rgb(255 255 255 / .13), 0 16px 34px rgb(0 0 0 / .16);
  color: #fbf6fc;
  font-family: var(--font-primary);
  text-align: left;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform 320ms ease, border-color 320ms ease, box-shadow 320ms ease, opacity 480ms ease;
}
.sm-social-link--tiktok {
  --social-accent: 102 206 223;
  background: radial-gradient(ellipse at 76% 27%, rgb(45 170 186 / .18), transparent 47%),
    radial-gradient(ellipse at 96% 80%, rgb(184 75 146 / .13), transparent 45%),
    linear-gradient(135deg, #15212b, #141923 62%, #251927);
}
.sm-social-link::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg, rgb(255 255 255 / .08), transparent 34%);
}
.sm-social-link::after {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(0deg, rgb(10 8 18 / .35), transparent 65%);
}
.sm-social-link-glow {
  position: absolute;
  z-index: -1;
  width: 63%;
  aspect-ratio: 1;
  right: -12%;
  top: -32%;
  border-radius: 50%;
  background: rgb(var(--social-accent) / .19);
  filter: blur(65px);
  pointer-events: none;
  transition: opacity 320ms ease;
}
.sm-social-link-mark {
  position: absolute;
  z-index: -1;
  width: clamp(155px, 36vw, 215px);
  height: auto;
  top: 50%;
  right: 4%;
  color: rgb(245 204 237 / .23);
  transform: translateY(-50%);
  filter: drop-shadow(0 0 26px rgb(var(--social-accent) / .18));
  pointer-events: none;
  transition: transform 320ms ease;
}
.sm-social-link--tiktok .sm-social-link-mark {
  color: rgb(218 246 250 / .25);
  filter: drop-shadow(-5px 0 0 rgb(70 208 227 / .14)) drop-shadow(5px 0 0 rgb(222 77 158 / .13));
}
.sm-social-link-copy { display: grid; justify-items: start; gap: 9px; min-width: 0; position: relative; }
.sm-social-link-heading { display: inline-flex; align-items: center; gap: 10px; }
.sm-social-link-icon { width: 29px; height: 29px; flex: none; }
.sm-social-link-name { font-size: clamp(1.12rem, 4vw, 1.52rem); font-weight: 800; line-height: 1.1; letter-spacing: .045em; }
.sm-social-link-handle { font-size: .91rem; font-weight: 500; line-height: 1.3; color: rgb(255 255 255 / .82); overflow-wrap: anywhere; }
.sm-social-link-action {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  margin-top: 8px;
  padding: 10px 16px;
  border: 1px solid rgb(255 255 255 / .28);
  border-radius: 999px;
  background: rgb(255 255 255 / .11);
  color: #fff;
  font-size: .84rem;
  font-weight: 700;
  line-height: 1.15;
  white-space: nowrap;
  backdrop-filter: blur(12px);
}
.sm-social-link-action span { display: inline-block; transition: transform 320ms ease; }
.sm-social-link:focus-visible { outline: 3px solid var(--brand-cyan); outline-offset: 4px; }
.sm-social-link:active { transform: translateY(1px); }

:root[data-theme="light"] .sm-social-link {
  background: radial-gradient(ellipse at 84% 40%, rgb(199 112 173 / .17), transparent 55%),
    linear-gradient(135deg, #f6edf5, #eee8f1 60%, #f7eef5);
  box-shadow: inset 0 1px rgb(255 255 255 / .9), 0 16px 32px rgb(65 35 67 / .1);
  color: #302537;
}
:root[data-theme="light"] .sm-social-link--tiktok {
  background: radial-gradient(ellipse at 77% 32%, rgb(95 193 208 / .16), transparent 50%),
    radial-gradient(ellipse at 95% 81%, rgb(194 94 151 / .1), transparent 45%),
    linear-gradient(135deg, #edf3f5, #e9eff2 60%, #f4eaf0);
}
:root[data-theme="light"] .sm-social-link::before {
  background: linear-gradient(115deg, rgb(255 255 255 / .7), transparent 37%);
}
:root[data-theme="light"] .sm-social-link::after { background: linear-gradient(0deg, rgb(163 127 165 / .06), transparent 65%); }
:root[data-theme="light"] .sm-social-link-mark { color: rgb(132 64 121 / .2); }
:root[data-theme="light"] .sm-social-link--tiktok .sm-social-link-mark { color: rgb(56 109 124 / .21); }
:root[data-theme="light"] .sm-social-link-handle { color: #655369; }
:root[data-theme="light"] .sm-social-link-action { color: #302537; background: rgb(255 255 255 / .55); border-color: rgb(85 55 95 / .16); }

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .sm-social-link:hover { transform: translateY(-4px); border-color: rgb(var(--social-accent) / .65); box-shadow: inset 0 1px rgb(255 255 255 / .15), 0 22px 42px rgb(0 0 0 / .2); }
  .sm-social-link:hover .sm-social-link-mark { transform: translateY(-50%) scale(1.04); }
  .sm-social-link:hover .sm-social-link-glow { opacity: .72; }
  .sm-social-link:hover .sm-social-link-action span { transform: translateX(4px); }
}

@media (prefers-reduced-motion: no-preference) {
  soulmate-mobile-social-follow[data-pending] .sm-social-copy { opacity: 0; transform: translateY(12px); }
  soulmate-mobile-social-follow[data-pending] .sm-social-link--instagram { opacity: 0; transform: translateX(-10px); }
  soulmate-mobile-social-follow[data-pending] .sm-social-link--tiktok { opacity: 0; transform: translateX(10px); }
  .sm-social-copy { transition: opacity 600ms ease, transform 600ms cubic-bezier(.2,.7,.2,1); }
  soulmate-mobile-social-follow[data-revealed] .sm-social-link--instagram { transition-delay: 70ms; }
  soulmate-mobile-social-follow[data-revealed] .sm-social-link--tiktok { transition-delay: 140ms; }
}

@media (prefers-reduced-motion: reduce) {
  .sm-social-copy, .sm-social-link, .sm-social-link-mark, .sm-social-link-glow, .sm-social-link-action span { transition: none; }
}

@media (min-width: 600px) and (max-width: 1023px) {
  .sm-social-link { height: clamp(260px, 34vw, 300px); }
  .sm-social-link-mark { width: clamp(215px, 32vw, 270px); }
}

@media (min-width: 1024px) {
  soulmate-mobile-social-follow { padding: 28px 32px 64px; }
  .sm-social-copy { max-width: none; margin-bottom: 26px; }
  .sm-social-card h2 { font-size: clamp(2rem, 3.1vw, 2.7rem); }
  .sm-social-links { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
  .sm-social-link { height: clamp(300px, 23vw, 340px); padding: 27px; border-radius: 26px; }
  .sm-social-link-mark { width: clamp(205px, 18vw, 270px); right: 5%; }
  .sm-social-link-name { font-size: clamp(1.45rem, 2vw, 1.85rem); }
}