/* Creator Lounge — Four Ways section (converted from the Elementor HTML widget).
 * Root: .clfw-root:not(#_) keeps ID-level specificity against Elementor kit styles.
 * Fonts: headings = shared Creator Lounge heading font (Helvetica Ultra Compressed), body Helvetica.
 */
/* =========================================================
   DESIGN TOKENS
   ========================================================= */

.clfw-root:not(#_) {
  --clfw-white: #FFFFFF;
  --clfw-off-white: #F7F6F8;

  --clfw-black: #09090D;
  --clfw-black-card: #101014;
  --clfw-black-soft: #17171C;

  --clfw-purple: #6307E6;
  --clfw-purple-rgb: 99, 7, 230;

  --clfw-text: #4F4B53;
  --clfw-muted: #79737D;

  --clfw-dark-text: rgba(255, 255, 255, 0.76);
  --clfw-dark-muted: rgba(255, 255, 255, 0.55);

  --clfw-line: #DDD9E1;

  --clfw-heading:
    'Helvetica Ultra Compressed',
    'HelveticaNeueLTStd-UltCmp',
    'Helvetica Neue LT Std',
    'Arial Narrow',
    sans-serif;

  --clfw-body:
    'Helvetica Neue',
    Helvetica,
    Arial,
    sans-serif;

  --clfw-container: 1240px;

  width: 100%;

  font-family:
    var(--clfw-body);
}


.clfw-root:not(#_) *,
.clfw-root:not(#_) *::before,
.clfw-root:not(#_) *::after {
  box-sizing: border-box;
}


.clfw-root:not(#_) a {
  text-decoration: none;
}



/* =========================================================
   SECTION
   ========================================================= */

.clfw-root:not(#_) .clfw-section {
  position: relative;

  width: 100%;

  padding:
    72px
    0
    74px;

  overflow: hidden;

  color:
    var(--clfw-black);

  background:
    radial-gradient(
      circle at 10% 10%,
      rgba(var(--clfw-purple-rgb), 0.025),
      transparent 25%
    ),
    linear-gradient(
      180deg,
      #FAF9FB 0%,
      #F4F2F5 100%
    );
}


.clfw-root:not(#_) .clfw-anchor {
  position: absolute;

  top: 0;
  left: 0;
}



/* =========================================================
   CONTAINER
   ========================================================= */

.clfw-root:not(#_) .clfw-container {
  width: min(
    var(--clfw-container),
    calc(100% - 80px)
  );

  margin-inline: auto;
}



/* =========================================================
   INTRO
   ========================================================= */

.clfw-root:not(#_) .clfw-intro {
  position: relative;

  display: grid;

  grid-template-columns:
    minmax(0, 1.35fr)
    minmax(210px, 0.62fr)
    minmax(165px, 0.42fr);

  align-items: end;

  gap: 58px;

  margin-bottom: 50px;
}



/* =========================================================
   EYEBROW
   ========================================================= */

.clfw-root:not(#_) .clfw-eyebrow {
  display: flex;

  align-items: center;

  gap: 10px;

  color:
    #3A363E;

  font-family:
    var(--clfw-body);

  font-size: 8px;

  font-weight: 700;

  line-height: 1;

  letter-spacing: 0.17em;

  text-transform: uppercase;
}


.clfw-root:not(#_) .clfw-eyebrow__dot {
  width: 6px;
  height: 6px;

  display: block;

  border-radius: 50%;

  background:
    var(--clfw-purple);
}



/* =========================================================
   MAIN HEADING
   ========================================================= */

.clfw-root:not(#_) .clfw-title {
  max-width: 620px;

  margin:
    16px
    0
    0;

  font-family:
    var(--clfw-heading);

  font-size:
    clamp(
      70px,
      7vw,
      104px
    );

  font-weight: 400;

  line-height: 0.84;

  letter-spacing: 0;

  text-transform: uppercase;
}


.clfw-root:not(#_) .clfw-title span,
.clfw-root:not(#_) .clfw-title strong {
  display: block;
}


.clfw-root:not(#_) .clfw-title span {
  color:
    var(--clfw-black);
}


.clfw-root:not(#_) .clfw-title strong {
  color:
    var(--clfw-purple);

  font-weight: 400;
}



/* =========================================================
   INTRO DESCRIPTION
   ========================================================= */

.clfw-root:not(#_) .clfw-description {
  padding-left: 30px;

  border-left:
    1px solid
    var(--clfw-line);
}


.clfw-root:not(#_) .clfw-description p {
  max-width: 245px;

  margin: 0;

  color:
    var(--clfw-text);

  font-family:
    var(--clfw-body);

  font-size: 10px;

  font-weight: 500;

  line-height: 1.7;
}



/* =========================================================
   CTA
   ========================================================= */

.clfw-root:not(#_) .clfw-intro-cta {
  padding-bottom: 13px;
}


.clfw-root:not(#_) .clfw-intro-cta__label {
  display: block;

  margin-bottom: 13px;

  color:
    var(--clfw-black);

  font-family:
    var(--clfw-body);

  font-size: 7px;

  font-weight: 700;

  letter-spacing: 0.14em;
}


.clfw-root:not(#_) .clfw-button {
  min-height: 43px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 18px;

  padding:
    0
    9px
    0
    20px;

  color:
    var(--clfw-white);

  background:
    var(--clfw-purple);

  border-radius: 999px;

  box-shadow:
    0
    9px
    24px
    rgba(var(--clfw-purple-rgb), 0.18);

  font-family:
    var(--clfw-body);

  font-size: 9px;

  font-weight: 600;

  transition:
    transform 180ms ease,
    box-shadow 180ms ease;
}


.clfw-root:not(#_) .clfw-button:hover {
  color:
    var(--clfw-white);

  transform:
    translateY(-2px);

  box-shadow:
    0
    13px
    30px
    rgba(var(--clfw-purple-rgb), 0.28);
}


.clfw-root:not(#_) .clfw-button__arrow {
  width: 27px;
  height: 27px;

  display: grid;

  place-items: center;

  border-radius: 50%;

  background:
    rgba(255, 255, 255, 0.13);
}



/* =========================================================
   SECTION CODE
   ========================================================= */

.clfw-root:not(#_) .clfw-code {
  position: absolute;

  top: 0;
  right: 0;

  color:
    #837D87;

  font-family:
    var(--clfw-body);

  font-size: 7px;

  font-weight: 600;

  letter-spacing: 0.20em;
}



/* =========================================================
   GRID
   ========================================================= */

.clfw-root:not(#_) .clfw-grid {
  display: grid;

  grid-template-columns:
    repeat(
      4,
      minmax(0, 1fr)
    );

  gap: 16px;
}



/* =========================================================
   CARD
   ========================================================= */

.clfw-root:not(#_) .clfw-card {
  position: relative;

  min-height: 500px;

  padding:
    24px
    22px
    0;

  overflow: hidden;

  border-radius: 10px;
}



/* =========================================================
   CONNECT / EARN DARK CARDS
   ========================================================= */

.clfw-root:not(#_) .clfw-card--connect,
.clfw-root:not(#_) .clfw-card--earn {
  color:
    var(--clfw-white);

  background:
    radial-gradient(
      circle at 50% 112%,
      rgba(var(--clfw-purple-rgb), 0.18),
      transparent 35%
    ),
    linear-gradient(
      150deg,
      #17171C 0%,
      #0C0C0F 65%,
      #09090D 100%
    );

  border:
    1px solid
    rgba(255, 255, 255, 0.045);
}



/* =========================================================
   LEARN CARD
   ========================================================= */

.clfw-root:not(#_) .clfw-card--learn {
  color:
    var(--clfw-white);

  background:
    radial-gradient(
      circle at 85% 8%,
      rgba(255, 255, 255, 0.14),
      transparent 25%
    ),
    linear-gradient(
      145deg,
      #6B10E9 0%,
      #6307E6 55%,
      #5002BD 100%
    );

  border:
    1px solid
    rgba(255, 255, 255, 0.10);

  box-shadow:
    inset
    0
    0
    70px
    rgba(0, 0, 0, 0.08);
}



/* =========================================================
   GROW LIGHT CARD
   ========================================================= */

.clfw-root:not(#_) .clfw-card--grow {
  color:
    var(--clfw-black);

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.94),
      rgba(247, 245, 249, 0.96)
    );

  border:
    1px solid
    #DDD8E1;
}



/* =========================================================
   CARD TOP
   ========================================================= */

.clfw-root:not(#_) .clfw-card__top {
  display: flex;

  align-items: center;

  gap: 10px;
}


.clfw-root:not(#_) .clfw-card__top strong {
  font-family:
    var(--clfw-heading);

  font-size: 31px;

  font-weight: 400;

  line-height: 1;
}


.clfw-root:not(#_)
.clfw-card--connect
.clfw-card__top strong,
.clfw-root:not(#_)
.clfw-card--earn
.clfw-card__top strong {
  color:
    var(--clfw-purple);
}


.clfw-root:not(#_)
.clfw-card--learn
.clfw-card__top strong {
  color:
    var(--clfw-white);
}


.clfw-root:not(#_)
.clfw-card--grow
.clfw-card__top strong {
  color:
    var(--clfw-purple);
}


.clfw-root:not(#_) .clfw-card__top i {
  width: 1px;
  height: 23px;

  display: block;

  background:
    rgba(255, 255, 255, 0.20);
}


.clfw-root:not(#_)
.clfw-card--grow
.clfw-card__top i {
  background:
    #D5CFDA;
}


.clfw-root:not(#_) .clfw-card__top span {
  color:
    rgba(255, 255, 255, 0.76);

  font-family:
    var(--clfw-body);

  font-size: 7px;

  font-weight: 700;

  letter-spacing: 0.15em;
}


.clfw-root:not(#_)
.clfw-card--grow
.clfw-card__top span {
  color:
    #4F4952;
}



/* =========================================================
   CARD HEADINGS
   ========================================================= */

.clfw-root:not(#_) .clfw-card h3 {
  position: relative;

  z-index: 5;

  margin:
    30px
    0
    0;

  font-family:
    var(--clfw-heading);

  font-size:
    clamp(
      38px,
      3.15vw,
      48px
    );

  font-weight: 400;

  line-height: 0.90;

  text-transform: uppercase;
}


.clfw-root:not(#_)
:is(
  .clfw-card--connect,
  .clfw-card--learn,
  .clfw-card--earn
)
h3 {
  color:
    var(--clfw-white);
}


.clfw-root:not(#_)
.clfw-card--grow
h3 {
  color:
    var(--clfw-black);
}



/* =========================================================
   CARD BODY TEXT
   ========================================================= */

.clfw-root:not(#_) .clfw-card > p {
  position: relative;

  z-index: 5;

  min-height: 58px;

  margin:
    14px
    0
    0;

  font-family:
    var(--clfw-body);

  font-size: 9px;

  font-weight: 400;

  line-height: 1.65;
}


.clfw-root:not(#_)
:is(
  .clfw-card--connect,
  .clfw-card--learn,
  .clfw-card--earn
)
> p {
  color:
    rgba(255, 255, 255, 0.70);
}


.clfw-root:not(#_)
.clfw-card--grow
> p {
  color:
    #5B555E;
}



/* =========================================================
   CARD LINKS
   ========================================================= */

.clfw-root:not(#_) .clfw-card__link {
  position: relative;

  z-index: 8;

  margin-top: 16px;

  display: inline-flex;

  align-items: center;

  gap: 12px;

  font-family:
    var(--clfw-body);

  font-size: 7px;

  font-weight: 700;

  letter-spacing: 0.10em;

  transition:
    opacity 180ms ease,
    transform 180ms ease;
}


.clfw-root:not(#_)
:is(
  .clfw-card--connect,
  .clfw-card--learn,
  .clfw-card--earn
)
.clfw-card__link {
  color:
    var(--clfw-white);
}


.clfw-root:not(#_)
.clfw-card--grow
.clfw-card__link {
  color:
    var(--clfw-black);
}


.clfw-root:not(#_)
.clfw-card__link-arrow {
  color:
    var(--clfw-purple);

  font-size: 11px;
}


.clfw-root:not(#_)
.clfw-card--learn
.clfw-card__link-arrow {
  color:
    var(--clfw-white);
}


.clfw-root:not(#_) .clfw-card__link:hover {
  opacity: 0.80;

  transform:
    translateX(2px);
}



/* =========================================================
   ART
   ========================================================= */

.clfw-root:not(#_) .clfw-card__art {
  position: absolute;

  left: 0;
  right: 0;
  bottom: 0;

  height: 210px;
}



/* =========================================================
   GENERIC IMAGE
   ========================================================= */

.clfw-root:not(#_) .clfw-image {
  position: absolute;

  overflow: hidden;

  background:
    linear-gradient(
      145deg,
      #37343A,
      #171519
    );

  border:
    1px solid
    rgba(255, 255, 255, 0.10);
}




.clfw-root:not(#_) .clfw-image img {
  position: relative;

  z-index: 1;

  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;

  object-position: center;
}



/* =========================================================
   CONNECT ART
   ========================================================= */

.clfw-root:not(#_) .clfw-connect-art__image--one {
  width: 102px;
  height: 132px;

  left: 27px;
  bottom: 16px;

  transform:
    rotate(-8deg);
}


.clfw-root:not(#_) .clfw-connect-art__image--two {
  z-index: 2;

  width: 105px;
  height: 143px;

  left: 92px;
  bottom: 29px;

  transform:
    rotate(7deg);
}


.clfw-root:not(#_) .clfw-connect-art__note {
  position: absolute;

  z-index: 5;

  right: 12px;
  bottom: 54px;

  padding:
    10px
    11px;

  color:
    #151218;

  background:
    #FFFFFF;

  box-shadow:
    0
    7px
    18px
    rgba(0, 0, 0, 0.22);

  font-family:
    'Comic Sans MS',
    'Bradley Hand',
    cursive;

  font-size: 11px;

  font-style: italic;

  line-height: 1.08;

  transform:
    rotate(6deg);
}


.clfw-root:not(#_) .clfw-connect-art__plus {
  position: absolute;

  z-index: 7;

  left: 69px;
  bottom: 10px;

  width: 39px;
  height: 39px;

  display: grid;

  place-items: center;

  color:
    #FFFFFF;

  background:
    var(--clfw-purple);

  border-radius: 7px;

  box-shadow:
    0
    8px
    20px
    rgba(var(--clfw-purple-rgb), 0.25);

  font-size: 21px;
}


.clfw-root:not(#_) .clfw-connect-art__crown {
  position: absolute;

  z-index: 6;

  right: 37px;
  top: 4px;

  color:
    var(--clfw-purple);

  font-size: 31px;

  transform:
    rotate(8deg);
}



/* =========================================================
   LEARN ART
   ========================================================= */

.clfw-root:not(#_) .clfw-learn-art__main {
  width: 150px;
  height: 122px;

  left: 43px;
  bottom: 35px;

  transform:
    rotate(-4deg);

  border:
    1px solid
    rgba(255, 255, 255, 0.18);
}


.clfw-root:not(#_) .clfw-learn-art__person {
  z-index: 3;

  width: 58px;
  height: 116px;

  right: 11px;
  bottom: 18px;

  border: 0;
}



/* =========================================================
   LEARN WHITE POPUP
   ========================================================= */

.clfw-root:not(#_) .clfw-learn-art__label {
  position: absolute;

  z-index: 8;

  left: 29px;
  bottom: 15px;

  width: 158px;

  min-height: 56px;

  padding:
    10px
    45px
    10px
    12px;

  display: flex;

  align-items: center;

  color:
    var(--clfw-black);

  background:
    #FFFFFF;

  border:
    1px solid
    rgba(0, 0, 0, 0.06);

  border-radius: 7px;

  box-shadow:
    0
    12px
    28px
    rgba(24, 6, 47, 0.24);

  font-family:
    var(--clfw-body);

  line-height: 1.25;

  transform:
    rotate(-1.5deg);
}


.clfw-root:not(#_)
.clfw-learn-art__kicker {
  display: block;

  margin-bottom: 4px;

  color:
    var(--clfw-purple);

  font-size: 4px;

  font-weight: 800;

  letter-spacing: 0.11em;
}


.clfw-root:not(#_)
.clfw-learn-art__label strong {
  display: block;

  color:
    #171318;

  font-family:
    var(--clfw-body);

  font-size: 6px;

  font-weight: 700;

  line-height: 1.35;
}


.clfw-root:not(#_)
.clfw-learn-art__play {
  position: absolute;

  top: 50%;
  right: 9px;

  width: 31px;
  height: 31px;

  display: grid;

  place-items: center;

  transform:
    translateY(-50%);

  color:
    #FFFFFF;

  background:
    var(--clfw-purple);

  border-radius: 50%;

  box-shadow:
    0
    6px
    16px
    rgba(var(--clfw-purple-rgb), 0.28);

  font-size: 7px;
}


.clfw-root:not(#_) .clfw-learn-art__scribble {
  position: absolute;

  right: 23px;
  top: 8px;

  color:
    rgba(255, 255, 255, 0.90);

  font-family:
    cursive;

  font-size: 34px;

  transform:
    rotate(-7deg);
}



/* =========================================================
   EARN ART
   ========================================================= */

.clfw-root:not(#_) .clfw-earn-art__campaign {
  width: 102px;
  height: 91px;

  left: 27px;
  bottom: 82px;

  transform:
    rotate(-7deg);
}


.clfw-root:not(#_) .clfw-earn-art__creator {
  z-index: 3;

  width: 104px;
  height: 151px;

  right: 18px;
  bottom: 18px;

  transform:
    rotate(7deg);
}


.clfw-root:not(#_) .clfw-earn-art__note {
  position: absolute;

  z-index: 6;

  left: 27px;
  bottom: 47px;

  padding:
    9px
    10px;

  color:
    #171319;

  background:
    #FFFFFF;

  box-shadow:
    0
    7px
    16px
    rgba(0, 0, 0, 0.22);

  font-family:
    'Comic Sans MS',
    'Bradley Hand',
    cursive;

  font-size: 10px;

  font-style: italic;

  line-height: 1.08;

  transform:
    rotate(-4deg);
}


.clfw-root:not(#_) .clfw-earn-art__scribble {
  position: absolute;

  right: 14px;
  top: 5px;

  color:
    rgba(255, 255, 255, 0.70);

  font-family:
    'Comic Sans MS',
    cursive;

  font-size: 10px;

  font-style: italic;

  line-height: 1.08;
}



/* =========================================================
   GROW ART
   ========================================================= */

.clfw-root:not(#_) .clfw-profile-card {
  position: absolute;

  z-index: 3;

  left: 14px;
  right: 24px;
  bottom: 79px;

  padding: 10px;

  background:
    #FFFFFF;

  border:
    1px solid
    #ECE8EE;

  border-radius: 5px;

  box-shadow:
    0
    9px
    23px
    rgba(18, 10, 24, 0.12);

  transform:
    rotate(-3deg);
}


.clfw-root:not(#_) .clfw-profile-card__head {
  display: flex;

  align-items: center;

  gap: 7px;
}


.clfw-root:not(#_) .clfw-profile-card__avatar {
  width: 24px;
  height: 24px;

  display: grid;

  place-items: center;

  color:
    #FFFFFF;

  background:
    var(--clfw-purple);

  border-radius: 50%;

  font-family:
    var(--clfw-body);

  font-size: 6px;

  font-weight: 700;
}


.clfw-root:not(#_)
.clfw-profile-card__head
strong {
  display: block;

  color:
    var(--clfw-black);

  font-family:
    var(--clfw-body);

  font-size: 6px;
}


.clfw-root:not(#_)
.clfw-profile-card__head
span {
  display: block;

  margin-top: 1px;

  color:
    #928B96;

  font-family:
    var(--clfw-body);

  font-size: 4px;
}


.clfw-root:not(#_) .clfw-profile-card__stats {
  margin-top: 8px;

  display: grid;

  grid-template-columns:
    repeat(3, 1fr);

  gap: 4px;
}


.clfw-root:not(#_)
.clfw-profile-card__stats strong {
  display: block;

  color:
    var(--clfw-black);

  font-family:
    var(--clfw-body);

  font-size: 6px;
}


.clfw-root:not(#_)
.clfw-profile-card__stats span {
  display: block;

  margin-top: 1px;

  color:
    #958E99;

  font-family:
    var(--clfw-body);

  font-size: 3.5px;
}


.clfw-root:not(#_) .clfw-grow-art__creator {
  z-index: 6;

  width: 65px;
  height: 128px;

  right: 15px;
  bottom: 33px;

  border: 0;
}


.clfw-root:not(#_) .clfw-grow-art__chart {
  position: absolute;

  z-index: 5;

  left: 36px;
  bottom: 18px;

  width: 158px;

  color:
    var(--clfw-purple);
}



/* =========================================================
   GROW GLOBE
   ========================================================= */

.clfw-root:not(#_) .clfw-grow-art__globe {
  position: absolute;

  right: 12px;
  top: 1px;

  width: 47px;
  height: 47px;

  border:
    1px solid
    rgba(var(--clfw-purple-rgb), 0.50);

  border-radius: 50%;
}


.clfw-root:not(#_)
.clfw-grow-art__globe::before {
  content: "";

  position: absolute;

  top: 0;
  bottom: 0;
  left: 12px;
  right: 12px;

  border:
    1px solid
    rgba(var(--clfw-purple-rgb), 0.34);

  border-radius: 50%;
}


.clfw-root:not(#_)
.clfw-grow-art__globe span {
  position: absolute;

  left: 0;
  right: 0;

  height: 1px;

  background:
    rgba(var(--clfw-purple-rgb), 0.32);
}


.clfw-root:not(#_)
.clfw-grow-art__globe
span:nth-child(1) {
  top: 25%;
}


.clfw-root:not(#_)
.clfw-grow-art__globe
span:nth-child(2) {
  top: 50%;
}


.clfw-root:not(#_)
.clfw-grow-art__globe
span:nth-child(3) {
  top: 75%;
}


.clfw-root:not(#_) .clfw-grow-art__note {
  position: absolute;

  right: 2px;
  top: 49px;

  color:
    var(--clfw-purple);

  font-family:
    'Comic Sans MS',
    'Bradley Hand',
    cursive;

  font-size: 10px;

  font-style: italic;

  line-height: 1.08;

  transform:
    rotate(-7deg);
}



/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1050px) {

  .clfw-root:not(#_) .clfw-container {
    width:
      calc(100% - 48px);
  }


  .clfw-root:not(#_) .clfw-intro {
    gap: 35px;
  }


  .clfw-root:not(#_) .clfw-grid {
    gap: 10px;
  }


  .clfw-root:not(#_) .clfw-card {
    min-height: 475px;

    padding-inline: 16px;
  }


  .clfw-root:not(#_) .clfw-card h3 {
    font-size: 37px;
  }

}



/* =========================================================
   SMALL TABLET
   ========================================================= */

@media (max-width: 900px) {

  .clfw-root:not(#_) .clfw-intro {
    grid-template-columns:
      1fr
      0.7fr;

    align-items: end;
  }


  .clfw-root:not(#_) .clfw-heading {
    grid-column:
      1 / -1;
  }


  .clfw-root:not(#_) .clfw-code {
    top: 5px;
  }


  .clfw-root:not(#_) .clfw-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );

    gap: 16px;
  }


  .clfw-root:not(#_) .clfw-card {
    min-height: 520px;
  }


  .clfw-root:not(#_) .clfw-card h3 {
    font-size: 50px;
  }

}



/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

  .clfw-root:not(#_) .clfw-section {
    padding:
      62px
      0;
  }


  .clfw-root:not(#_) .clfw-container {
    width:
      calc(100% - 30px);
  }


  .clfw-root:not(#_) .clfw-intro {
    grid-template-columns:
      1fr;

    align-items: start;

    gap: 27px;

    margin-bottom: 40px;
  }


  .clfw-root:not(#_) .clfw-heading {
    grid-column: auto;
  }


  .clfw-root:not(#_) .clfw-title {
    font-size:
      clamp(
        65px,
        20vw,
        94px
      );

    line-height:
      0.84;
  }


  .clfw-root:not(#_) .clfw-description {
    padding:
      22px
      0
      0;

    border-left: 0;

    border-top:
      1px solid
      var(--clfw-line);
  }


  .clfw-root:not(#_) .clfw-description p {
    max-width:
      460px;

    font-size:
      12px;
  }


  .clfw-root:not(#_) .clfw-intro-cta {
    padding-bottom: 0;
  }


  .clfw-root:not(#_) .clfw-code {
    display: none;
  }


  .clfw-root:not(#_) .clfw-grid {
    grid-template-columns:
      1fr;

    gap: 15px;
  }


  .clfw-root:not(#_) .clfw-card {
    min-height: 540px;

    padding:
      27px
      24px
      0;

    border-radius:
      12px;
  }


  .clfw-root:not(#_) .clfw-card h3 {
    font-size:
      clamp(
        51px,
        14vw,
        67px
      );

    line-height:
      0.90;
  }


  .clfw-root:not(#_) .clfw-card > p {
    max-width:
      360px;

    font-size: 11px;

    line-height:
      1.65;
  }

}



/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 430px) {

  .clfw-root:not(#_) .clfw-container {
    width:
      calc(100% - 24px);
  }


  .clfw-root:not(#_) .clfw-card {
    min-height: 510px;
  }


  .clfw-root:not(#_) .clfw-card h3 {
    font-size: 48px;
  }

}



/* =========================================================
   ACCESSIBILITY
   ========================================================= */

.clfw-root:not(#_)
:is(
  a,
  .clfw-button
):focus-visible {
  outline:
    2px solid
    var(--clfw-purple);

  outline-offset:
    4px;
}


@media (prefers-reduced-motion: reduce) {

  .clfw-root:not(#_) *,
  .clfw-root:not(#_) *::before,
  .clfw-root:not(#_) *::after {
    transition-duration:
      0.01ms !important;
  }

}


/* =========================================================
   PLUGIN ADDITIONS
   ========================================================= */

/* ---- Readable text sizes (the original 4–10px copy was too small on real screens) ---- */
.clfw-root:not(#_) .clfw-eyebrow { font-size: 11px; }
.clfw-root:not(#_) .clfw-description p { max-width: 300px; font-size: 14px; line-height: 1.65; }
.clfw-root:not(#_) .clfw-intro-cta__label { font-size: 10px; }
.clfw-root:not(#_) .clfw-button { min-height: 48px; font-size: 13px; font-weight: 700; padding: 0 9px 0 22px; }
.clfw-root:not(#_) .clfw-button__arrow { width: 31px; height: 31px; }
.clfw-root:not(#_) .clfw-code { font-size: 10px; }
.clfw-root:not(#_) .clfw-card__top span { font-size: 10px; }
.clfw-root:not(#_) .clfw-card > p { font-size: 13px; line-height: 1.6; min-height: 64px; }
.clfw-root:not(#_) .clfw-card__link { font-size: 10.5px; }
.clfw-root:not(#_) .clfw-card__link-arrow { font-size: 14px; }
.clfw-root:not(#_) .clfw-learn-art__kicker { font-size: 6.5px; }
.clfw-root:not(#_) .clfw-learn-art__label strong { font-size: 9px; }
.clfw-root:not(#_) .clfw-learn-art__play { font-size: 9px; }
.clfw-root:not(#_) .clfw-profile-card__head strong { font-size: 9px; }
.clfw-root:not(#_) .clfw-profile-card__head span { font-size: 7px; }
.clfw-root:not(#_) .clfw-profile-card__avatar { font-size: 9px; overflow: hidden; }
.clfw-root:not(#_) .clfw-profile-card__stats strong { font-size: 9px; }
.clfw-root:not(#_) .clfw-profile-card__stats span { font-size: 6px; }
@media (max-width: 767px) {
  .clfw-root:not(#_) .clfw-description p { font-size: 14px; }
  .clfw-root:not(#_) .clfw-card > p { font-size: 13.5px; }
}

/* ---- Elementor kit resets ---- */
.clfw-root:not(#_) .clfw-title,
.clfw-root:not(#_) .clfw-card h3 { padding: 0; letter-spacing: 0; }
.clfw-root:not(#_) .clfw-card h3 { word-break: normal; }
.clfw-root:not(#_) a.clfw-button,
.clfw-root:not(#_) a.clfw-button:hover { color: var(--clfw-white); }

/* ---- Image tiles: designed fallback underneath, real image on top ---- */
.clfw-root:not(#_) .clfw-ph {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: rgba(255, 255, 255, 0.78);
  background:
    radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.18), transparent 55%),
    linear-gradient(150deg, color-mix(in srgb, var(--clfw-purple) 85%, #fff), color-mix(in srgb, var(--clfw-purple) 55%, #0B0712));
  font-family: var(--clfw-body);
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-align: center;
  text-transform: uppercase;
}
.clfw-root:not(#_) .clfw-ph svg { width: 42%; max-width: 46px; height: auto; opacity: 0.9; }
.clfw-root:not(#_) .clfw-ph--person svg { width: 64%; max-width: 70px; margin-top: auto; opacity: 0.55; }
.clfw-root:not(#_) .clfw-ph--person span { position: absolute; top: 9px; left: 0; right: 0; }
.clfw-root:not(#_) .clfw-card--learn .clfw-ph {
  background:
    radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.16), transparent 55%),
    linear-gradient(150deg, #2A0C63, #120726);
}

.clfw-root:not(#_) .clfw-image > img,
.clfw-root:not(#_) .clfw-image picture,
.clfw-root:not(#_) .clfw-image picture img {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Profile avatar can take a photo too */
.clfw-root:not(#_) .clfw-profile-card__avatar { position: relative; }
.clfw-root:not(#_) .clfw-profile-card__avatar img,
.clfw-root:not(#_) .clfw-profile-card__avatar picture {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 50%;
}

/* Cards gently lift on hover */
@media (hover: hover) {
  .clfw-root:not(#_) .clfw-card { transition: transform 0.35s cubic-bezier(.34, 1.56, .64, 1), box-shadow 0.35s ease; }
  .clfw-root:not(#_) .clfw-card:hover { transform: translateY(-4px); box-shadow: 0 22px 44px -26px rgba(var(--clfw-purple-rgb), 0.55); }
}

/* Text never runs into the artwork: reserve the art area at the bottom
   (cards in a row still stretch to the same height). */
.clfw-root:not(#_) .clfw-card { padding-bottom: 222px; }
@media (max-width: 767px) {
  .clfw-root:not(#_) .clfw-card { min-height: 0; }
}

/* Grow note sits on top of the photo like a sticker */
.clfw-root:not(#_) .clfw-grow-art__note {
  z-index: 7;
  text-shadow: 0 0 6px #fff, 0 0 2px #fff;
}