/* ==========================================================================
   what-is-it.css — "What is it?" tab layout
   ========================================================================== */

/* Mobile: stacked */
.content-section { display: flex; flex-direction: column; align-items: center; gap: 16px; margin-block: 8px 2.5rem; width: 100%; }
.content-left { display: none; }
.content-right { display: flex; flex-direction: column; align-items: center; gap: 16px; width: 100%; max-width: 100%; }

/* Mobile equivalency + features (separate sections) */
.equivalency-mobile { display: none; align-items: center; justify-content: center; gap: 20px; margin-block: 2.5rem 3rem; }
.equivalency-mobile__usd { font-size: 4rem; font-weight: var(--fw-bold); color: var(--color-accent-green); letter-spacing: -0.02em; line-height: 1; }
.equivalency-mobile__equals { font-size: 2.5rem; font-weight: var(--fw-medium); color: #fff; line-height: 1; }
.equivalency-mobile__fancash { display: inline-flex; align-items: center; gap: 12px; }
.equivalency-mobile__amount { display: inline-flex; align-items: center; justify-content: center; min-width: 72px; height: 52px; padding-inline: 16px; font-size: 2.5rem; font-weight: var(--fw-bold); color: #fff; border: 2px solid var(--color-purple-accent); border-radius: 8px; }

.features-mobile { display: flex; flex-direction: column; gap: 16px; max-width: 32rem; margin-inline: auto; margin-bottom: 2.5rem; }
.features__item { display: flex; align-items: center; gap: 16px; font-size: 14px; font-weight: var(--fw-medium); }

/* Tablet: lockup replaces old equivalency */

/* Desktop 2-column layout (from Figma node 4328:147270) */
@media (min-width: 64rem) {
  .features-mobile { display: none !important; }
  .content-left { display: flex; }
  .content-section { flex-direction: row; align-items: center; justify-content: center; gap: 32px; padding-inline: 12px; max-width: 900px; margin-inline: auto; }
  .content-left { flex-direction: column; align-items: flex-start; gap: 32px; width: 420px; flex-shrink: 0; }
  .content-right { width: 440px; flex-shrink: 0; }

  .eq-desktop { display: flex; align-items: center; gap: 14px; }
  .eq-desktop__usd { font-size: 54px; font-weight: var(--fw-bold); color: var(--color-accent-green); line-height: 54px; }
  .eq-desktop__equals { font-size: 54px; font-weight: var(--fw-semibold); color: #fff; line-height: 54px; }
  .eq-desktop__fancash { display: inline-flex; align-items: center; gap: 10px; }
  .eq-desktop .fc-icon-eq { width: 54px; height: 54px; }
  .eq-desktop__amount { display: inline-flex; align-items: center; justify-content: center; height: 54px; padding-inline: 14px; font-size: 34px; font-weight: 800; color: #fff; border: 4px solid #5327dc; border-radius: 18px 18px 18px 0; }

  .feat-desktop { display: flex; flex-direction: column; gap: 16px; width: 100%; }
  .feat-desktop .features__item { display: flex; align-items: center; gap: 13px; font-size: 15px; line-height: 22px; font-weight: var(--fw-semibold); color: var(--color-text-secondary); }
  .feat-desktop .fc-icon-sm { width: 28px; height: 28px; }
}

@media (min-width: 80rem) {
  .content-section { max-width: 1060px; gap: 40px; }
  .content-left { width: 480px; }
  .content-right { width: 500px; }
  .eq-desktop__usd, .eq-desktop__equals { font-size: 60px; line-height: 60px; }
  .eq-desktop .fc-icon-eq { width: 60px; height: 60px; }
  .eq-desktop__amount { height: 60px; font-size: 38px; padding-inline: 16px; }
  .feat-desktop .features__item { font-size: 16px; line-height: 24px; gap: 14px; }
  .feat-desktop .fc-icon-sm { width: 32px; height: 32px; }
}

/* ==========================================================================
   Lockup — FanCash logo + animated campaign tag
   Hidden on mobile. Below bullets on tablet (left-aligned) and desktop.
   ========================================================================== */

/* Mobile: hidden */
.lockup-wrap {
  display: none;
  margin-block: 0;
}
.content-left .lockup-wrap {
  margin-block: 0;
}

/* Lockup as a list item inside features — override bullet styling */
.features__item--lockup {
  display: none; /* hidden on mobile */
  padding-top: 12px;
}
.features__item--lockup .lockup {
  display: inline-flex; align-items: center; gap: 10px;
  transform-origin: left center;
}

.lockup {
  display: inline-flex; align-items: center; gap: 10px;
  transform-origin: left center;
}

.lockup__logo {
  width: 169px; height: 64px; flex-shrink: 0;
}

.lockup__tag {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 19px;
  border: 6.35px solid #fff;
  border-radius: 21.15px 21.15px 21.15px 0;
  min-width: 100px;
  height: 63.47px;
}

.lockup__word {
  font-family: var(--font-sans);
  font-size: 37.76px;
  line-height: 63.47px;
  font-weight: var(--fw-semibold);
  letter-spacing: -0.76px;
  color: #fff;
  white-space: nowrap;
  display: inline-block;
  min-width: 1ch;
  opacity: 0;
  transform: scale(0.85);
  transform-origin: left center;
}

/* Tablet: show lockup inside features list */
@media (min-width: 48rem) {
  .features__item--lockup { display: block; }
  .features__item--lockup .lockup { transform: scale(0.8); }
  .lockup-wrap { display: none; } /* standalone stays hidden */
  .content-left .lockup-wrap { display: none; }
  .features-mobile { order: 5; }
}

/* Desktop: show only in left-col */
@media (min-width: 64rem) {
  .features__item--lockup { display: none; } /* hide from mobile features list */
  .lockup-wrap { display: none; }
  .content-left .lockup-wrap { display: flex; }
  .content-left .lockup { transform: scale(0.75); transform-origin: left center; }
}

/* Wide desktop */
@media (min-width: 80rem) {
  .content-left .lockup { transform: scale(0.85); }
}