/* ==========================================================================
   media-kit-fnd.css — foundation skin for the public Media Kit (/@{slug}).

   THE IMMERSIVE SHOWCASE. The old page's premium feel came from a darkened,
   blurred channel-banner backdrop with white cards floating on it. The first
   migration flattened that to plain paper and inverted the profile card to
   dark, which read as a generic form. This restores the atmosphere in
   FOUNDATION materials: a lit ink field (the creator's banner, blurred and
   blended to #16141A), white foundation cards floating on it, Wix Madefor
   headings, the single indigo accent, ink pill buttons, real fnd components.

   A MIGRATION: it targets the existing `.mk-*` names under `.mk-fnd` (0,2,0),
   so the redesign switch restores the old look whole when off. Structure,
   copy, data bindings and every media-kit.js hook are untouched.
   ========================================================================== */

/* ---- 1. The page is a lit ink atmosphere --------------------------------- */
.mk-fnd.mk-body {
  background: var(--fnd-ink);
  color: var(--fnd-on-ink);
  font-family: var(--fnd-body-font);
  /* Clear the fixed sticky-CTA / powered-by bar at the bottom so the last
     card never sits underneath it. */
  padding-bottom: 96px;
}
/* The blurred banner backdrop is kept (it is the personality of the page),
   pushed darker and blended into the ink so it reads as a lit room, not a
   photo. */
.mk-fnd .mk-page-bg { display: block; z-index: 0; filter: blur(46px) saturate(1.15) brightness(0.32); }
.mk-fnd .mk-page-bg::after {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(51,46,66,.55) 0%, transparent 55%),
    linear-gradient(180deg, rgba(22,20,26,.35) 0%, rgba(22,20,26,.80) 55%, #16141A 100%);
}
/* When the creator has no banner: a foundation ink gradient, never the old
   indigo. */
.mk-fnd .mk-page-bg--default {
  background-image:
    radial-gradient(90% 70% at 16% 0%, #332E42 0%, transparent 60%),
    radial-gradient(80% 80% at 92% 26%, #2A2440 0%, transparent 55%),
    linear-gradient(170deg, #221F2A 0%, #16141A 55%, #100E14 100%);
  filter: none; transform: none;
}

/* Everything that is actual content sits above the backdrop */
.mk-fnd .mk-layout, .mk-fnd .mk-platform-banner,
.mk-fnd .mk-breadcrumb, .mk-fnd .mk-powered-by-fixed { position: relative; z-index: 1; }

.mk-fnd [class^="mk-"], .mk-fnd [class*=" mk-"] { font-family: var(--fnd-body-font); }
.mk-fnd .mk-section__title,
.mk-fnd .mk-profile-card__name,
.mk-fnd .mk-data-card__value,
.mk-fnd .mk-insight-item__value,
.mk-fnd .mk-rate-card__range,
.mk-fnd .mk-rate-card__type,
.mk-fnd .mk-video-thumb__views,
.mk-fnd .mk-creator-card__name,
.mk-fnd .mk-brand-capture__title,
.mk-fnd .mk-brand-capture__path-title,
.mk-fnd .mk-booking-header,
.mk-fnd .mk-faq-question {
  font-family: var(--fnd-display-font);
  letter-spacing: -.018em;
}

/* ---- 2. Breadcrumb + platform banner (on the dark page) ------------------ */
.mk-fnd .mk-breadcrumb,
.mk-fnd .mk-breadcrumb a { color: var(--fnd-on-ink-faint); }
.mk-fnd .mk-breadcrumb a:hover { color: #fff; }
.mk-fnd .mk-breadcrumb__sep { color: var(--fnd-on-ink-faint); }
.mk-fnd .mk-breadcrumb__current { color: var(--fnd-on-ink-soft); }
.mk-fnd .mk-platform-banner {
  background: rgba(255,255,255,.06);
  border-bottom: 1px solid var(--fnd-on-ink-rule);
  color: var(--fnd-on-ink-soft);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.mk-fnd .mk-platform-banner__text strong { color: #fff; }
.mk-fnd .mk-platform-banner__cta { color: var(--fnd-accent); }

/* ---- 3. Profile card: WHITE, floating -------------------------------------
   The single highest-value fix. A white card on the ink field is high
   contrast and reads premium, exactly like the old page. */
.mk-fnd .mk-profile-card {
  background: var(--fnd-card);
  color: var(--fnd-text);
  border: 1px solid var(--fnd-rule);
  border-radius: var(--fnd-r);
  box-shadow: 0 28px 64px -20px rgba(0,0,0,.55), 0 4px 14px rgba(0,0,0,.25);
}
.mk-fnd .mk-profile-card__name { color: var(--fnd-text); }
.mk-fnd .mk-profile-card__positioning { color: var(--fnd-text-soft); }
.mk-fnd .mk-profile-card__bio { color: var(--fnd-text-soft); }
.mk-fnd .mk-profile-card__powered,
.mk-fnd .mk-profile-card__logo { color: var(--fnd-text-faint); }
.mk-fnd .mk-profile-card__stats,
.mk-fnd .mk-profile-stat { color: var(--fnd-text-soft); }
.mk-fnd .mk-profile-stat i { color: var(--fnd-text-faint); }
.mk-fnd .mk-profile-stat strong { color: var(--fnd-text); }
.mk-fnd .mk-profile-stat .fa-youtube { color: #FF0000; }
.mk-fnd .mk-profile-card__yt-link { color: var(--fnd-text-soft); }
.mk-fnd .mk-profile-card__yt-link:hover { color: var(--fnd-text); }
.mk-fnd .mk-profile-card__avatar {
  border-color: var(--fnd-card);
  box-shadow: 0 0 0 3px var(--fnd-rule);
}
.mk-fnd .mk-profile-card__verified { color: #1F7A47; }
/* Category pills are neutral, not indigo. The accent means "this one won";
   using it on every category dilutes it. */
.mk-fnd .mk-profile-card__tags .mk-tag {
  background: var(--fnd-paper-2);
  color: var(--fnd-text-soft);
}
/* CTA is an ink pill on the white card (markup carries fnd-btn--ink) */
.mk-fnd .mk-profile-card__cta {
  display: flex; align-items: center; justify-content: center;
  width: 100%; text-align: center; box-shadow: none;
}
.mk-fnd .mk-profile-card__cta:hover { transform: translateY(-2px); box-shadow: none; }
/* The "Work with <name>" heading: a small muted label over the display-size
   channel name, so the reader can tell the two apart at a glance. */
.mk-fnd .mk-wwith-eyebrow {
  display: block; font-family: var(--fnd-body-font);
  font-size: 14px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--fnd-text-faint); margin-bottom: 5px;
}
.mk-fnd .mk-wwith-name {
  display: block; font-family: var(--fnd-display-font);
  font-size: var(--fnd-t-h2); font-weight: 800; letter-spacing: -.02em;
  color: var(--fnd-text); line-height: 1.1;
}
.mk-fnd .mk-profile-card__cta--share {
  background: #fff !important;
  color: var(--fnd-text) !important;
  border: 1px solid var(--fnd-edge) !important;
}

/* ---- 4. Content sections: white cards floating on the ink ---------------- */
.mk-fnd .mk-section,
.mk-fnd .mk-inquiry-form,
.mk-fnd .mk-discover {
  background: var(--fnd-card);
  border: 1px solid var(--fnd-rule);
  border-radius: var(--fnd-r);
  box-shadow: 0 16px 44px -22px rgba(0,0,0,.5), 0 2px 8px rgba(0,0,0,.18);
}
.mk-fnd .mk-main .mk-section:nth-child(even) { background: var(--fnd-card); }
.mk-fnd .mk-section--cta { background: var(--fnd-card); border-color: var(--fnd-rule); }
/* Titles get real breathing room to the content below (was 8px, too tight);
   when a subtitle follows, the title sits close to it instead. */
/* Block, not the old flex: the flex row put the "WORK WITH" eyebrow beside the
   name instead of stacked above it. Icons are hidden, so no flex is needed. */
.mk-fnd .mk-section__title { color: var(--fnd-text); font-weight: 800; margin-bottom: 22px; display: block; }
.mk-fnd .mk-section__title:has(+ .mk-section__subtitle) { margin-bottom: 6px; }
/* Section-title icons removed: they read as clutter. Titles stand alone. */
.mk-fnd .mk-section__title i,
.mk-fnd .mk-booking-header__icon { display: none; }
.mk-fnd .mk-section__subtitle { color: var(--fnd-text-soft); margin-bottom: 22px; }
.mk-fnd .mk-content-banner {
  border-radius: var(--fnd-r);
  box-shadow: 0 16px 44px -22px rgba(0,0,0,.5);
}

/* ---- 5. Insights: cells inside the white section (tint, not a second card) */
.mk-fnd .mk-data-card,
.mk-fnd .mk-insight-item {
  background: var(--fnd-paper-2);
  border: 1px solid var(--fnd-rule);
  box-shadow: none;
}
/* A small accent glyph, NOT a wide filled rectangle (that was a bug: the old
   icon is a bare glyph with no width, so a background stretched full-width). */
.mk-fnd .mk-data-card__icon { color: var(--fnd-accent-deep); background: transparent; font-size: 18px; }
.mk-fnd .mk-data-card__label,
.mk-fnd .mk-insight-item__label,
.mk-fnd .mk-insight-row__label,
.mk-fnd .mk-audience-item__label,
.mk-fnd .mk-content-formats__label { color: var(--fnd-text-faint); }
.mk-fnd .mk-data-card__value,
.mk-fnd .mk-insight-item__value,
.mk-fnd .mk-audience-item__value { color: var(--fnd-text); }
.mk-fnd .mk-audience-row,
.mk-fnd .mk-insight-row { border-color: var(--fnd-rule); }

/* ---- 6. Tags / chips ------------------------------------------------------ */
.mk-fnd .mk-tag {
  background: var(--fnd-accent-soft);
  color: var(--fnd-accent-deep);
  border: 0; border-radius: 999px; font-family: var(--fnd-body-font);
}
.mk-fnd .mk-tag--format { background: var(--fnd-paper-2); color: var(--fnd-text-soft); }
.mk-fnd .mk-tag--more { background: transparent; color: var(--fnd-text-faint); }

/* ---- 7. Sponsorship rate cards -------------------------------------------- */
.mk-fnd .mk-rate-card {
  background: #fff;
  border: 1px solid var(--fnd-rule);
  border-radius: var(--fnd-r);
  box-shadow: none;
}
/* These cards are NOT clickable, so they carry no hover affordance. A lift on
   hover promises an action that is not there. */
.mk-fnd .mk-rate-card:hover { transform: none; border-color: var(--fnd-rule); box-shadow: none; }
/* The featured card keeps its indigo ring on hover (do not fade it to grey) */
.mk-fnd .mk-rate-card--featured:hover { border-color: var(--fnd-accent-deep); box-shadow: 0 0 0 1px var(--fnd-accent-deep); }
.mk-fnd .mk-rate-card--featured {
  border-color: var(--fnd-accent-deep);
  box-shadow: 0 0 0 1px var(--fnd-accent-deep);
  background: #fff;
}
/* Dark indigo chip, white text (was light accent + ink glyph, low legibility) */
.mk-fnd .mk-rate-card__popular {
  background: var(--fnd-accent-deep); color: #fff;
  font-family: var(--fnd-body-font); font-weight: 700;
}
.mk-fnd .mk-rate-card__icon { background: var(--fnd-accent-soft); color: var(--fnd-accent-deep); }
/* The featured icon is a dark indigo square with a white glyph */
.mk-fnd .mk-rate-card--featured .mk-rate-card__icon { background: var(--fnd-accent-deep); color: #fff; }
.mk-fnd .mk-rate-card__type { color: var(--fnd-text-soft); font-weight: 600; }
.mk-fnd .mk-rate-card__range,
.mk-fnd .mk-rate-card--featured .mk-rate-card__range { color: var(--fnd-text); }
.mk-fnd .mk-rate-note { color: var(--fnd-text-faint); }

/* ---- 8. Featured + recent videos ------------------------------------------ */
.mk-fnd .mk-video-thumb,
.mk-fnd .mk-hero-video,
.mk-fnd .mk-video-poster { border-radius: var(--fnd-r); border-color: var(--fnd-rule); }
.mk-fnd .mk-video-thumb__views {
  background: rgba(22,20,26,.86); color: #fff;
  font-family: var(--fnd-body-font); font-weight: 600;
}
.mk-fnd .mk-video-thumb__title { color: var(--fnd-text); }
.mk-fnd .mk-play-icon, .mk-fnd .mk-video-thumb__play { color: #fff; }
/* The play triangle's visual mass sits left of its box, so a tiny right nudge
   optically centres it in the circle. */
.mk-fnd .mk-play-icon i, .mk-fnd .mk-video-thumb__play i { position: relative; left: 2px; }

/* ---- 9. Work-With form ---------------------------------------------------- */
/* The form is NOT a second card inside the section card. It is plain content
   in the section's own padding, so fields never hug an inner border. */
.mk-fnd .mk-inquiry-form { background: transparent; border: 0; box-shadow: none; padding: 0; }
.mk-fnd .mk-booking-header { color: var(--fnd-text); }
.mk-fnd .mk-booking-header__icon { background: var(--fnd-accent-soft); color: var(--fnd-accent-deep); }
/* The fields are pure design-system controls: the markup carries .fnd-label,
   .fnd-input, .fnd-textarea and .fnd-select, so the foundation styles them.
   We only keep the "Required" cue and hint legible on the white card; every
   other property (size, edge, radius, focus ring, placeholder) is the DS's. */
.mk-fnd .mk-label-hint,
.mk-fnd .mk-required { color: var(--fnd-text-faint); font-weight: 500; }
.mk-fnd .mk-inquiry-submit {
  background: var(--fnd-ink) !important;
  color: var(--fnd-on-ink) !important;
  border: 0; border-radius: 999px;
  font-family: var(--fnd-display-font); font-weight: 700; min-height: 52px;
  display: flex; width: 100%;
}
.mk-fnd .mk-inquiry-submit:hover { transform: translateY(-2px); }
.mk-fnd .mk-inquiry-note { color: var(--fnd-text-faint); }
.mk-fnd .mk-trust-signals { color: var(--fnd-text-faint); }
.mk-fnd .mk-trust-signal i { color: var(--fnd-accent-deep); }
.mk-fnd .mk-inquiry-feedback--success { background: #ECF7F0; color: #1F7A47; }
.mk-fnd .mk-inquiry-feedback--error { background: var(--fnd-danger-soft); color: #B42318; }

/* ---- 10. FAQ -------------------------------------------------------------- */
.mk-fnd .mk-faq-item { border-color: var(--fnd-rule); }
.mk-fnd .mk-faq-question { color: var(--fnd-text); font-weight: 700; }
.mk-fnd .mk-faq-question i { color: var(--fnd-text-faint); }
.mk-fnd .mk-faq-answer { color: var(--fnd-text-soft); }

/* ---- 11. "Find the creator" band = an elevated dark block ----------------- */
.mk-fnd .mk-brand-capture {
  background:
    radial-gradient(90% 80% at 15% 0%, #46406A 0%, transparent 60%),
    radial-gradient(80% 80% at 95% 100%, #362E5A 0%, transparent 55%),
    linear-gradient(165deg, #302B44 0%, #241F34 55%, #1D1930 100%);
  color: var(--fnd-on-ink);
  border: 1px solid rgba(143,135,255,.28);
  border-radius: var(--fnd-r);
  box-shadow: 0 30px 70px -26px rgba(0,0,0,.7), 0 0 0 1px rgba(143,135,255,.10), inset 0 1px 0 rgba(255,255,255,.05);
}
.mk-fnd .mk-brand-capture__title { color: #fff; }
.mk-fnd .mk-brand-capture__subtitle,
.mk-fnd .mk-brand-capture__path-desc { color: var(--fnd-on-ink-soft); }
.mk-fnd .mk-brand-capture__card { background: rgba(255,255,255,.05); border: 1px solid var(--fnd-on-ink-rule); border-radius: var(--fnd-r); }
.mk-fnd .mk-brand-capture__path-icon { background: rgba(255,255,255,.08); color: var(--fnd-on-ink); }
.mk-fnd .mk-brand-capture__path-icon--featured { background: var(--fnd-accent); color: var(--fnd-accent-glyph); }
.mk-fnd .mk-brand-capture__path-title { color: #fff; }
.mk-fnd .mk-brand-capture__divider { color: var(--fnd-on-ink-faint); }
.mk-fnd .mk-brand-capture__note { color: var(--fnd-on-ink-faint); }
.mk-fnd .mk-brand-capture__path-cta {
  background: rgba(255,255,255,.10) !important; color: #fff !important;
  border: 1px solid var(--fnd-on-ink-rule);
  border-radius: 999px; font-family: var(--fnd-display-font); font-weight: 700;
}
.mk-fnd .mk-brand-capture__path-cta--featured { background: #fff !important; color: var(--fnd-ink) !important; border: 0; }
.mk-fnd .mk-brand-capture__path-cta:hover { transform: translateY(-2px); }

/* ---- 12. Discover more creators ------------------------------------------- */
/* The wrapper is NOT a card: the inner .mk-section is the single white card, so
   there is no card-inside-a-card. The Browse link then sits on the dark page. */
.mk-fnd .mk-discover {
  position: relative; z-index: 1;
  background: transparent; border: 0; box-shadow: none; padding: 0;
}
.mk-fnd .mk-creator-card {
  background: var(--fnd-paper-2);
  border: 1px solid var(--fnd-rule);
  border-radius: var(--fnd-r);
  box-shadow: none;
}
.mk-fnd .mk-creator-card:hover { border-color: var(--fnd-text-faint); transform: translateY(-2px); }
.mk-fnd .mk-creator-card__name { color: var(--fnd-text); }
.mk-fnd .mk-creator-card__stats { color: var(--fnd-text-faint); }
.mk-fnd .mk-creator-card__cta {
  color: var(--fnd-accent-deep); border-color: var(--fnd-rule);
  font-family: var(--fnd-display-font); font-weight: 700;
}
.mk-fnd .mk-creator-card__cta:hover,
.mk-fnd .mk-creator-card:hover .mk-creator-card__cta {
  color: var(--fnd-accent-deep); background: var(--fnd-accent-soft); border-color: var(--fnd-accent-deep);
}
/* .mk-browse-all now sits on the dark page (below the white card), so it takes
   the on-ink treatment: light text and a white pill. */
.mk-fnd .mk-browse-all__text { color: var(--fnd-on-ink-soft); }
.mk-fnd .mk-browse-all__btn,
.mk-fnd .mk-browse-all__link {
  background: #fff !important; color: var(--fnd-ink) !important;
  border-radius: 999px; font-family: var(--fnd-display-font); font-weight: 700;
}

/* ---- 13. Sticky CTA + powered-by ------------------------------------------ */
.mk-fnd .mk-sticky-cta { background: var(--fnd-card); border-color: var(--fnd-rule); box-shadow: 0 -8px 30px rgba(0,0,0,.3); }
.mk-fnd .mk-sticky-cta__text { color: var(--fnd-text); }
.mk-fnd .mk-sticky-cta__btn {
  background: var(--fnd-ink) !important; color: var(--fnd-on-ink) !important;
  border-radius: 999px; font-family: var(--fnd-display-font); font-weight: 700;
}
.mk-fnd .mk-powered-by-fixed { color: var(--fnd-on-ink-faint); }

/* ---- 14. Touch targets: every tappable link clears the 44px floor --------- */
.mk-fnd .mk-platform-banner__cta,
.mk-fnd .mk-profile-card__yt-link,
.mk-fnd .mk-breadcrumb a,
.mk-fnd .mk-earnings-link { display: inline-flex; align-items: center; min-height: 44px; }
.mk-fnd .mk-breadcrumb a { min-width: 44px; padding: 0 3px; }
.mk-fnd .mk-breadcrumb { display: flex; align-items: center; flex-wrap: wrap; }
.mk-fnd .mk-breadcrumb__sep,
.mk-fnd .mk-breadcrumb__current { display: inline-flex; align-items: center; }

/* ---- 15. Mobile ----------------------------------------------------------- */
@media (max-width: 767px) {
  .mk-fnd .mk-profile-card { border-radius: var(--fnd-r); }
  .mk-fnd .mk-section,
  .mk-fnd .mk-inquiry-form { border-radius: var(--fnd-r); }
  .mk-fnd .mk-brand-capture { border-radius: var(--fnd-r); }
}