/* =====================================================
   CREATOR APPLICATION PAGE
===================================================== */

:root{
  --creator-ink:#20242a;
  --creator-charcoal:#2d3239;
  --creator-slate:#646c77;
  --creator-muted:#8b9199;

  --creator-cream:#f5f0e7;
  --creator-ivory:#fbf9f4;
  --creator-white:#ffffff;
  --creator-stone:#e2dbcf;

  --creator-gold:#b48742;
  --creator-gold-light:#e1c27f;
  --creator-gold-pale:#f7ebc7;

  --creator-blue:#52657c;
  --creator-blue-pale:#eaf0f5;

  --creator-green:#456b57;
  --creator-danger:#9c4c46;

  --creator-border:rgba(45,50,57,.13);
  --creator-shadow:0 24px 60px rgba(38,39,42,.11);
}


/* =====================================================
   PAGE
===================================================== */

.creator-application-page{
  min-height:100vh;
  margin:0;

  color:var(--creator-ink);

  background:
    radial-gradient(
      circle at 10% 8%,
      rgba(180,135,66,.12),
      transparent 28%
    ),
    radial-gradient(
      circle at 92% 18%,
      rgba(82,101,124,.08),
      transparent 30%
    ),
    linear-gradient(
      145deg,
      #eee8de 0%,
      #faf8f3 48%,
      #ece6dc 100%
    );

  font-family:
    Inter,
    Arial,
    sans-serif;
}

.creator-application-main{
  min-height:100vh;
}

.creator-application-wrap{
  width:min(1180px, calc(100% - 40px));
  margin:auto;
}


/* =====================================================
   HERO
===================================================== */

.creator-application-hero{
  position:relative;

  padding:78px 0 74px;

  overflow:hidden;

  color:#fff;

  background:
    radial-gradient(
      circle at 84% 20%,
      rgba(225,194,127,.18),
      transparent 31%
    ),
    linear-gradient(
      135deg,
      #22272d 0%,
      #343a43 55%,
      #24282e 100%
    );
}

.creator-application-hero::before{
  content:"";

  position:absolute;
  inset:0;

  opacity:.17;

  background-image:
    linear-gradient(
      rgba(255,255,255,.035) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255,255,255,.035) 1px,
      transparent 1px
    );

  background-size:44px 44px;
}

.creator-application-hero::after{
  content:"";

  position:absolute;

  width:420px;
  height:420px;

  right:-130px;
  bottom:-260px;

  border:1px solid rgba(225,194,127,.18);
  border-radius:50%;

  box-shadow:
    0 0 0 55px rgba(225,194,127,.025),
    0 0 0 110px rgba(225,194,127,.018);
}

.creator-application-hero-shade{
  position:absolute;
  inset:0;

  background:
    linear-gradient(
      90deg,
      rgba(15,18,22,.18),
      transparent 58%
    );
}

.creator-application-hero-inner{
  position:relative;
  z-index:2;

  display:grid;
  grid-template-columns:minmax(0,1.45fr) minmax(300px,.75fr);
  gap:54px;
  align-items:center;
}

.creator-application-kicker{
  margin:0 0 10px;

  color:var(--creator-gold-light);

  font-size:.72rem;
  font-weight:800;
  letter-spacing:.18em;
  text-transform:uppercase;
}

.creator-application-hero-copy h1{
  max-width:760px;

  margin:0;

  color:#fff;

  font-family:
    "Cormorant Garamond",
    Georgia,
    serif;

  font-size:clamp(3.2rem, 7vw, 5.8rem);
  font-weight:600;
  line-height:.92;
}

.creator-application-hero-lead{
  max-width:720px;

  margin:24px 0 0;

  color:rgba(255,255,255,.88);

  font-family:
    "Cormorant Garamond",
    Georgia,
    serif;

  font-size:1.45rem;
  font-weight:600;
  line-height:1.35;
}

.creator-application-hero-copy > p:not(
  .creator-application-kicker,
  .creator-application-hero-lead
){
  max-width:730px;

  margin:18px 0 0;

  color:rgba(255,255,255,.7);

  font-size:.9rem;
  line-height:1.75;
}

.creator-application-hero-notice{
  max-width:720px;

  margin-top:24px;
  padding:16px 18px;

  display:grid;
  gap:5px;

  border:1px solid rgba(225,194,127,.32);
  border-radius:14px;

  background:rgba(255,255,255,.06);
  backdrop-filter:blur(8px);
}

.creator-application-hero-notice span{
  color:var(--creator-gold-light);

  font-size:.62rem;
  font-weight:800;
  letter-spacing:.13em;
  text-transform:uppercase;
}

.creator-application-hero-notice strong{
  color:#fff;

  font-size:.78rem;
  line-height:1.5;
}


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

.creator-application-hero-card{
  padding:28px;

  border:1px solid rgba(255,255,255,.16);
  border-radius:22px;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.11),
      rgba(255,255,255,.055)
    );

  box-shadow:
    0 24px 48px rgba(0,0,0,.22);

  backdrop-filter:blur(10px);
}

.creator-application-hero-card > p{
  margin:0 0 8px;

  color:var(--creator-gold-light);

  font-size:.63rem;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
}

.creator-application-hero-card h2{
  margin:0;

  color:#fff;

  font-family:
    "Cormorant Garamond",
    Georgia,
    serif;

  font-size:2rem;
  line-height:1;
}

.creator-application-hero-card ul{
  margin:20px 0 0;
  padding:0;

  display:grid;
  gap:12px;

  list-style:none;
}

.creator-application-hero-card li{
  position:relative;

  padding-left:22px;

  color:rgba(255,255,255,.76);

  font-size:.76rem;
  line-height:1.55;
}

.creator-application-hero-card li::before{
  content:"◇";

  position:absolute;
  left:0;
  top:0;

  color:var(--creator-gold-light);

  font-weight:800;
}

.creator-application-hero-card a{
  min-height:43px;

  margin-top:22px;
  padding:0 16px;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  border:1px solid rgba(225,194,127,.36);
  border-radius:11px;

  color:#272b30;
  background:var(--creator-gold-light);

  font-size:.72rem;
  font-weight:800;
  text-decoration:none;
}





/* =====================================================
   CREATOR PROGRAM COMMITMENT
===================================================== */

.creator-application-benefits{
  position:relative;

  padding:84px 0 92px;

  overflow:hidden;

  background:
    radial-gradient(
      circle at 10% 12%,
      rgba(180,135,66,.13),
      transparent 30%
    ),
    radial-gradient(
      circle at 92% 88%,
      rgba(82,101,124,.08),
      transparent 34%
    ),
    linear-gradient(
      155deg,
      #f3ede3 0%,
      #fbf9f4 48%,
      #eee7dc 100%
    );

  border-top:1px solid rgba(180,135,66,.16);
  border-bottom:1px solid rgba(45,50,57,.1);
}

.creator-application-benefits::before{
  content:"";

  position:absolute;
  inset:0;

  pointer-events:none;

  opacity:.34;

  background-image:
    linear-gradient(
      rgba(45,50,57,.025) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(45,50,57,.025) 1px,
      transparent 1px
    );

  background-size:44px 44px;
}


/* =====================================================
   BENEFITS HEADING
===================================================== */

.creator-application-benefits-heading{
  position:relative;
  z-index:2;

  max-width:1040px;

  margin:0 auto 58px;
  padding:46px 48px;

  display:grid;
  grid-template-columns:72px minmax(0,1fr);
  gap:26px 28px;
  align-items:start;

  overflow:hidden;

  border:1px solid rgba(180,135,66,.18);
  border-radius:28px;

  background:
    radial-gradient(
      circle at top right,
      rgba(225,194,127,.18),
      transparent 34%
    ),
    linear-gradient(
      145deg,
      rgba(255,255,255,.92),
      rgba(248,243,234,.88)
    );

  box-shadow:
    0 28px 60px rgba(38,39,42,.1),
    inset 0 1px 0 rgba(255,255,255,.92);

  text-align:left;
}

.creator-application-benefits-heading::before{
  content:"";

  position:absolute;

  top:0;
  left:46px;
  right:46px;

  height:3px;

  border-radius:0 0 999px 999px;

  background:
    linear-gradient(
      90deg,
      transparent,
      var(--creator-gold),
      transparent
    );
}

.creator-application-benefits-heading::after{
  content:"";

  position:absolute;

  width:460px;
  height:460px;

  right:-120px;
  bottom:-180px;

  background:
    url("/media/COSH-Social-Logo.png")
    center / contain
    no-repeat;

  opacity:.045;

  filter:
    grayscale(1)
    sepia(.35);

  pointer-events:none;
}


/* =====================================================
   HEADING CONTENT
===================================================== */

.creator-application-benefits-heading-mark,
.creator-application-benefits-heading-copy,
.creator-application-benefits-intro{
  position:relative;
  z-index:2;
}

.creator-application-benefits-heading-mark{
  width:72px;
  height:72px;

  display:grid;
  place-items:center;

  border:1px solid rgba(180,135,66,.28);
  border-radius:20px;

  background:
    linear-gradient(
      145deg,
      #fff,
      #f8f2e7
    );

  box-shadow:
    0 16px 30px rgba(180,135,66,.18);
}

.creator-application-benefits-heading-mark img{
  width:46px;
  height:46px;

  display:block;
  object-fit:contain;
}

.creator-application-benefits-heading-copy{
  min-width:0;
}

.creator-application-benefits-heading-copy
.creator-application-kicker{
  margin:0 0 10px;

  color:var(--creator-gold);
}

.creator-application-benefits-heading-copy h2{
  max-width:760px;

  margin:0;

  color:var(--creator-charcoal);

  font-family:
    "Cormorant Garamond",
    Georgia,
    serif;

  font-size:clamp(2.8rem,5vw,4.8rem);
  font-weight:700;
  line-height:.92;
}

.creator-application-benefits-intro{
  grid-column:1 / -1;

  margin-top:10px;
  padding-top:30px;

  border-top:1px solid rgba(45,50,57,.1);
}

.creator-application-benefits-lead{
  max-width:900px;

  margin:0;

  color:var(--creator-charcoal);

  font-family:
    "Cormorant Garamond",
    Georgia,
    serif;

  font-size:1.45rem;
  font-weight:600;
  line-height:1.45;
}

.creator-application-benefits-intro-grid{
  margin-top:24px;

  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:28px;
}

.creator-application-benefits-intro-grid p{
  margin:0;
  padding-left:18px;

  color:var(--creator-slate);

  font-size:.84rem;
  line-height:1.85;
}

.creator-application-benefits-intro-grid p:first-child{
  border-left:3px solid var(--creator-gold);
}

.creator-application-benefits-intro-grid p:last-child{
  border-left:3px solid rgba(82,101,124,.45);
}


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

.creator-application-benefits-grid{
  position:relative;
  z-index:2;

  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:22px;
  align-items:start;
}


/* =====================================================
   BENEFIT CARDS
===================================================== */

.creator-application-benefit-card{
  position:relative;

  min-width:0;

  padding:30px 30px 30px 88px;

  overflow:hidden;

  border:1px solid rgba(45,50,57,.12);
  border-radius:22px;

  background:
    radial-gradient(
      circle at top right,
      rgba(225,194,127,.14),
      transparent 35%
    ),
    linear-gradient(
      145deg,
      rgba(255,255,255,.98),
      rgba(247,243,236,.97)
    );

  box-shadow:
    0 20px 44px rgba(38,39,42,.08),
    inset 0 1px 0 rgba(255,255,255,.9);

  transition:
    transform .2s ease,
    border-color .2s ease,
    box-shadow .2s ease;
}

.creator-application-benefit-card::after{
  content:"";

  position:absolute;

  width:150px;
  height:150px;

  right:-72px;
  bottom:-88px;

  border:1px solid rgba(180,135,66,.13);
  border-radius:50%;

  box-shadow:
    0 0 0 28px rgba(180,135,66,.025);
}

.creator-application-benefit-card:hover{
  transform:translateY(-4px);

  border-color:rgba(180,135,66,.28);

  box-shadow:
    0 28px 56px rgba(38,39,42,.12),
    inset 0 1px 0 rgba(255,255,255,.92);
}

/* Seventh card fills the final row */

.creator-application-benefit-card:last-child{
  grid-column:1 / -1;
}

.creator-application-benefit-number{
  position:absolute;

  top:28px;
  left:26px;

  width:44px;
  height:44px;

  display:grid;
  place-items:center;

  border:1px solid rgba(255,255,255,.24);
  border-radius:14px;

  color:#fff;

  background:
    linear-gradient(
      145deg,
      #bd914b,
      #8b622c
    );

  box-shadow:
    0 14px 28px rgba(180,135,66,.28);

  font-size:.72rem;
  font-weight:850;
  letter-spacing:.06em;
}

.creator-application-benefit-card > div{
  position:relative;
  z-index:2;

  min-width:0;
}

.creator-application-benefit-card > div > p:first-child{
  margin:0 0 7px;

  color:var(--creator-gold);

  font-size:.6rem;
  font-weight:850;
  letter-spacing:.15em;
  text-transform:uppercase;
}

.creator-application-benefit-card h3{
  margin:0;

  color:var(--creator-charcoal);

  font-family:
    "Cormorant Garamond",
    Georgia,
    serif;

  font-size:1.85rem;
  font-weight:700;
  line-height:1;
}

.creator-application-benefit-card h3::after{
  content:"";

  display:block;

  width:42px;
  height:2px;

  margin-top:13px;

  border-radius:999px;

  background:
    linear-gradient(
      90deg,
      var(--creator-gold),
      rgba(180,135,66,.1)
    );
}

.creator-application-benefit-card > div > p:not(:first-child){
  margin:15px 0 0;

  color:var(--creator-slate);

  font-size:.8rem;
  line-height:1.78;
}


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

.creator-application-benefit-card:nth-child(3n + 2){
  background:
    radial-gradient(
      circle at top right,
      rgba(82,101,124,.12),
      transparent 36%
    ),
    linear-gradient(
      145deg,
      rgba(255,255,255,.98),
      rgba(241,245,248,.94)
    );
}

.creator-application-benefit-card:nth-child(3n + 2)
.creator-application-benefit-number{
  background:
    linear-gradient(
      145deg,
      #65778a,
      #3f4b58
    );

  box-shadow:
    0 14px 28px rgba(82,101,124,.24);
}

.creator-application-benefit-card:nth-child(3n){
  background:
    radial-gradient(
      circle at top right,
      rgba(69,107,87,.1),
      transparent 36%
    ),
    linear-gradient(
      145deg,
      rgba(255,255,255,.98),
      rgba(241,246,242,.95)
    );
}

.creator-application-benefit-card:nth-child(3n)
.creator-application-benefit-number{
  background:
    linear-gradient(
      145deg,
      #5c7e69,
      #385444
    );

  box-shadow:
    0 14px 28px rgba(69,107,87,.22);
}


/* =====================================================
   FINAL NOTICE
===================================================== */

.creator-application-benefits-notice{
  position:relative;
  z-index:2;

  width:100%;

  margin-top:42px;
  padding:28px 30px;

  display:grid;
  grid-template-columns:minmax(260px,.7fr) minmax(0,1.5fr);
  gap:34px;
  align-items:center;

  border:1px solid rgba(180,135,66,.28);
  border-radius:22px;

  background:
    radial-gradient(
      circle at top right,
      rgba(225,194,127,.2),
      transparent 34%
    ),
    linear-gradient(
      145deg,
      #fff8e8,
      #f2e5c8
    );

  box-shadow:
    0 22px 46px rgba(92,67,31,.11);

  box-sizing:border-box;
}

.creator-application-benefits-notice::before{
  content:"";

  position:absolute;

  top:18px;
  bottom:18px;
  left:0;

  width:4px;

  border-radius:0 999px 999px 0;

  background:
    linear-gradient(
      180deg,
      #d5aa5d,
      #8b622c
    );
}

.creator-application-benefits-notice span{
  display:block;

  color:var(--creator-gold);

  font-size:.61rem;
  font-weight:850;
  letter-spacing:.15em;
  text-transform:uppercase;
}

.creator-application-benefits-notice strong{
  display:block;

  margin-top:7px;

  color:var(--creator-charcoal);

  font-family:
    "Cormorant Garamond",
    Georgia,
    serif;

  font-size:1.55rem;
  line-height:1.05;
}

.creator-application-benefits-notice p{
  margin:0;

  color:var(--creator-slate);

  font-size:.8rem;
  line-height:1.8;
}


/* =====================================================
   BENEFITS RESPONSIVE
===================================================== */

@media(max-width:960px){

  .creator-application-benefits-grid{
    grid-template-columns:1fr;
  }

  .creator-application-benefit-card:last-child{
    grid-column:auto;
  }

  .creator-application-benefits-notice{
    grid-template-columns:1fr;
    gap:16px;
  }

}

@media(max-width:760px){

  .creator-application-benefits-heading{
    padding:34px 26px;

    grid-template-columns:58px minmax(0,1fr);
    gap:20px;
  }

  .creator-application-benefits-heading-mark{
    width:58px;
    height:58px;

    border-radius:16px;
  }

  .creator-application-benefits-heading-mark img{
    width:38px;
    height:38px;
  }

  .creator-application-benefits-heading-copy h2{
    font-size:2.8rem;
  }

  .creator-application-benefits-intro-grid{
    grid-template-columns:1fr;
  }

  .creator-application-benefits-heading::after{
    width:330px;
    height:330px;

    right:-90px;
    bottom:-110px;

    opacity:.04;
  }

}

@media(max-width:640px){

  .creator-application-benefits{
    padding:58px 0 66px;
  }

  .creator-application-benefits-heading{
    margin-bottom:36px;
  }

  .creator-application-benefit-card{
    padding:82px 20px 22px;
  }

  .creator-application-benefit-number{
    top:20px;
    left:20px;
  }

  .creator-application-benefit-card h3{
    font-size:1.65rem;
  }

  .creator-application-benefits-notice{
    padding:24px 20px;
  }

}

@media(max-width:520px){

  .creator-application-benefits-heading{
    padding:28px 20px;

    grid-template-columns:1fr;
  }

  .creator-application-benefits-heading::before{
    left:20px;
    right:20px;
  }

  .creator-application-benefits-heading::after{
    width:240px;
    height:240px;

    right:-70px;
    bottom:-70px;

    opacity:.035;
  }

  .creator-application-benefits-heading-mark{
    width:52px;
    height:52px;
  }

  .creator-application-benefits-heading-mark img{
    width:34px;
    height:34px;
  }

  .creator-application-benefits-heading-copy h2{
    font-size:2.45rem;
  }

  .creator-application-benefits-lead{
    font-size:1.25rem;
  }

}

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

  .creator-application-benefit-card{
    transition:none;
  }

}



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

.creator-application-section{
  padding:56px 0 80px;
}

.creator-application-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) 300px;
  gap:28px;
  align-items:start;
}


/* =====================================================
   FORM
===================================================== */

.creator-application-form{
  min-width:0;

  padding:34px;

  border:1px solid var(--creator-border);
  border-radius:24px;

  background:rgba(255,255,255,.94);

  box-shadow:var(--creator-shadow);
}

.creator-application-message{
  margin-bottom:24px;
  padding:14px 16px;

  border-radius:12px;

  color:var(--creator-green);
  background:rgba(69,107,87,.09);
  border:1px solid rgba(69,107,87,.2);

  font-size:.76rem;
  font-weight:750;
  line-height:1.55;
}

.creator-application-message.is-error{
  color:var(--creator-danger);
  background:rgba(156,76,70,.09);
  border-color:rgba(156,76,70,.2);
}

.creator-application-message[hidden]{
  display:none !important;
}


/* =====================================================
   FIELDSETS
===================================================== */

.creator-application-fieldset{
  margin:0;
  padding:0 0 32px;

  border:0;
  border-bottom:1px solid var(--creator-border);
}

.creator-application-fieldset + .creator-application-fieldset{
  margin-top:32px;
}

.creator-application-fieldset:last-of-type{
  border-bottom:0;
}

.creator-application-fieldset legend{
  padding:0;

  color:var(--creator-charcoal);

  font-family:
    "Cormorant Garamond",
    Georgia,
    serif;

  font-size:2rem;
  font-weight:700;
  line-height:1;
}

.creator-application-section-copy{
  max-width:760px;

  margin:10px 0 22px;

  color:var(--creator-slate);

  font-size:.78rem;
  line-height:1.65;
}


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

.creator-application-grid{
  display:grid;
  gap:18px;
}

.creator-application-grid.two-columns{
  grid-template-columns:repeat(2, minmax(0,1fr));
}

.creator-application-choice-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:12px;

  margin-top:22px;
  margin-bottom:20px;
}


/* =====================================================
   FIELDS
===================================================== */

.creator-application-field{
  min-width:0;

  display:grid;
  gap:8px;
}

.creator-application-field + .creator-application-field{
  margin-top:20px;
}

.creator-application-grid .creator-application-field + .creator-application-field{
  margin-top:0;
}

.creator-application-field label{
  color:var(--creator-charcoal);

  font-size:.68rem;
  font-weight:800;
  letter-spacing:.03em;
}

.creator-application-field input,
.creator-application-field select,
.creator-application-field textarea{
  width:100%;

  border:1px solid rgba(45,50,57,.16);
  border-radius:12px;

  color:var(--creator-ink);
  background:#fff;

  font:inherit;
  font-size:.78rem;

  box-sizing:border-box;

  outline:none;

  transition:
    border-color .18s ease,
    box-shadow .18s ease,
    background .18s ease;
}

.creator-application-field input,
.creator-application-field select{
  min-height:48px;
  padding:0 14px;
}

.creator-application-field textarea{
  min-height:130px;
  padding:14px;

  resize:vertical;
  line-height:1.65;
}

.creator-application-field input::placeholder,
.creator-application-field textarea::placeholder{
  color:#a1a5aa;
}

.creator-application-field input:focus,
.creator-application-field select:focus,
.creator-application-field textarea:focus{
  border-color:rgba(180,135,66,.65);

  background:#fffdf8;

  box-shadow:
    0 0 0 4px rgba(180,135,66,.1);
}

.creator-application-field small{
  color:var(--creator-muted);

  font-size:.62rem;
  line-height:1.45;
}


/* =====================================================
   CHOICES
===================================================== */

.creator-application-choice{
  position:relative;

  min-height:62px;

  padding:12px 14px;

  display:flex;
  align-items:center;
  gap:10px;

  border:1px solid var(--creator-border);
  border-radius:13px;

  color:var(--creator-slate);
  background:
    linear-gradient(
      145deg,
      #fff,
      #f8f6f1
    );

  font-size:.7rem;
  font-weight:750;

  cursor:pointer;

  transition:
    transform .18s ease,
    border-color .18s ease,
    background .18s ease;
}

.creator-application-choice:hover{
  transform:translateY(-2px);

  border-color:rgba(180,135,66,.32);
}

.creator-application-choice input{
  width:18px;
  height:18px;

  flex:0 0 18px;

  accent-color:var(--creator-gold);
}

.creator-application-choice:has(input:checked){
  border-color:rgba(180,135,66,.45);

  color:var(--creator-charcoal);

  background:
    linear-gradient(
      145deg,
      #fff9e8,
      #f3dfab
    );
}


/* =====================================================
   AGREEMENTS
===================================================== */

.creator-application-agreements{
  margin-top:22px;

  display:grid;
  gap:13px;
}

.creator-application-agreement{
  padding:16px;

  display:flex;
  align-items:flex-start;
  gap:12px;

  border:1px solid var(--creator-border);
  border-radius:14px;

  color:var(--creator-slate);
  background:#fff;

  font-size:.73rem;
  line-height:1.6;

  cursor:pointer;
}

.creator-application-agreement input{
  width:18px;
  height:18px;

  margin-top:2px;

  flex:0 0 18px;

  accent-color:var(--creator-gold);
}

.creator-application-agreement:has(input:checked){
  border-color:rgba(69,107,87,.28);

  background:rgba(69,107,87,.055);
}


/* =====================================================
   SUBMIT
===================================================== */

.creator-application-submit{
  margin-top:32px;
  padding:24px;

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;

  border:1px solid rgba(180,135,66,.22);
  border-radius:18px;

  background:
    radial-gradient(
      circle at top right,
      rgba(225,194,127,.16),
      transparent 40%
    ),
    linear-gradient(
      145deg,
      #f8f3e8,
      #fff
    );
}

.creator-application-submit p{
  margin:0 0 5px;

  color:var(--creator-gold);

  font-size:.62rem;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.creator-application-submit strong{
  color:var(--creator-charcoal);

  font-size:.82rem;
}

.creator-application-submit button{
  min-height:50px;

  padding:0 20px;

  flex:0 0 auto;

  border:0;
  border-radius:12px;

  color:#fff;
  background:
    linear-gradient(
      145deg,
      #b48742,
      #8f662e
    );

  box-shadow:
    0 14px 28px rgba(180,135,66,.25);

  font:inherit;
  font-size:.74rem;
  font-weight:850;

  cursor:pointer;

  transition:
    transform .18s ease,
    box-shadow .18s ease,
    opacity .18s ease;
}

.creator-application-submit button:hover{
  transform:translateY(-2px);

  box-shadow:
    0 18px 34px rgba(180,135,66,.3);
}

.creator-application-submit button:disabled{
  opacity:.6;
  cursor:not-allowed;
  transform:none;
}


/* =====================================================
   SIDEBAR
===================================================== */

.creator-application-sidebar{
  position:sticky;
  top:110px;

  display:grid;
  gap:18px;
}

.creator-application-sidebar-card,
.creator-application-scripture{
  border:1px solid var(--creator-border);
  border-radius:20px;

  background:rgba(255,255,255,.93);

  box-shadow:
    0 18px 40px rgba(40,41,45,.08);
}

.creator-application-sidebar-card{
  padding:24px;
}

.creator-application-sidebar-card > p{
  margin:0 0 7px;

  color:var(--creator-gold);

  font-size:.61rem;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
}

.creator-application-sidebar-card h2{
  margin:0;

  color:var(--creator-charcoal);

  font-family:
    "Cormorant Garamond",
    Georgia,
    serif;

  font-size:1.65rem;
  line-height:1.05;
}

.creator-application-sidebar-card ol{
  margin:20px 0 0;
  padding:0;

  display:grid;
  gap:13px;

  list-style:none;
  counter-reset:creator-review-step;
}

.creator-application-sidebar-card ol li{
  position:relative;

  min-height:30px;

  padding-left:40px;

  color:var(--creator-slate);

  font-size:.71rem;
  line-height:1.55;

  counter-increment:creator-review-step;
}

.creator-application-sidebar-card ol li::before{
  content:counter(creator-review-step);

  position:absolute;
  left:0;
  top:0;

  width:28px;
  height:28px;

  display:grid;
  place-items:center;

  border-radius:9px;

  color:#fff;
  background:var(--creator-charcoal);

  font-size:.62rem;
  font-weight:800;
}

.creator-application-sidebar-tags{
  margin-top:18px;

  display:flex;
  flex-wrap:wrap;
  gap:7px;
}

.creator-application-sidebar-tags span{
  padding:7px 9px;

  border:1px solid rgba(82,101,124,.14);
  border-radius:999px;

  color:var(--creator-blue);
  background:var(--creator-blue-pale);

  font-size:.6rem;
  font-weight:800;
}


/* =====================================================
   SCRIPTURE
===================================================== */

.creator-application-scripture{
  margin:0;
  padding:23px;

  border-left:3px solid var(--creator-gold);
}

.creator-application-scripture p{
  margin:0;

  color:var(--creator-charcoal);

  font-family:
    "Cormorant Garamond",
    Georgia,
    serif;

  font-size:1.08rem;
  font-weight:600;
  line-height:1.5;
}

.creator-application-scripture cite{
  display:block;

  margin-top:12px;

  color:var(--creator-gold);

  font-size:.62rem;
  font-style:normal;
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
}


/* =====================================================
   VALIDATION
===================================================== */

.creator-application-field input:invalid:not(:placeholder-shown),
.creator-application-field textarea:invalid:not(:placeholder-shown),
.creator-application-field select:invalid:not(:focus){
  border-color:rgba(156,76,70,.3);
}

.creator-application-field.is-error input,
.creator-application-field.is-error select,
.creator-application-field.is-error textarea{
  border-color:var(--creator-danger);

  box-shadow:
    0 0 0 4px rgba(156,76,70,.08);
}


/* =====================================================
   RESPONSIVE
===================================================== */

@media(max-width:980px){

  .creator-application-hero-inner{
    grid-template-columns:1fr;
  }

  .creator-application-hero-card{
    max-width:620px;
  }

  .creator-application-layout{
    grid-template-columns:1fr;
  }

  .creator-application-sidebar{
    position:static;

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

  .creator-application-scripture{
    grid-column:1 / -1;
  }

}

@media(max-width:760px){

  .creator-application-wrap{
    width:min(100% - 28px, 1180px);
  }

  .creator-application-hero{
    padding:58px 0 56px;
  }

  .creator-application-hero-inner{
    gap:34px;
  }

  .creator-application-form{
    padding:24px 20px;
  }

  .creator-application-grid.two-columns,
  .creator-application-choice-grid{
    grid-template-columns:1fr 1fr;
  }

  .creator-application-submit{
    align-items:stretch;
    flex-direction:column;
  }

  .creator-application-submit button{
    width:100%;
  }

  .creator-application-sidebar{
    grid-template-columns:1fr;
  }

  .creator-application-scripture{
    grid-column:auto;
  }

}

@media(max-width:520px){

  .creator-application-hero-copy h1{
    font-size:3.2rem;
  }

  .creator-application-hero-lead{
    font-size:1.22rem;
  }

  .creator-application-hero-card{
    padding:22px;
  }

  .creator-application-section{
    padding-top:34px;
  }

  .creator-application-form{
    padding:21px 16px;
    border-radius:18px;
  }

  .creator-application-fieldset legend{
    font-size:1.7rem;
  }

  .creator-application-grid.two-columns,
  .creator-application-choice-grid{
    grid-template-columns:1fr;
  }

  .creator-application-choice{
    min-height:56px;
  }

  .creator-application-submit{
    padding:20px;
  }

}

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

  .creator-application-choice,
  .creator-application-submit button,
  .creator-application-field input,
  .creator-application-field select,
  .creator-application-field textarea{
    transition:none;
  }

}


/* =====================================================
   CREATOR APPLICATION SUCCESS MODAL
===================================================== */

.creator-application-success-modal{
  position:fixed;
  inset:0;

  z-index:99999;

  padding:30px 20px;

  display:flex;
  align-items:center;
  justify-content:center;

  box-sizing:border-box;

  opacity:0;
  visibility:hidden;

  transition:
    opacity .18s ease,
    visibility .18s ease;
}


/* THE HIDDEN ATTRIBUTE ALWAYS WINS */

.creator-application-success-modal[hidden]{
  display:none !important;
}


/* OPEN STATE */

.creator-application-success-modal.is-open{
  opacity:1;
  visibility:visible;
}


/* STOP THE PAGE FROM SCROLLING */

body.creator-application-modal-open{
  overflow:hidden;
}


/* =====================================================
   BACKDROP
===================================================== */

.creator-application-success-backdrop{
  position:absolute;
  inset:0;

  background:
    rgba(16,20,24,.78);

  backdrop-filter:
    blur(10px);

  cursor:default;
}


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

.creator-application-success-card{
  position:relative;
  z-index:2;

  width:min(
    640px,
    100%
  );

  max-height:calc(100vh - 60px);

  padding:48px;

  overflow-x:hidden;
  overflow-y:auto;

  border:1px solid rgba(191,152,84,.28);
  border-radius:28px;

  background:
    radial-gradient(
      circle at top right,
      rgba(214,182,117,.18),
      transparent 38%
    ),
    linear-gradient(
      145deg,
      #fffdf9,
      #f4ede1
    );

  box-shadow:
    0 40px 90px rgba(0,0,0,.32);

  box-sizing:border-box;

  text-align:center;

  transform:
    translateY(18px)
    scale(.985);

  transition:
    transform .18s ease;
}

.creator-application-success-modal.is-open
.creator-application-success-card{
  transform:
    translateY(0)
    scale(1);
}


/* WATERMARK */

.creator-application-success-card::after{
  content:"";

  position:absolute;

  right:-120px;
  bottom:-120px;

  width:360px;
  height:360px;

  background:
    url("/media/COSH-Social-Logo.png")
    center / contain
    no-repeat;

  opacity:.045;

  pointer-events:none;
}


/* KEEP CONTENT ABOVE WATERMARK */

.creator-application-success-card > *{
  position:relative;
  z-index:2;
}


/* =====================================================
   TOP-RIGHT CLOSE BUTTON
===================================================== */

.creator-application-modal-close{
  position:absolute;
  top:18px;
  right:18px;

  width:42px;
  height:42px;

  padding:0;

  display:grid;
  place-items:center;

  border:1px solid rgba(45,50,57,.12);
  border-radius:50%;

  color:#3c424a;
  background:rgba(255,255,255,.92);

  box-shadow:
    0 10px 24px rgba(31,33,36,.12);

  font:inherit;
  font-size:1.55rem;
  font-weight:500;
  line-height:1;

  cursor:pointer;

  transition:
    transform .18s ease,
    color .18s ease,
    background .18s ease,
    box-shadow .18s ease;
}

.creator-application-modal-close span{
  display:block;

  transform:
    translateY(-1px);
}

.creator-application-modal-close:hover{
  transform:
    rotate(5deg)
    scale(1.06);

  color:#8a6026;
  background:#fffaf0;

  box-shadow:
    0 14px 30px rgba(31,33,36,.16);
}

.creator-application-modal-close:focus-visible{
  outline:3px solid rgba(180,135,66,.28);
  outline-offset:3px;
}


/* =====================================================
   ICON
===================================================== */

.creator-application-success-icon{
  width:96px;
  height:96px;

  margin:0 auto 22px;

  display:grid;
  place-items:center;

  border:1px solid rgba(191,152,84,.25);
  border-radius:24px;

  background:
    linear-gradient(
      145deg,
      #ffffff,
      #efe3cb
    );

  box-shadow:
    0 20px 40px rgba(180,135,66,.18);
}

.creator-application-success-icon img{
  width:64px;
  height:64px;

  display:block;
  object-fit:contain;
}


/* =====================================================
   COPY
===================================================== */

.creator-application-success-eyebrow{
  margin:0;

  color:#b48742;

  font-size:.68rem;
  font-weight:800;
  letter-spacing:.18em;
  text-transform:uppercase;
}

.creator-application-success-card h2{
  margin:10px 0 18px;

  color:#2d3239;

  font-family:
    "Cormorant Garamond",
    Georgia,
    serif;

  font-size:3rem;
  font-weight:700;
  line-height:.95;
}

.creator-application-success-text{
  max-width:520px;

  margin:0 auto 30px;

  color:#69717d;

  font-size:.95rem;
  line-height:1.85;
}


/* =====================================================
   STATUS BOXES
===================================================== */

.creator-application-success-info{
  margin-bottom:28px;

  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
}

.creator-application-success-info div{
  min-width:0;

  padding:18px;

  border:1px solid rgba(191,152,84,.15);
  border-radius:16px;

  background:rgba(255,255,255,.9);
}

.creator-application-success-info strong{
  display:block;

  margin-bottom:8px;

  color:#2d3239;

  font-size:.82rem;
}

.creator-application-success-info span{
  display:block;

  color:#6c7480;

  font-size:.82rem;
  line-height:1.6;
}


/* =====================================================
   FOOTER
===================================================== */

.creator-application-success-footer{
  max-width:560px;

  margin:0 auto 28px;

  color:#808892;

  font-size:.82rem;
  line-height:1.8;
}


/* =====================================================
   RETURN BUTTON
===================================================== */

.creator-application-success-button{
  min-width:250px;
  min-height:54px;

  padding:0 25px;

  border:0;
  border-radius:16px;

  color:#4a3510;

  background:
    linear-gradient(
      180deg,
      #fff2b1 0%,
      #f5d46d 40%,
      #e2ab35 100%
    );

  box-shadow:
    0 16px 34px rgba(201,142,42,.28);

  font:inherit;
  font-size:.85rem;
  font-weight:800;

  cursor:pointer;

  transition:
    transform .18s ease,
    box-shadow .18s ease;
}

.creator-application-success-button:hover{
  transform:
    translateY(-2px);

  box-shadow:
    0 22px 44px rgba(201,142,42,.34);
}

.creator-application-success-button:focus-visible{
  outline:3px solid rgba(180,135,66,.3);
  outline-offset:4px;
}


/* =====================================================
   RESPONSIVE
===================================================== */

@media(max-width:700px){

  .creator-application-success-modal{
    padding:18px 12px;
  }

  .creator-application-success-card{
    max-height:calc(100vh - 36px);

    padding:
      70px
      24px
      30px;

    border-radius:22px;
  }

  .creator-application-modal-close{
    top:15px;
    right:15px;
  }

  .creator-application-success-icon{
    width:78px;
    height:78px;
  }

  .creator-application-success-icon img{
    width:52px;
    height:52px;
  }

  .creator-application-success-card h2{
    font-size:2.35rem;
  }

  .creator-application-success-info{
    grid-template-columns:1fr;
  }

  .creator-application-success-button{
    width:100%;
    min-width:0;
  }

}


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

  .creator-application-success-modal,
  .creator-application-success-card,
  .creator-application-modal-close,
  .creator-application-success-button{
    transition:none;
  }

}