/* /services/influencer-marketing. Typography, buttons, eyebrows and sections come from
   represent-studio.css; this file only adds what the page has that the site doesn't. */

.im-white { background-color: var(--swatch--light-100); }
.im-card { background-color: var(--swatch--light-100); border-radius: 1.25rem; padding: 1.75rem; display: flex; flex-direction: column; gap: .75rem; }
.im-white .im-card, .im-panel { background-color: var(--swatch--brand-500); }
.im-card.dark-section { background-color: var(--swatch--dark-900); }
.im-stack-v { display: flex; flex-direction: column; gap: 1.5rem; }
.im-split { display: grid; gap: 3rem; align-items: center; }
@media (min-width: 992px) { .im-split { grid-template-columns: 1fr 1fr; gap: 4rem; } }

/* Section head: heading left, lead right */
.im-head { display: flex; flex-direction: column; gap: 1.25rem; }
.im-head-row { display: grid; gap: 1.25rem; align-items: end; }
@media (min-width: 992px) { .im-head-row { grid-template-columns: 1.1fr 1fr; } }

/* A simplified X post, used across the page */
.im-tw { display: flex; flex-direction: column; gap: .75rem; padding: 1rem 1.125rem; border-radius: var(--radius--main); background: var(--swatch--light-100); color: var(--swatch--dark-900); text-decoration: none; font-size: .9375rem; line-height: 1.4; }
a.im-tw { transition: transform .3s ease; }
a.im-tw:hover { transform: translateY(-3px); }
.im-tw-head { display: flex; gap: .625rem; align-items: center; }
.im-tw-head img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: none; }
.im-tw-head img.is-logo { object-fit: contain; background: var(--swatch--brand-500); padding: 6px; }
.im-tw-head p { line-height: 1.25; }
.im-tw-head span { color: #5c5c66; }
.im-tw-head svg { width: 16px; height: 16px; vertical-align: -3px; }
.im-tw-text { white-space: normal; }
.im-tw-media { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: .75rem; }
.im-tw-metrics { display: flex; justify-content: space-between; color: #5c5c66; font-size: .8125rem; }
.im-tw-metrics span { display: inline-flex; align-items: center; gap: .3rem; }
.im-tw-metrics svg { width: 17px; height: 17px; }
.im-tw-metrics b { font-weight: 500; font-variant-numeric: tabular-nums; }
.im-tw-metrics.is-big { font-size: 1.125rem; color: var(--swatch--dark-900); }
.im-tw-metrics.is-big svg { width: 22px; height: 22px; }

.im-hero { padding-top: 11rem; }

/* Hero: launch posts rotate, creators repost around them */
.im-orbit { position: relative; padding: 3.5rem 3.5rem; }
.im-posts { position: relative; z-index: 2; display: grid; max-width: 30rem; margin: 0 auto; }
.im-posts .im-tw { grid-area: 1 / 1; opacity: 0; transform: translateY(16px) scale(.98); transition: opacity .6s ease, transform .6s ease; }
.im-posts .im-tw.is-on { opacity: 1; transform: none; }
.im-posts .im-tw-text { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.im-orbit-face { position: absolute; z-index: 3; width: 64px; height: 64px; translate: -50% -50%; opacity: 0; scale: .4; transition: opacity .4s ease, scale .45s cubic-bezier(.3, 1.6, .5, 1); transition-delay: calc(var(--i) * 180ms + 500ms); }
.im-orbit-face.is-back { z-index: 1; width: 52px; height: 52px; }
.im-orbit-face img { display: block; width: 100%; height: 100%; max-width: none; border-radius: 50%; object-fit: cover; background: var(--swatch--light-100); border: 3px solid var(--swatch--light-100); }
.im-orbit-face.is-back img { filter: saturate(.7) brightness(.95); }
.im-orbit-face i { position: absolute; right: -4px; bottom: -4px; width: 24px; height: 24px; border-radius: 50%; background: #0f7a3d; color: var(--swatch--light-100); display: grid; place-items: center; border: 2px solid var(--swatch--light-100); }
.im-orbit-face i svg { width: 13px; height: 13px; display: block; }
.im-orbit-face.is-back i { width: 20px; height: 20px; }
.im-orbit.is-in .im-orbit-face { opacity: 1; scale: 1; }
.im-orbit.is-in .im-orbit-face.is-back { opacity: .85; scale: .92; }
.im-orbit-face.is-pop { animation: im-pop .5s ease; }
@keyframes im-pop { 40% { scale: 1.18; } }
@media (max-width: 767px) { .im-orbit { padding: 2.5rem 1.75rem; } .im-orbit-face { width: 44px; height: 44px; } .im-orbit-face.is-back { width: 36px; height: 36px; } .im-orbit-face i { width: 18px; height: 18px; } .im-orbit-face i svg { width: 10px; height: 10px; } }

/* Stats band under the hero */

@media (max-width: 767px) { .im-pkgs { grid-template-columns: 1fr; } }

/* Launch figures */
.im-launch-split { margin-top: 1rem; align-items: start; }
.im-launches { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.im-launch { display: flex; flex-direction: column; gap: .75rem; padding: 1.5rem; border: 0; border-radius: 1.25rem; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; opacity: .55; transition: opacity .3s ease, background-color .3s ease; }
.im-launch:hover, .im-launch:focus-visible, .im-launch.is-on { opacity: 1; background: var(--swatch--light-100); }
.im-big { font-size: clamp(2.5rem, 4.4vw, 4.5rem); line-height: 1; letter-spacing: -.05em; font-weight: 500; margin-bottom: .25rem; }
.im-launch > .u-text-style-large { display: flex; align-items: center; gap: .5rem; line-height: 1.2; }
.im-launch > .u-text-style-main { line-height: 1.45; }
.im-launches img { width: 1.6em; height: 1.6em; border-radius: 50%; object-fit: cover; flex: none; }
.im-launch-split .im-posts { max-width: 34rem; width: 100%; }
.im-measure { max-width: 40rem; }

/* How it works: steps on the left, one pinned panel on the right */
.im-how { display: grid; gap: 2rem; }
@media (min-width: 992px) { .im-how { grid-template-columns: .9fr 1.1fr; gap: 5rem; } }
.im-steps { list-style: none; margin: 0; padding: 0; }
.im-steps > li { display: flex; flex-direction: column; gap: 1rem; padding: 2rem 0; opacity: .35; transition: opacity .4s ease; }
.im-steps > li.is-active { opacity: 1; }
@media (min-width: 992px) { .im-steps > li { min-height: 60vh; justify-content: center; } }
.im-pin { position: sticky; top: 6rem; align-self: start; order: -1; z-index: 2; }
@media (min-width: 992px) { .im-pin { order: 0; top: calc(50vh - 16rem); } .im-steps .im-panel { display: none; } }
.im-panel { position: relative; height: 32rem; border-radius: 1.25rem; padding: 1.5rem; overflow: hidden; }
.im-view { position: absolute; inset: 4rem 1.5rem 1.5rem; display: flex; flex-direction: column; gap: .75rem; visibility: hidden; }
.im-view.is-on { visibility: visible; }
.im-view > *, .im-checks li { transition: opacity .4s ease, transform .4s ease; }
.im-view:not(.is-on) > * { opacity: 0; transform: translateY(12px); }

/* Step 1: creators arrive one by one, then the weak one is cut */
.im-rows, .im-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.im-rows li, .im-checks li { display: grid; grid-template-columns: 36px 1fr auto auto; gap: .75rem; align-items: center; padding: .625rem .75rem; border-radius: var(--radius--main); background: var(--swatch--light-100); font-size: .9375rem; line-height: 1.3; }
.im-rows li { max-height: 5rem; overflow: hidden; transition: opacity .4s ease, transform .4s ease, max-height .5s ease, padding .5s ease, margin .5s ease; }
.im-rows img, .im-rows li > span:first-child { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; background: var(--swatch--border); }
.im-rows li > span:nth-child(2) > span { color: #5c5c66; }
.im-ok { font-size: .8125rem; font-weight: 700; color: #12803f; }
.im-ok.is-bad { color: #b3261e; }
.im-view .im-rows li:not(.is-in) { opacity: 0; transform: translateY(12px); }
.im-choice { display: flex; gap: .375rem; }
.im-choice b { padding: .3rem .625rem; border-radius: var(--radius--small); font-size: .8125rem; font-weight: 700; transition: transform .15s ease, background-color .2s ease, color .2s ease; }
.im-choice .is-no { background: var(--swatch--light-200); color: #b3261e; }
.im-choice .is-yes { background: var(--swatch--dark-900); color: var(--swatch--light-100); }
.im-choice b.is-press { transform: scale(.88); }
.im-rows li.is-approved .is-no { display: none; }
.im-rows li.is-approved .is-yes { background: #0f7a3d; }
.im-rows li.is-rejected { opacity: 0; transform: translateX(24px); max-height: 0; padding-top: 0; padding-bottom: 0; margin-top: -.5rem; }
.im-cursor { position: absolute; z-index: 3; left: 70%; top: 100%; width: 22px; height: 22px; opacity: 0; pointer-events: none; transition: left .55s cubic-bezier(.4, 0, .2, 1), top .55s cubic-bezier(.4, 0, .2, 1), opacity .3s ease; }
.im-cursor.is-on { opacity: 1; }

/* Step 2: the generic post versus posts that landed */
.im-tw.is-generic { background: var(--swatch--light-100); opacity: .65; position: relative; }
.im-tw.is-generic .im-tw-text { text-decoration: line-through 2px rgba(179, 38, 30, .6); }
.im-tw-blank { width: 40px; height: 40px; border-radius: 50%; background: var(--swatch--border); flex: none; }
.im-tw.is-generic .im-ok { position: absolute; top: 1rem; right: 1rem; }
.im-panel .im-tw { padding: .875rem 1rem; }
.im-panel .im-tw-text { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* Step 3: the checklist ticks itself off */
.im-checks li { grid-template-columns: 22px 1fr; align-items: start; }
.im-tick { width: 22px; height: 22px; border-radius: 7px; background: var(--swatch--border); color: var(--swatch--light-100); display: grid; place-items: center; transition: background-color .25s ease; }
.im-tick svg { width: 13px; }
.im-view.is-on .im-tick { background: var(--swatch--dark-900); transition-delay: calc(var(--d) * 450ms + 300ms); }

/* Step 4: the founder posts, the creators repost */
.im-compose { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem; border-radius: var(--radius--main); background: var(--swatch--light-100); }
.im-post-btn { flex: none; padding: .5rem 1.125rem; border-radius: var(--radius--round); background: var(--swatch--dark-900); color: var(--swatch--light-100); font-weight: 700; font-size: .9375rem; }
.im-post-btn.is-press { animation: im-press .45s ease both; }
.im-post-btn.is-done { background: #0f7a3d; }
@keyframes im-press { 40% { transform: scale(.86); } 100% { transform: scale(1); } }
.im-push-faces { display: flex; flex-wrap: wrap; gap: .375rem; }
.im-push-faces span { position: relative; opacity: 0; transform: scale(.4); transition: opacity .3s ease, transform .35s cubic-bezier(.3, 1.6, .5, 1); }
.im-view.is-posted .im-push-faces span { opacity: 1; transform: none; transition-delay: calc(var(--d) * 110ms + 200ms); }
.im-push-faces img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.im-push-faces span::after { content: ""; position: absolute; right: -2px; bottom: -2px; width: 14px; height: 14px; border-radius: 50%; background: #00ba7c; border: 2px solid var(--swatch--brand-500); }
.im-view[data-im-view="3"] .im-tw-metrics { margin-top: auto; padding: 1rem; border-radius: var(--radius--main); background: var(--swatch--light-100); }
@media (max-width: 991px) {
  .im-pin { display: none; }
  .im-steps > li { opacity: 1; padding: 2.5rem 0; }
  .im-steps .im-panel { height: auto; margin-top: .5rem; padding: 1rem; }
  .im-steps .im-view { position: relative; inset: auto; visibility: visible; margin-top: .75rem; }
  .im-push-faces span:nth-child(n+13) { display: none; }
  .im-rows li { grid-template-columns: 36px 1fr auto; }
  .im-rows li > span:nth-child(3) { display: none; }
  .im-launch { padding: 1rem; }
  .im-compose p span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
}

/* The launch asset: the page's one dark block */
.im-asset { display: grid; border-radius: 1.25rem; overflow: hidden; background: var(--swatch--dark-900); margin-top: 3rem; }
.im-asset > div { display: flex; flex-direction: column; gap: 1.5rem; padding: clamp(1.75rem, 4vw, 3.5rem); justify-content: center; }
.im-asset video { width: 100%; height: 100%; min-height: 18rem; object-fit: cover; display: block; }
@media (min-width: 992px) { .im-asset { grid-template-columns: .85fr 1.15fr; } }

/* Results: the launch post itself beside what it bought */
.im-tabs { flex-wrap: wrap; }
.im-tabs .primary-btn { cursor: pointer; font-family: inherit; }
.im-results { display: grid; gap: 1rem; align-items: start; }
@media (min-width: 768px) { .im-results { grid-template-columns: 1fr 1fr; } }
@media (max-width: 767px) {
  .im-results { grid-auto-flow: column; grid-auto-columns: 86%; overflow-x: auto; scroll-snap-type: x mandatory; margin-right: calc(var(--site--margin) * -1); padding-right: var(--site--margin); scrollbar-width: none; }
  .im-results::-webkit-scrollbar { display: none; }
  .im-results > * { scroll-snap-align: start; }
}
.im-results .im-tw { padding: 1.25rem; font-size: 1rem; }

/* Creators: a sentence of names, the lit one shown as an X profile */
.im-creators { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 992px) { .im-creators { grid-template-columns: 1.3fr 1fr; gap: 4rem; } }
.im-names { font-size: clamp(1.5rem, 2.5vw, 2.25rem); line-height: 1.3; letter-spacing: -.02em; }
.im-names button { color: #85858f; font: inherit; background: none; border: 0; padding: 0; cursor: pointer; transition: color .3s ease; }
.im-names button:hover, .im-names button:focus-visible, .im-names .is-lit { color: var(--swatch--dark-900); }
.im-profile { display: block; border-radius: 1.25rem; overflow: hidden; background: var(--swatch--brand-500); color: inherit; text-decoration: none; }
.im-profile-cover { width: 100%; height: auto; aspect-ratio: 3 / 1; object-fit: cover; background: var(--swatch--border); display: block; }
.im-profile-body { padding: 0 1.5rem 1.5rem; display: flex; flex-direction: column; gap: .875rem; font-size: .9375rem; line-height: 1.4; }
.im-profile-body > * { flex-shrink: 0; }
.im-profile-body > div:nth-child(2) { display: grid; gap: .5rem; }
.im-profile-top { display: flex; justify-content: space-between; align-items: flex-end; margin-top: -2.5rem; }
.im-profile-top img { width: 5rem; height: 5rem; border-radius: 50%; object-fit: cover; border: 4px solid var(--swatch--brand-500); }
.im-profile-top span { padding: .5rem 1rem; border-radius: var(--radius--round); background: var(--swatch--dark-900); color: var(--swatch--light-100); font-weight: 700; }
.im-profile svg { width: 18px; height: 18px; vertical-align: -3px; }
.im-profile .im-muted { color: #5c5c66; }
.im-profile-post { margin-top: .25rem; padding: .875rem 1rem; border-radius: var(--radius--main); background: var(--swatch--light-100); }

/* Packages: the homepage hills and a rising views curve, as the section background */
.im-pkg-section { position: relative; overflow: hidden; }
.im-pkg-bg { position: absolute; inset: 0; pointer-events: none; }
.im-pkg-bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center bottom; }
.im-pkg-bg svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.im-pkg-section .u-container { position: relative; }
.im-pkg { gap: .375rem; padding: 2rem; }
.im-pkg-num { margin-top: 1.25rem; font-size: clamp(2.5rem, 4vw, 3.75rem); line-height: 1; letter-spacing: -.045em; font-weight: 500; }
.im-pkg-line { margin-top: 1.25rem; }

/* Contact form: the site's own form on a dark section, creators behind it */
.im-contact { background-color: var(--swatch--dark-900); }
.im-contact .contact_left h2, .im-contact .contact_left p, .im-contact .u-eyebrow-text { color: var(--swatch--light-100); }
.im-contact .contact_bg_img { display: none; }
.im-cta-wall { display: grid; grid-template-columns: repeat(6, 1fr); position: absolute; inset: 0; }
.im-cta-wall img { width: 100%; height: 100%; aspect-ratio: 1; object-fit: cover; }
.im-contact .contact_overlay { background-color: rgba(9, 9, 17, .74); }
.im-cta-extra { display: flex; flex-direction: column; gap: 1rem; margin-top: 1rem; }
.im-cta-founders { display: flex; }
.im-cta-founders img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: 2px solid var(--swatch--dark-900); margin-right: -10px; background: var(--swatch--light-100); }
@media (max-width: 767px) { .im-cta-wall { grid-template-columns: repeat(4, 1fr); } }

/* Entrances */
.im-reveal { opacity: 0; transform: translateY(20px); transition: opacity .7s ease, transform .7s ease; }
.im-reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .im-reveal, .im-orbit-face, .im-push-faces span, .im-view > *, .im-rows li { opacity: 1; transform: none; scale: 1; transition: none; }
  .im-cursor { display: none; }
}