/* ==========================================================================
   B VISUAL — social.css  (/social-media)
   Dark page, two light moments: the hero's post card and the audience
   panel, both on --stock. The two photographs were shot on white, so they
   are multiplied into that paper and have no visible edge.
   ========================================================================== */

/* --- Shared ------------------------------------------------------------- */
.so-hero .label, .so-feed .label, .so-proof .label, .so-wall .label,
.so-incl .label, .so-how .label, .so-faq .label { color: var(--mute); }
.so-feed .t-head, .so-proof .t-head, .so-wall .t-head, .so-incl .t-head,
.so-how .t-head, .so-faq .t-head { margin-top: var(--s3); color: var(--paper); }

/* --- 1. Hero ------------------------------------------------------------ */
.so-hero {
  position: relative;
  min-height: min(100svh, 64rem);
  padding: calc(var(--nav-h) + var(--s6)) 0 var(--s10);
  display: flex; align-items: center;
  background: var(--surface-plum), var(--ink);
  overflow: hidden;
}
.so-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  align-items: center;
  gap: clamp(2rem, 6vw, 6rem);
  width: 100%;
}
/* Sized to its column (and capped by height) so "STOP THE" holds one line
   and the intro and buttons stay above the fold. */
.so-hero__title { margin-top: var(--s5); color: var(--paper); font-size: min(clamp(3.2rem, 7.6vw, 8rem), 13.5vh); }
.so-hero__sub { margin-top: var(--s6); color: var(--bone); }
.so-hero__actions { margin-top: var(--s8); display: flex; flex-wrap: wrap; gap: var(--s3); }

.so-hero__stage { position: relative; justify-self: center; width: min(100%, 27rem); }

/* The post: a light card with a little app chrome around the photo. */
.so-post {
  margin: 0;
  position: relative;
  background: var(--stock);
  color: #131317;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 50px 120px -40px rgba(0, 0, 0, .9), 0 0 0 1px rgba(255, 255, 255, .06);
  rotate: 2deg;
  transition: rotate .8s var(--e-out);
}
.so-hero__stage:hover .so-post { rotate: 0deg; }
.so-post__bar { display: flex; align-items: center; gap: 10px; padding: 12px 14px; }
.so-post__avatar {
  width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--ink);
  box-shadow: 0 0 0 2px var(--stock), 0 0 0 3.5px var(--lime);
}
.so-post__avatar img { width: 17px; height: 17px; }
.so-post__who { display: grid; line-height: 1.15; font-size: .8rem; }
.so-post__who b { font-weight: 800; }
.so-post__who i { font-style: normal; color: #6c6c72; font-size: .72rem; }
.so-post__dots { margin-left: auto; display: flex; gap: 3px; }
.so-post__dots i { width: 4px; height: 4px; border-radius: 50%; background: #131317; }
.so-post__media { aspect-ratio: 1122 / 1240; overflow: hidden; }
.so-post__media img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 0;
  mix-blend-mode: multiply;            /* the white studio floor becomes the card */
}
.so-post__actions { display: flex; gap: 14px; padding: 12px 14px 14px; }
.so-post__actions svg { width: 22px; height: 22px; fill: none; stroke: #131317; stroke-width: 1.7; stroke-linejoin: round; stroke-linecap: round; }
.so-post__actions .so-post__save { margin-left: auto; }

/* Notifications landing around the phone. */
.so-chips { position: absolute; inset: 0; pointer-events: none; }
.so-chip {
  position: absolute;
  display: flex; align-items: center; gap: 9px;
  padding: 10px 14px 10px 10px;
  border-radius: var(--r-pill);
  background: rgba(22, 22, 24, .82);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
          backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 20px 40px -18px rgba(0, 0, 0, .8);
  color: var(--bone);
  font-size: .82rem;
  white-space: nowrap;
  translate: var(--px, 0) var(--py, 0);
}
.so-chip b { color: var(--paper); font-weight: 800; }
.so-chip svg {
  flex: none; width: 28px; height: 28px; padding: 6px; border-radius: 50%;
  background: var(--lime); fill: none; stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round;
}
.so-chip--a { top: 18%; right: -12%; }
.so-chip--b { top: 44%; left: -18%; }
.so-chip--c { top: 63%; right: -16%; }
.so-chip--d { bottom: 8%; left: -10%; }
/* Before social.js lands them; no JS, no motion: they simply show. */
[data-motion="on"] .so-chip { opacity: 0; }

/* --- 2. Band ------------------------------------------------------------ */
.so-band { border-block: var(--hairline); padding-block: var(--s4); overflow: hidden; }
.so-band__marquee { display: flex; }
.so-band .marquee__track { gap: var(--s5); padding-right: var(--s5); }
.so-band span {
  font-size: clamp(2.4rem, 6vw, 5.5rem); font-weight: var(--w-max);
  line-height: 1; letter-spacing: -.03em; text-transform: uppercase; color: var(--paper);
}
.so-band .so-band__hollow { color: var(--steel); }   /* not text-stroke: it seams inside Outfit's overlapping glyphs */
.so-band i { font-style: normal; color: var(--lime); font-size: clamp(1.4rem, 3vw, 2.6rem); }

/* --- 3. Feed ------------------------------------------------------------ */
.so-feed { position: relative; padding-block: var(--section); }
.so-feed__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "head phone" "steps phone";
  column-gap: clamp(2rem, 7vw, 7rem);
  align-items: start;
}
.so-feed__head { grid-area: head; }
.so-steps { grid-area: steps; margin-top: var(--s8); display: grid; gap: var(--s3); max-width: 34rem; }
.so-step {
  position: relative;
  padding: var(--s3) 0 var(--s3) var(--s6);
  border-left: 2px solid var(--hair);
  transition: border-color .5s var(--e-out), opacity .5s var(--e-out);
}
.so-step__n { position: absolute; left: var(--s2); top: calc(var(--s3) + .35em); color: var(--mute); }
.so-step h3 { color: var(--paper); font-weight: var(--w-max); }
.so-step p { margin-top: var(--s1); color: var(--bone); }
.so-step.is-on { border-left-color: var(--lime); }
.so-step.is-on .so-step__n { color: var(--lime); }

.so-phone { grid-area: phone; justify-self: center; }
.so-phone__screen {
  position: relative;
  width: clamp(15rem, 22vw, 19rem);
  aspect-ratio: 9 / 19;
  border-radius: 42px;
  background: #050506;
  box-shadow: 0 0 0 10px #18181b, 0 0 0 11px rgba(255, 255, 255, .12), 0 60px 120px -40px rgba(0, 0, 0, .9);
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  outline: none;
}
.so-phone__screen::-webkit-scrollbar { display: none; }
.so-phone__screen:focus-visible { box-shadow: 0 0 0 10px #18181b, 0 0 0 12px var(--lime); }
.so-phone__top {
  position: sticky; top: 0; z-index: 2;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 18px 10px;
  background: linear-gradient(#050506 70%, rgba(5, 5, 6, 0));
  color: var(--paper); font-size: .95rem;
}
.so-phone__top span { width: 56px; height: 18px; border-radius: 10px; background: #18181b; position: absolute; left: 50%; top: 10px; translate: -50% 0; }
.so-phone__feed { display: grid; gap: 14px; padding: 4px 0 24px; }
.so-fp p { display: flex; align-items: center; gap: 8px; padding: 0 12px 8px; color: var(--bone); font-size: .75rem; font-weight: 600; }
.so-fp p i { width: 20px; height: 20px; border-radius: 50%; background: var(--grad-brand); box-shadow: 0 0 0 1.5px #050506, 0 0 0 2.5px var(--lime); }
.so-fp img { display: block; width: 100%; height: auto; }

/* JS on, wide screens: the stage sticks while the page scrolls the feed. */
.so-feed.is-scrub { padding-block: 0; height: 320vh; }
.so-feed.is-scrub .so-feed__pin {
  position: sticky; top: 0;
  height: 100vh; height: 100svh;
  display: flex; align-items: center;
  padding-top: var(--nav-h);
}
.so-feed.is-scrub .so-feed__grid { align-items: center; }
.so-feed.is-scrub .so-steps { margin-top: var(--s6); gap: 0; }
/* The stage has one screen to fit in: only the lit chapter opens its text. */
.so-feed.is-scrub .so-step p { max-height: 0; opacity: 0; overflow: hidden; transition: max-height .6s var(--e-out), opacity .45s var(--e-out); }
.so-feed.is-scrub .so-step.is-on p { max-height: 7em; opacity: 1; }
.so-feed.is-scrub .so-step:not(.is-on) { opacity: .42; }
/* The phone takes the screen's height, not a share of its width. */
.so-feed.is-scrub .so-phone__screen {
  overflow: hidden;
  width: auto;
  height: min(calc(100svh - var(--nav-h) - 7rem), 42rem);
}
/* The strip of posts keeps its own GPU layer for good. Promoted only while
   the scrub was moving, it was repainted and snapped to the pixel grid each
   time the scroll settled: the stutter, and the jump. */
.so-feed.is-scrub .so-phone__feed { will-change: transform; backface-visibility: hidden; }
/* Phones: the feed drifts on its own; no sticky stage. */
.so-feed.is-drift .so-phone__screen { overflow: hidden; }
.so-feed.is-drift .so-phone__feed { animation: so-drift 38s linear infinite; }
@keyframes so-drift { to { transform: translateY(-50%); } }

/* --- 4. Proof ----------------------------------------------------------- */
.so-proof { border-top: var(--hairline); }
.so-proof__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.so-proof__copy > .t-body { margin-top: var(--s5); color: var(--bone); }
.so-stats { margin-top: var(--s8); display: grid; grid-template-columns: 1fr 1fr; gap: var(--s5); }
.so-stats div { display: flex; flex-direction: column-reverse; gap: var(--s2); border-top: 2px solid var(--lime); padding-top: var(--s3); }
.so-stats dd { margin: 0; color: var(--paper); font-size: clamp(3rem, 7vw, 6rem); letter-spacing: -.04em; }
.so-stats dt { color: var(--mute); }
.so-proof__src { margin-top: var(--s4); color: var(--mute); }
.so-proof__phones { display: flex; justify-content: center; gap: clamp(.6rem, 1.6vw, 1.25rem); }
.so-mini { margin: 0; flex: 1 1 0; max-width: 12rem; border-radius: 18px; overflow: hidden; box-shadow: 0 0 0 1px var(--hair), 0 40px 80px -40px rgba(0, 0, 0, .9); }
.so-mini:nth-child(2) { translate: 0 -8%; }
.so-mini img { display: block; width: 100%; height: auto; }

/* --- 5. Audience (light) ------------------------------------------------ */
.so-crowd {
  background: var(--stock);
  color: #131317;
  padding-top: var(--section);
  padding-bottom: var(--section);
  overflow: hidden;
}
.so-crowd__label { color: #6c6c72; }
.so-crowd__title { margin-top: var(--s4); color: #131317; font-size: clamp(2.9rem, 8.2vw, 8.5rem); }
.so-crowd__mark {
  background: linear-gradient(var(--lime), var(--lime)) no-repeat 0 62% / 100% 46%;
  padding-inline: .06em; margin-inline: -.06em;
}
/* The blend sits on the figure, not the img: the mask reveal gives the
   figure its own stacking context, so a blend on the img only met the
   figure's empty backdrop and the studio white showed as a box. */
.so-crowd__media {
  margin: clamp(-2rem, -3vw, -1rem) auto 0; max-width: 1500px; mix-blend-mode: multiply;
  /* The studio backdrop greys off slightly at its top and sides; fade those
     edges so no line marks where the photo begins. */
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 86%, transparent), linear-gradient(to right, transparent, #000 3%, #000 97%, transparent);
  -webkit-mask-composite: source-in;
          mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 86%, transparent), linear-gradient(to right, transparent, #000 3%, #000 97%, transparent);
          mask-composite: intersect;
}
.so-crowd__media img { display: block; width: 100%; height: auto; }
/* The close: a ruled two-part statement, the answer marked in neon. */
.so-crowd__outro {
  position: relative;               /* above the photo's faded floor, which it tucks into */
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); gap: var(--s5);
  margin-top: clamp(-4.5rem, -5vw, -1rem); padding-top: var(--s5);
  border-top: 1px solid rgba(19,19,23,.14);
}
.so-crowd__q { margin: .55em 0 0; color: #6c6c72; }
.so-crowd__sub {
  margin: 0;
  font-size: clamp(1.6rem, 2.9vw, 3rem); font-weight: var(--w-max);
  line-height: 1.1; letter-spacing: -.025em;
}
.so-crowd__sub > span { display: block; text-wrap: balance; }
.so-crowd__l1 { color: #8d8d93; }
.so-crowd__l2 { color: #131317; }

/* --- 6. Wall ------------------------------------------------------------ */
.so-wall__head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s5); margin-bottom: var(--s8); }
.so-wall__link { color: var(--paper); white-space: nowrap; }
.so-wall__link:hover { color: var(--lime); }
.so-wall__row { display: flex; }
.so-wall__row + .so-wall__row { margin-top: 16px; }
.so-wall .marquee__track { gap: 16px; padding-right: 16px; }
.so-wall__row img {
  display: block; height: clamp(13rem, 22vw, 20rem); width: auto;
  border-radius: 14px; box-shadow: 0 0 0 1px var(--hair);
  transition: scale .5s var(--e-out);
}
.so-wall__row img:hover { scale: 1.03; }

/* --- 7. Included -------------------------------------------------------- */
.so-incl { border-top: var(--hairline); }
.so-incl__grid { margin-top: var(--s10); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--hair); border: var(--hairline); }
.so-card { background: var(--ink); padding: clamp(1.5rem, 3vw, 2.75rem); min-height: 15rem; display: flex; flex-direction: column; gap: var(--s2); transition: background-color .5s var(--e-out); }
.so-card:hover { background: var(--ink-lift); }
.so-card__n { color: var(--lime); margin-bottom: auto; padding-bottom: var(--s6); }
.so-card h3 { color: var(--paper); font-weight: var(--w-max); }
.so-card p { color: var(--bone); }

/* --- 8. How ------------------------------------------------------------- */
.so-how__list { margin-top: var(--s10); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1.25rem, 3vw, 2.5rem); counter-reset: so; }
.so-how__list li { border-top: var(--hairline); padding-top: var(--s4); }
.so-how__n { display: block; font-size: clamp(2.6rem, 4.5vw, 4rem); font-weight: var(--w-max); line-height: 1; letter-spacing: -.04em; color: var(--lime); }
.so-how__list h3 { margin-top: var(--s4); color: var(--paper); font-weight: var(--w-max); }
.so-how__list p { margin-top: var(--s2); color: var(--bone); }

/* --- 9. FAQ ------------------------------------------------------------- */
.so-faq__grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.so-q { border-bottom: var(--hairline); }
.so-q:first-child { border-top: var(--hairline); }
.so-q summary {
  list-style: none; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: var(--s4);
  padding: var(--s4) 0;
  color: var(--paper); font-size: var(--t-sub); font-weight: var(--w-mid); line-height: var(--lh-sub);
}
.so-q summary::-webkit-details-marker { display: none; }
.so-q summary::after {
  content: ""; flex: none; width: 14px; height: 14px;
  background: linear-gradient(var(--lime), var(--lime)) center / 100% 2px no-repeat,
              linear-gradient(var(--lime), var(--lime)) center / 2px 100% no-repeat;
  transition: rotate .4s var(--e-out);
}
.so-q[open] summary::after { rotate: 45deg; }
.so-q summary:focus-visible { outline: 2px solid var(--lime); outline-offset: 4px; }
.so-q p { padding: 0 0 var(--s5); color: var(--bone); max-width: var(--measure); }

/* --- Responsive --------------------------------------------------------- */
@media (max-width: 1000px) {
  .so-incl__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .so-how__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .so-hero__grid { grid-template-columns: 1fr; }
  .so-hero__stage { width: min(100%, 22rem); margin-top: var(--s4); }
  .so-chip--a { right: -4%; } .so-chip--b { left: -6%; } .so-chip--c { right: -6%; } .so-chip--d { left: -2%; }
  .so-feed__grid { grid-template-columns: 1fr; grid-template-areas: "head" "phone" "steps"; }
  .so-phone { margin-top: var(--s8); }
  .so-proof__grid, .so-faq__grid { grid-template-columns: 1fr; }
  .so-crowd__outro { grid-template-columns: 1fr; gap: var(--s2); }
  .so-crowd__q { margin-top: 0; }
}
@media (max-width: 600px) {
  .so-incl__grid, .so-how__list { grid-template-columns: 1fr; }
  .so-card { min-height: 0; }
  .so-wall__head { flex-direction: column; align-items: flex-start; }
  .so-chip { font-size: .74rem; padding: 8px 12px 8px 8px; }
  .so-chip svg { width: 24px; height: 24px; padding: 5px; }
}
@media (prefers-reduced-motion: reduce) {
  .so-post { rotate: 0deg; transition: none; }
  .so-feed.is-drift .so-phone__feed { animation: none; }
  .so-wall__row img { transition: none; }
}