/* ============================================================
   FRND — Contact Us  (frnd-contact.html → published as contact.html
   · Figma "CONTACT · FINAL" desktop 1230:6149 / mobile 1230:6305)
   Rides on the Trust & Safety page: the same split pink hero
   (.shero) and the same sticker cards (.scard), plus an email line
   and two actions per card. Copy = the Interact contact page.
   ============================================================ */

/* ── 01 / HERO — same frame as safety, longer headline ─────── */
.chero__h1{ font-size:calc(88 * var(--s)); line-height:.98; }
.chero__env{ left:calc(860 * var(--s)); top:calc(190 * var(--s)); width:calc(500 * var(--s)); }

/* ── 02 / CONTACT CARDS ───────────────────────────────────── */
.ccard__e{
  margin:calc(18 * var(--s)) calc(12 * var(--s)) 0;
  font-family:var(--display); font-weight:900;
  font-size:calc(30 * var(--s)); line-height:1.15; letter-spacing:-.02em;
  color:var(--pink); text-decoration:none; word-break:break-word;
  align-self:flex-start;
}
.ccard__e:hover{ text-decoration:underline; text-underline-offset:.14em; text-decoration-thickness:.08em; }
.ccard__acts{
  margin:calc(22 * var(--s)) calc(12 * var(--s)) 0;
  display:flex; flex-wrap:wrap; gap:calc(12 * var(--s));
}
.cbtn{
  display:inline-flex; align-items:center; justify-content:center; gap:calc(8 * var(--s));
  min-height:max(44px, calc(52 * var(--s)));
  padding:0 calc(26 * var(--s));
  border-radius:999px; border:0; cursor:pointer;
  font-family:inherit; font-weight:800; font-size:max(14px, calc(16 * var(--s))); letter-spacing:-.01em;
  text-decoration:none; white-space:nowrap;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), background .2s ease, color .2s ease;
}
.cbtn--ink{ background:var(--ink); color:#fff; box-shadow:0 calc(5 * var(--s)) 0 var(--pink); }
.cbtn--ink:hover{ transform:translateY(calc(-2 * var(--s))); box-shadow:0 calc(8 * var(--s)) 0 var(--pink); }
.cbtn--ghost{ background:transparent; color:var(--ink); box-shadow:inset 0 0 0 calc(2.5 * var(--s)) var(--ink); }
.cbtn--ghost:hover{ background:var(--ink); color:#fff; }
.cbtn--ghost.is-done{ background:var(--ink); color:#fff; }
.cbtn:focus-visible{ outline:3px solid var(--pink); outline-offset:3px; }

/* ── mobile ─────────────────────────────────────────────────── */
@media (max-width:1040px){
  .chero__h1{ font-size:clamp(34px, 10.4vw, 48px); line-height:1; }
  .chero__env{ left:auto; top:auto; width:min(300px, 78vw); }
  .ccard__e{ margin:14px 8px 0; font-size:22px; }
  .ccard__acts{ margin:16px 8px 0; flex-direction:column; gap:10px; }
  .cbtn{ width:100%; min-height:48px; font-size:15px; padding:0 20px; white-space:normal; text-align:center; }
  .cbtn--ink{ box-shadow:0 4px 0 var(--pink); }
  .cbtn--ghost{ box-shadow:inset 0 0 0 2px var(--ink); }
}

/* The footer's "Careers" on every FRND page deep-links to this card. Without
   a scroll margin the browser puts its top edge exactly at the viewport top,
   where the floating nav pill then covers it — measured 22px under. */
.ccard[id]{ scroll-margin-top:calc(120 * var(--s)); }
@media (max-width:1040px){
  .ccard[id]{ scroll-margin-top:92px; }
}