/* CLAUDE 10-05: the social logo links (socials.js). The logos are the Simple Icons SVGs in net-logos/ (CC0) used as
   masks, painted in each network's colour; shared by the app and ripclip.org. */
[data-socials] {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.soc {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--hair2, rgba(255, 255, 255, 0.14));
  background: rgba(255, 255, 255, 0.04);
  transition:
    background-color 160ms ease,
    transform 160ms ease;
}
.soc:hover {
  background: rgba(255, 255, 255, 0.1);
}
.soc:active {
  transform: scale(0.94);
}
.soc:focus-visible {
  outline: 2px solid var(--go, #53fc18);
  outline-offset: 2px;
}
.soc i {
  width: 17px;
  height: 17px;
  background: var(--c, #fff);
  -webkit-mask: var(--src) center / contain no-repeat;
  mask: var(--src) center / contain no-repeat;
}
.soc-tiktok i {
  --src: url('/net-logos/tiktok.svg');
  filter: drop-shadow(-1px -1px 0 #25f4ee) drop-shadow(1px 1px 0 #fe2c55);
}
.soc-threads i {
  --src: url('/net-logos/threads.svg');
}
.soc-instagram i {
  --src: url('/net-logos/instagram.svg');
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
}
.soc-x i {
  --src: url('/net-logos/x.svg');
}
.soc-youtube i {
  --src: url('/net-logos/youtube.svg');
  --c: #ff0033;
}
.soc-facebook i {
  --src: url('/net-logos/facebook.svg');
  --c: #0866ff;
}
/* the bottom of the dashboard's left bar, and the app's Contact page */
.nav-socials {
  margin: 0 0 14px;
}
.nav-socials .soc {
  width: 32px;
  height: 32px;
}
.nav-socials .soc i {
  width: 15px;
  height: 15px;
}
.page-socials {
  justify-content: center;
  margin-top: 14px;
}
/* the landing's Contact us block (app #lp and ripclip.org) */
.contact-us {
  max-width: 560px;
  margin: 0 auto;
  padding: clamp(48px, 8vw, 88px) 16px;
  text-align: center;
}
.contact-us h2 {
  margin: 0 0 10px;
  font-size: clamp(1.9rem, 4.5vw, 2.8rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.05;
}
.contact-us p {
  margin: 0 auto 22px;
  color: var(--soft, #b3b2bc);
  line-height: 1.55;
}
.contact-us [data-socials] {
  justify-content: center;
  gap: 12px;
  margin-top: 22px;
}
.contact-us .soc {
  width: 46px;
  height: 46px;
}
.contact-us .soc i {
  width: 21px;
  height: 21px;
}