/* ===================================================
   SOCIALS PAGE — styles/socials.css
   All rules scoped to #r-socials to avoid conflicts
   =================================================== */

#r-socials{padding-top:120px}
#r-socials .ld-hero{padding-top:0;margin-top:0}

/* hero heading — serif, large, centered */
#r-socials h1{
  font-family:var(--serif);
  font-weight:330;
  font-size:clamp(40px,5vw,64px);
  line-height:1.04;
  letter-spacing:-.02em;
  max-width:820px;
  margin:20px auto 0;
}

/* green italic em in headings */
#r-socials h1 em,
#r-socials h2 em,
#r-socials h3 em{
  font-style:italic;
  color:var(--grn);
}

/* eyebrow label */
#r-socials .ey{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--grn);
  display:inline-flex;
  align-items:center;
  gap:8px;
}
#r-socials .ey::before{
  content:"";
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--grn);
  box-shadow:none;
}

/* subtitle */
#r-socials .sub{
  color:var(--mut);
  font-size:18px;
  max-width:560px;
  margin:20px auto 0;
  text-align:center;
}

/* CTA button — green filled */
#r-socials .btn{
  display:inline-flex;
  align-items:center;
  gap:9px;
  font-family:var(--mono);
  font-size:13px;
  background:var(--grn);
  color:#05130a;
  padding:11px 18px;
  border-radius:40px;
  font-weight:500;
  cursor:pointer;
  border:none;
  text-decoration:none;
}
#r-socials .btn:hover{opacity:.88}

/* inner section spacing */
#r-socials>section{
  border-top:none;
  padding:48px 0 80px;
}

/* platform cards grid — 5 cards wrapping into 3+2 layout */
#r-socials .pcards{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
}

/* card — override old horizontal-list pcard style */
#r-socials .pcard{
  background:linear-gradient(180deg,#10161d,#0c1116) !important;
  border:1px solid var(--line2) !important;
  border-right:1px solid var(--line2) !important;
  border-radius:18px !important;
  padding:30px !important;
  cursor:pointer;
  transition:border-color .2s;
}
#r-socials .pcard:hover{
  border-color:var(--grn) !important;
}
#r-socials .pcard .pn{
  font-family:var(--mono);
  font-size:12px;
  color:var(--grn);
  letter-spacing:.12em;
  display:flex;
  align-items:center;
  gap:6px;
}
#r-socials .pcard h3{
  font-family:var(--serif);
  font-weight:400;
  font-size:24px;
  line-height:1.15;
  margin:14px 0 10px;
  color:var(--tx);
}
#r-socials .pcard p{
  color:var(--mut);
  font-size:15px;
  line-height:1.5;
  min-height:0;
}
#r-socials .pcard .go{
  margin-top:18px;
  font-family:var(--mono);
  font-size:12px;
  color:var(--grn);
  display:block;
}

/* platform icon dot inside .pn */
#r-socials .pcard .pn .g{
  width:18px;
  height:18px;
  border-radius:4px;
  background:rgba(233,240,244,.08);
  border:1px solid var(--line);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}

/* socchip rows (if used in sub-sections) */
#r-socials .socrow{display:flex;gap:14px;flex-wrap:wrap;margin-top:8px}
#r-socials .socchip{display:flex;align-items:center;gap:10px;padding:14px 20px;border:1px solid var(--line);border-radius:14px;background:var(--bg2);cursor:pointer}
#r-socials .socchip:hover{border-color:var(--grn)}
#r-socials .socchip .g{width:26px;height:26px;border-radius:8px;background:rgba(233,240,244,.06);border:1px solid var(--line);display:grid;place-items:center}
#r-socials .socchip .g svg{width:14px;height:14px;fill:var(--mut)}
#r-socials .socchip b{font-size:14px;font-weight:500}

@media(max-width:820px){
  #r-socials .pcards{grid-template-columns:1fr}
}

/* individual platform pages — nav clearance handled by inline CSS (padding-top:120px !important) */