/* Creator program page: commission simulator, two-column lists and the
   application form, built from the pricing page's panels and pills. */

.simulator-section { display: grid; grid-template-columns: 1fr 1.25fr; gap: 60px; align-items: center; }
.simulator-intro p { max-width: 36ch; margin-top: 22px; }
.commission-simulator { padding: 36px 40px; border: 1px solid #353535; border-radius: 26px; background: #202020; }
.simulator-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.simulator-head label { color: #d1d1d6; font-size: var(--interface-size, 15px); }
.simulator-count { display: block; margin: 22px 0 18px; color: #fff; font-size: clamp(56px, 6vw, 84px); font-weight: 600; letter-spacing: -.05em; line-height: 1; font-variant-numeric: tabular-nums; }

.commission-simulator input[type=range] {
  --fill: 10%;
  width: 100%;
  height: 28px;
  margin: 0;
  background: transparent;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}
.commission-simulator input[type=range]::-webkit-slider-runnable-track { height: 6px; border-radius: 999px; background: linear-gradient(90deg, #b318ff var(--fill), #3a3a3d var(--fill)); }
.commission-simulator input[type=range]::-moz-range-track { height: 6px; border-radius: 999px; background: #3a3a3d; }
.commission-simulator input[type=range]::-moz-range-progress { height: 6px; border-radius: 999px; background: #b318ff; }
.commission-simulator input[type=range]::-webkit-slider-thumb { width: 24px; height: 24px; margin-top: -9px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 2px 10px #0008; -webkit-appearance: none; appearance: none; }
.commission-simulator input[type=range]::-moz-range-thumb { width: 24px; height: 24px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 2px 10px #0008; }
.commission-simulator input[type=range]:focus-visible { outline: 2px solid #b318ff; outline-offset: 6px; border-radius: 999px; }

.simulator-results { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 30px 0 22px; }
.simulator-results > div { padding: 18px 18px 20px; border-radius: 16px; background: #2a2a2c; }
.simulator-results dt { color: #a9a9b0; font-size: var(--note-size, 13px); line-height: 1.4; }
.simulator-results dd { margin: 10px 0 0; color: #fff; font-size: clamp(20px, 2vw, 28px); font-weight: 600; letter-spacing: -.03em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.simulator-results > div:nth-child(2) dd { color: #c96bff; }
.commission-simulator > .small-note { margin: 0; }

.creators-split { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; }
.creators-split h2, .creators-rules h2 { font-size: clamp(30px, 3vw, 44px); }
.creators-split .line-list li, .creators-rules .line-list li { font-size: var(--reading-size, 16px); }
.creators-rules .line-list { margin-top: 0; }

.creators-apply { display: grid; grid-template-columns: 1fr 1.25fr; gap: 60px; align-items: start; scroll-margin-top: 100px; }
.creators-apply > div p { max-width: 36ch; margin-top: 22px; }
.creators-dashboard-link { display: inline-flex; gap: 8px; margin-top: 18px; }
.creator-form { padding: 36px 40px; border: 1px solid #353535; border-radius: 26px; background: #202020; }
.creator-form fieldset { display: grid; gap: 18px; margin: 0; padding: 0; border: 0; min-width: 0; }
.creator-field { display: grid; gap: 8px; min-width: 0; }
.creator-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
#creator-code { text-transform: uppercase; letter-spacing: .06em; }
.creator-hint { margin: 0; color: #8e8e95; font-size: 13px; line-height: 1.4; }
.creator-consent { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; color: #b7b7bd; font-size: 14px; line-height: 1.5; cursor: pointer; }
.creator-consent input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: #b318ff; }
.creator-submit { justify-self: start; margin-top: 6px; }
.creator-form fieldset:disabled { opacity: .55; }
.creator-status { margin: 20px 0 0; padding: 14px; border-radius: 12px; background: #ffffff0a; color: #d0d0d6; font-size: 14px; line-height: 1.5; }

@media (max-width: 1000px) {
  .simulator-section, .creators-apply { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 800px) {
  .creators-split { grid-template-columns: 1fr; gap: 36px; }
}
@media (max-width: 600px) {
  .commission-simulator, .creator-form { padding: 24px 20px; border-radius: 22px; }
  .simulator-results { grid-template-columns: 1fr; gap: 8px; }
  .simulator-results > div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 14px 16px; }
  .simulator-results dd { margin: 0; font-size: 22px; }
  .creator-field-row { grid-template-columns: 1fr; gap: 18px; }
  .creator-submit { justify-self: stretch; }
}