/* ==================================================
   XTRIM RECORDS — COMPLETE HOMEPAGE CSS
================================================== */


/* ==================================================
   GLOBAL RESET
================================================== */

* {
    box-sizing: border-box;
}


html,
body {

    margin: 0;
    padding: 0;

    width: 100%;
    min-width: 0;
    min-height: 100%;

    font-family:
        Helvetica,
        Arial,
        sans-serif;

    background:
        #050205;

    color:
        #ffffff;

    overflow-x:
        hidden;

    scrollbar-width:
        none;

    -ms-overflow-style:
        none;
}


html::-webkit-scrollbar,
body::-webkit-scrollbar {

    display:
        none;

    width:
        0;

    height:
        0;
}


body {

    position:
        relative;

    width:
        100%;

    min-height:
        100vh;

    min-height:
        100dvh;
}



/* ==================================================
   DISABLE SELECTION / DRAGGING
================================================== */

body,
body * {

    -webkit-user-select:
        none;

    -moz-user-select:
        none;

    -ms-user-select:
        none;

    user-select:
        none;

    -webkit-touch-callout:
        none;
}


a,
button,
img,
svg,
i {

    -webkit-user-drag:
        none;

    user-drag:
        none;

    -webkit-user-select:
        none;

    user-select:
        none;

    -webkit-touch-callout:
        none;
}


img {

    pointer-events:
        none;
}



/* ==================================================
   BACKGROUND
   PRIMARY MAGENTA: #8e024d
================================================== */

.xtrim-bg {

    position:
        fixed;

    inset:
        0;

    width:
        100vw;

    height:
        100vh;

    height:
        100dvh;

    overflow:
        hidden;

    pointer-events:
        none;

    z-index:
        0;


    background:

        radial-gradient(
            ellipse at 47% 45%,

            rgba(142,2,77,0.46) 0%,

            rgba(91,2,53,0.39) 29%,

            rgba(43,2,31,0.55) 54%,

            rgba(16,2,15,0.88) 77%,

            #050205 100%
        );


    transform:
        translateZ(0);

    backface-visibility:
        hidden;

    -webkit-backface-visibility:
        hidden;

    isolation:
        isolate;


    opacity:
        0;


    animation:
        xtrimBackgroundEntrance
        1.35s
        cubic-bezier(.22,.61,.36,1)
        1.05s
        forwards;
}



/* ==================================================
   LIQUID 1
================================================== */

.liquid-1 {

    position:
        absolute;

    width:
        84vw;

    height:
        108vh;

    left:
        -34vw;

    top:
        -18vh;

    border-radius:
        50%;


    background:

        radial-gradient(
            ellipse at 58% 48%,

            rgba(142,2,77,0.94) 0%,

            rgba(142,2,77,0.72) 21%,

            rgba(105,2,62,0.46) 42%,

            rgba(55,2,40,0.19) 61%,

            transparent 79%
        );


    filter:
        blur(76px);

    opacity:
        0.90;

    transform:
        translate3d(0,0,0);

    backface-visibility:
        hidden;

    will-change:
        transform;


    animation:
        liquidMove1
        19s
        cubic-bezier(.45,.05,.55,.95)
        infinite;
}



/* ==================================================
   LIQUID 2
================================================== */

.liquid-2 {

    position:
        absolute;

    width:
        82vw;

    height:
        105vh;

    right:
        -35vw;

    bottom:
        -21vh;

    border-radius:
        50%;


    background:

        radial-gradient(
            ellipse at 41% 46%,

            rgba(142,2,77,0.84) 0%,

            rgba(121,2,68,0.63) 23%,

            rgba(82,2,53,0.38) 45%,

            rgba(39,2,31,0.16) 63%,

            transparent 80%
        );


    filter:
        blur(84px);

    opacity:
        0.85;

    transform:
        translate3d(0,0,0);

    backface-visibility:
        hidden;

    will-change:
        transform;


    animation:
        liquidMove2
        22s
        cubic-bezier(.45,.05,.55,.95)
        infinite;
}



/* ==================================================
   LIQUID 3
================================================== */

.liquid-3 {

    position:
        absolute;

    width:
        64vw;

    height:
        83vh;

    left:
        18vw;

    top:
        8vh;

    border-radius:
        50%;


    background:

        radial-gradient(
            ellipse at 48% 52%,

            rgba(142,2,77,0.38) 0%,

            rgba(112,2,65,0.25) 32%,

            rgba(67,2,46,0.11) 56%,

            transparent 78%
        );


    filter:
        blur(100px);

    opacity:
        0.73;

    transform:
        translate3d(0,0,0);

    backface-visibility:
        hidden;

    will-change:
        transform;


    animation:
        liquidMove3
        24s
        cubic-bezier(.45,.05,.55,.95)
        infinite;
}



/* ==================================================
   LIQUID 4
================================================== */

.liquid-4 {

    position:
        absolute;

    width:
        54vw;

    height:
        125vh;

    left:
        24vw;

    top:
        -22vh;

    border-radius:
        50%;


    background:

        linear-gradient(
            112deg,

            transparent 5%,

            rgba(142,2,77,0.02) 19%,

            rgba(142,2,77,0.18) 38%,

            rgba(181,5,99,0.30) 49%,

            rgba(142,2,77,0.15) 62%,

            transparent 82%
        );


    filter:
        blur(72px);

    opacity:
        0.66;

    transform:
        translate3d(0,0,0);

    backface-visibility:
        hidden;

    will-change:
        transform;


    animation:
        liquidMove4
        26s
        cubic-bezier(.45,.05,.55,.95)
        infinite;
}



/* ==================================================
   PARTICLES
================================================== */

.space-particles {

    position:
        absolute;

    inset:
        0;

    z-index:
        1;

    pointer-events:
        none;


    background:

        radial-gradient(circle at 8% 17%, rgba(255,255,255,0.20) 0 0.55px, transparent 1px),

        radial-gradient(circle at 17% 61%, rgba(255,255,255,0.13) 0 0.5px, transparent 0.95px),

        radial-gradient(circle at 26% 27%, rgba(244,223,255,0.16) 0 0.6px, transparent 1.05px),

        radial-gradient(circle at 36% 78%, rgba(255,255,255,0.12) 0 0.5px, transparent 0.95px),

        radial-gradient(circle at 43% 19%, rgba(255,255,255,0.18) 0 0.55px, transparent 1px),

        radial-gradient(circle at 58% 66%, rgba(255,255,255,0.11) 0 0.5px, transparent 0.95px),

        radial-gradient(circle at 67% 31%, rgba(244,223,255,0.15) 0 0.55px, transparent 1px),

        radial-gradient(circle at 77% 74%, rgba(255,255,255,0.12) 0 0.5px, transparent 0.95px),

        radial-gradient(circle at 86% 18%, rgba(255,255,255,0.17) 0 0.55px, transparent 1px),

        radial-gradient(circle at 93% 53%, rgba(255,255,255,0.10) 0 0.5px, transparent 0.95px);


    opacity:
        0.40;

    transform:
        translate3d(0,0,0);

    will-change:
        transform;


    animation:
        spaceParticlesDrift
        34s
        linear
        infinite;
}



/* ==================================================
   GLINTS
================================================== */

.space-glints {

    position:
        absolute;

    inset:
        0;

    z-index:
        1;

    pointer-events:
        none;


    background:

        radial-gradient(
            circle at 21% 32%,
            rgba(255,255,255,0.18) 0%,
            rgba(255,255,255,0.05) 17%,
            transparent 55%
        ),

        radial-gradient(
            circle at 73% 22%,
            rgba(255,255,255,0.14) 0%,
            rgba(255,255,255,0.04) 18%,
            transparent 56%
        );


    background-size:
        9px 9px,
        7px 7px;

    background-repeat:
        no-repeat;

    opacity:
        0.42;


    animation:
        spaceGlintsTwinkle
        7s
        ease-in-out
        infinite;
}



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

.dot-grid {

    position:
        absolute;

    inset:
        0;

    z-index:
        2;


    background-image:

        radial-gradient(
            circle,
            rgba(0,0,0,0.82) 0.42px,
            transparent 0.62px
        );


    background-size:
        4px 4px;

    opacity:
        0.78;

    mix-blend-mode:
        multiply;
}



/* ==================================================
   GRAIN
================================================== */

.grain {

    position:
        absolute;

    inset:
        -20%;

    width:
        140%;

    height:
        140%;

    z-index:
        3;

    opacity:
        0.13;


    background-image:
        url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='4' seed='9' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");


    background-size:
        105px 105px;

    mix-blend-mode:
        soft-light;

    transform:
        translate3d(0,0,0);

    will-change:
        transform;


    animation:
        grainMove
        1s
        steps(2,end)
        infinite;
}



/* ==================================================
   VIGNETTE
================================================== */

.vignette {

    position:
        absolute;

    inset:
        0;

    z-index:
        4;


    background:

        radial-gradient(
            ellipse at center,

            transparent 18%,

            rgba(5,1,6,0.08) 38%,

            rgba(4,1,5,0.30) 63%,

            rgba(1,0,3,0.78) 100%
        );
}




/* ==================================================
   SUBMIT MUSIC PAGE — STANDALONE LAYOUT
================================================== */

html,
body {
    width: 100%;
    min-height: 100%;
    background: #050205;
    color: #ffffff;
}

body {
    min-height: 100vh;
    min-height: 100dvh;
    overflow: hidden;
}

.submit-page {
    position: relative;
    z-index: 2;
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(22px, 3vw, 42px) 18px;
}

/* Standalone width matching the Wix embed proportions. */
.form-stage {
    width: min(92vw, 460px);
    height: auto;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.form-stack {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Entrance order:
   1) title
   2) form
   3) background
   Same easing/timing language as page 1.
*/
.form-title {
    opacity: 0;
    transform: translateY(20px);
    filter: blur(7px);
    animation:
        submitTitleEntrance
        .72s
        cubic-bezier(.22,.61,.36,1)
        .05s
        forwards;
}

.submission-form {
    opacity: 0;
    transform: translateY(15px);
    filter: blur(5px);
    animation:
        submitFormEntrance
        .68s
        cubic-bezier(.22,.61,.36,1)
        .38s
        forwards;
}

@keyframes submitTitleEntrance {
    from {
        opacity: 0;
        transform: translateY(20px);
        filter: blur(7px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

@keyframes submitFormEntrance {
    from {
        opacity: 0;
        transform: translateY(15px);
        filter: blur(5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

/* Keep the dynamic-form movement smooth when validation/contact fields appear. */
.form-stack {
    transition:
        transform .22s ease,
        opacity .22s ease;
}

/* Inputs remain selectable/typable. Display-only form text stays untouchable. */
.submission-form input,
.submission-form textarea,
.submission-form .control {
    -webkit-user-select: text;
    user-select: text;
}

/* Requested display-only labels: no selection, no tap/callout interaction. */
.submission-form .contact-main-label,
.submission-form .dynamic-contact-label,
.submission-form .checkbox-label {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

    -webkit-touch-callout: none;
    pointer-events: none;
}

/* Buttons and label containers remain non-selectable as before. */
.submission-form button,
.submission-form label,
.submission-form .contact-option,
.submission-form .checkbox-row {
    -webkit-user-select: none;
    user-select: none;
}

/* Responsive standalone sizing. */
@media (max-height: 760px) and (min-width: 481px) {
    .submit-page {
        align-items: flex-start;
        overflow-y: auto;
        scrollbar-width: none;
        padding-top: 20px;
        padding-bottom: 20px;
    }

    .submit-page::-webkit-scrollbar {
        display: none;
    }
}

@media (max-width: 480px) {
    body {
        overflow-y: auto;
        scrollbar-width: none;
    }

    body::-webkit-scrollbar {
        display: none;
    }

    .submit-page {
        min-height: 100dvh;
        align-items: flex-start;
        padding: 14px 12px 18px;
    }

    .form-stage {
        width: min(100%, 410px);
    }
}


/* ==================================================
   WIX FORM — ORIGINAL STYLING
================================================== */

/* ==================================================
   ENTIRE TITLE + FORM IS CENTERED TOGETHER
================================================== */

.form-stage {
  width: 100%;
  height: 100vh;

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


.form-stack {
  width: 100%;

  display: flex;
  flex-direction: column;
  align-items: center;

  transition: transform .22s ease;
}


/* ==================================================
   TITLE
================================================== */

.form-title {
  width: 100%;

  margin: 0 0 18px 0;
  padding: 0;

  color: #fff;

  font-family: Helvetica, Arial, sans-serif;

  font-size: 36px;
  line-height: 40px;
  font-weight: 700;

  text-align: center;

  text-shadow:
    0 0 40px rgba(255, 186, 239, 0.05);

  pointer-events: none;

  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;

  -webkit-user-drag: none;
  user-drag: none;

  -webkit-touch-callout: none;

  cursor: default;
}


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

.submission-form {
  width: 100%;

  padding: 24px;

  background: rgba(0, 0, 0, 0.18);

  border: 0.6px solid rgba(255, 186, 239, 0.28);
  border-radius: 12px;

  box-shadow:
    0 0 40px 4px rgba(255, 186, 239, 0.05);
}


/* ==================================================
   FIELD
================================================== */

.field {
  margin: 0;
}


/* ==================================================
   LABELS
================================================== */

.field label,
.contact-main-label {
  display: block;

  margin: 0 0 7px 0;
  padding: 0;

  color: #fff;

  font-family: Helvetica, Arial, sans-serif;

  font-size: 14px;
  line-height: 16px;
  font-weight: 400;
}


/* ==================================================
   INPUTS
================================================== */

.control {
  display: block;

  width: 100%;
  height: 39px;

  margin: 0;
  padding: 0 12px;

  background: rgba(110, 62, 103, 0.38);

  border: none;

  border-bottom:
    1px solid rgba(202, 199, 225, 0.25);

  border-radius: 0;

  outline: none;

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

  font-family: Helvetica, Arial, sans-serif;

  font-size: 14px;
  line-height: 39px;
  font-weight: 400;
}


.control::placeholder {
  color: rgba(255,255,255,0.68);

  opacity: 1;

  font-family: Helvetica, Arial, sans-serif;

  font-size: 14px;
  font-weight: 400;
}


.control:focus {
  background: rgba(110,62,103,0.43);
}


/* ==================================================
   NOTES
================================================== */

textarea.control {
  height: 94px;
  min-height: 94px;

  padding: 11px 12px;

  line-height: 18px;

  resize: none;

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

  white-space: pre-wrap;
  overflow-wrap: break-word;
  word-break: normal;
}


/* ==================================================
   ERROR BORDER
================================================== */

.field.has-error .control,
.dynamic-contact-field.has-error .control {
  border-bottom:
    1px solid #ff4b5f;
}


/* ==================================================
   ERROR SLOT
================================================== */

.error-slot {
  width: 100%;
  height: 19px;

  margin: 0;
  padding-top: 4px;

  overflow: hidden;
}


.error-message {
  display: flex;
  align-items: center;
  gap: 4px;

  margin: 0;
  padding: 0;

  visibility: hidden;
  opacity: 0;

  color: #ff4b5f;

  font-family: Helvetica, Arial, sans-serif;

  font-size: 11px;
  line-height: 13px;
  font-weight: 400;
}


.field.has-error .error-message,
.checkbox-field.has-error .error-message,
.contact-selector.has-error > .contact-error-slot .error-message,
.dynamic-contact-field.has-error .error-message {
  visibility: visible;
  opacity: 1;
}


.error-icon {
  display: inline-flex;

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

  width: 11px;
  height: 11px;

  min-width: 11px;

  border: 1px solid #ff4b5f;

  border-radius: 50%;

  color: #ff4b5f;

  font-family: Arial, sans-serif;

  font-size: 7px;
  line-height: 1;
  font-weight: 400;
}


/* ==================================================
   ORIGINAL GAP
================================================== */

.row-gap {
  height: 7px;
}


/* ==================================================
   CONTACT SELECTOR
================================================== */

.contact-selector {
  margin: 0;
}


.contact-options {
  display: grid;

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

  gap: 8px;

  width: 100%;
}


.contact-option {
  appearance: none;
  -webkit-appearance: none;

  height: 58px;

  margin: 0;
  padding: 6px 4px;

  display: flex;
  flex-direction: column;

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

  gap: 6px;

  background: transparent;

  border:
    1px solid rgba(202,199,225,0.25);

  border-radius: 6px;

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

  font-family: Helvetica, Arial, sans-serif;

  cursor: pointer;

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


.contact-option i {
  font-size: 14px;
  line-height: 14px;

  color: rgba(255,255,255,0.82);
}


.contact-option span {
  font-size: 11px;
  line-height: 12px;
  font-weight: 400;
}


.contact-option:hover {
  background:
    rgba(110, 62, 103, 0.18);

  border-color:
    rgba(202,199,225,0.38);
}


.contact-option.selected {
  background:
    rgba(110, 62, 103, 0.32);

  border-color:
    rgba(202,199,225,0.52);

  color: #fff;
}


.contact-option.selected i {
  color: #fff;
}


/* ==================================================
   CONTACT ERROR
================================================== */

.contact-error-slot {
  width: 100%;
  height: 19px;

  margin: 0;
  padding-top: 4px;

  overflow: hidden;
}


/* ==================================================
   DYNAMIC CONTACT INPUTS
================================================== */

.dynamic-contact-fields {
  width: 100%;
}


.dynamic-contact-field {
  width: 100%;
  margin: 0;
}


.dynamic-contact-field + .dynamic-contact-field {
  margin-top: 7px;
}


.dynamic-contact-label {
  display: block;

  margin: 0 0 7px 0;

  color: #fff;

  font-family: Helvetica, Arial, sans-serif;

  font-size: 14px;
  line-height: 16px;
  font-weight: 400;
}


/* ==================================================
   CHECKBOX
================================================== */

.checkbox-field {
  margin: 0;
}


.checkbox-row {
  display: flex;

  align-items: center;

  gap: 8px;

  height: 18px;

  margin: 0;
  padding: 0;

  cursor: pointer;

  user-select: none;
}


.checkbox-row input {
  position: absolute;

  width: 1px;
  height: 1px;

  opacity: 0;

  pointer-events: none;
}


.custom-checkbox {
  position: relative;

  display: inline-block;

  width: 16px;
  height: 16px;

  min-width: 16px;
  min-height: 16px;

  background: transparent;

  border:
    1px solid rgba(202,199,225,0.25);

  border-radius: 1px;
}


.checkbox-row input:checked + .custom-checkbox {
  background: transparent;

  border:
    1px solid rgba(202,199,225,0.25);
}


.checkbox-row input:checked + .custom-checkbox::after {
  content: "";

  position: absolute;

  left: 4px;
  top: 2px;

  width: 5px;
  height: 8px;

  border: solid rgba(255,255,255,0.95);

  border-width:
    0 1.5px 1.5px 0;

  transform: rotate(45deg);
}


.checkbox-label {
  color: #fff;

  font-family: Helvetica, Arial, sans-serif;

  font-size: 14px;
  line-height: 16px;
  font-weight: 400;
}


.checkbox-field.has-error .custom-checkbox {
  background: transparent;

  border-color: #ff4b5f;
}


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

.submit-button {
  display: block;

  width: 100%;
  height: 42px;

  margin: 0;
  padding: 0;

  border: none;

  border-radius: 21px;

  background: #963cff;

  color: #fff;

  font-family: Helvetica, Arial, sans-serif;

  font-size: 14px;
  line-height: 42px;
  font-weight: 400;

  text-align: center;

  cursor: pointer;

  transition:
    background .18s ease,
    transform .1s ease;
}


.submit-button:hover {
  background: #b264ff;
}


.submit-button:active {
  background: #a64cff;

  transform: scale(.995);
}


.submit-button:focus {
  outline: none;
}


/* ==================================================
   SUCCESS MESSAGE
================================================== */

.success-message {
  display: none;

  width: 100%;

  color: #fff;

  font-family: Helvetica, Arial, sans-serif;

  text-align: center;

  opacity: 0;

  transform: translateY(10px);
}

.success-message.show {
  display: block;

  animation:
    successFadeIn .45s
    ease-out
    forwards;
}

.success-message-title {
  margin: 0 0 6px 0;

  font-size: 30px;
  line-height: 34px;
  font-weight: 700;
}

.success-message-text {
  margin: 0;

  font-size: 15px;
  line-height: 20px;
  font-weight: 400;
}

@keyframes successFadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* ==================================================
   MOBILE — SMALLER + MORE COMPACT
   DESKTOP IS NOT AFFECTED
================================================== */

@media (max-width: 480px) {

  html,
  body {
    height: auto;
    min-height: 0;

    overflow-x: hidden !important;
    overflow-y: hidden !important;

    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }

  html::-webkit-scrollbar,
  body::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }


  /* FORM WRAPPER */

  .form-stage {
    height: auto;
    min-height: 0;

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

    padding: 10px 0 14px 0;
  }

  .form-stack {
    width: 100%;
    height: auto;
  }


  /* TITLE */

  .form-title {
    font-size: 26px;
    line-height: 29px;

    margin: 0 0 9px 0;
  }


  /* FORM */

  .submission-form {
    width: 100%;
    height: auto;

    padding: 13px;
  }


  /* LABELS */

  .field label,
  .contact-main-label,
  .dynamic-contact-label {
    margin-bottom: 4px;

    font-size: 13px;
    line-height: 15px;
  }


  /* INPUTS */

  .control {
    height: 31px;

    padding-left: 9px;
    padding-right: 9px;

    font-size: 13px;
    line-height: 31px;
  }

  .control::placeholder {
    font-size: 12px;
  }


  /* NOTES */

  textarea.control {
    height: 60px;
    min-height: 60px;

    padding: 7px 9px;

    font-size: 13px;
    line-height: 16px;

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

    white-space: pre-wrap;
    overflow-wrap: break-word;
    word-break: normal;
  }


  /* ERRORS */

  .error-slot,
  .contact-error-slot {
    height: 14px;

    padding-top: 2px;
  }

  .error-message {
    font-size: 10px;
    line-height: 11px;
  }

  .error-icon {
    width: 10px;
    height: 10px;
    min-width: 10px;

    font-size: 6px;
  }


  /* GAPS */

  .row-gap {
    height: 2px;
  }


  /* CONTACT OPTIONS */

  .contact-options {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    gap: 5px;
  }

  .contact-option {
    height: 42px;

    padding: 3px;

    gap: 3px;
  }

  .contact-option i {
    font-size: 12px;
    line-height: 12px;
  }

  .contact-option span {
    font-size: 10px;
    line-height: 10px;
  }


  /* DYNAMIC CONTACT FIELDS */

  .dynamic-contact-field + .dynamic-contact-field {
    margin-top: 2px;
  }

  .dynamic-contact-label {
    margin-bottom: 4px;
  }


  /* CHECKBOX */

  .checkbox-row {
    height: 16px;

    gap: 6px;
  }

  .custom-checkbox {
    width: 14px;
    height: 14px;

    min-width: 14px;
    min-height: 14px;
  }

  .checkbox-label {
    font-size: 13px;
    line-height: 15px;
  }

  .checkbox-row input:checked + .custom-checkbox::after {
    left: 3px;
    top: 1px;

    width: 4px;
    height: 7px;
  }


  /* SUBMIT */

  .submit-button {
    height: 34px;

    border-radius: 17px;

    font-size: 13px;
    line-height: 34px;
  }


  /* SUCCESS MESSAGE */

  .success-message-title {
    font-size: 24px;
    line-height: 28px;
  }

  .success-message-text {
    font-size: 13px;
    line-height: 18px;
  }

}

/* ==================================================
   FINAL STANDALONE OVERRIDES
================================================== */

@media (max-width: 480px) {
    html,
    body {
        min-height: 100%;
        height: auto;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        scrollbar-width: none !important;
    }

    html::-webkit-scrollbar,
    body::-webkit-scrollbar {
        display: none !important;
    }

    .submit-page {
        min-height: 100dvh;
        display: flex;
        align-items: flex-start;
        justify-content: center;
        padding: 14px 12px 18px;
    }

    .form-stage {
        width: min(100%, 410px);
        height: auto;
        min-height: 0;
        padding: 10px 0 14px 0;
    }
}

/* ==================================================
   EDGE / CHROME AUTOFILL
   KEEP ORIGINAL TRANSPARENT FIELD APPEARANCE
================================================== */

html[data-theme="dark"] .submission-form input.control:-webkit-autofill,
html[data-theme="dark"] .submission-form input.control:-webkit-autofill:hover,
html[data-theme="dark"] .submission-form input.control:-webkit-autofill:focus,
html[data-theme="dark-transition"] .submission-form input.control:-webkit-autofill,
html[data-theme="dark-transition"] .submission-form input.control:-webkit-autofill:hover,
html[data-theme="dark-transition"] .submission-form input.control:-webkit-autofill:focus {
    -webkit-text-fill-color: rgba(255,255,255,0.82) !important;
    caret-color: #ffffff !important;

    transition:
        background-color 999999s ease-out 0s,
        color 999999s ease-out 0s !important;
}


html[data-theme="light"] .submission-form input.control:-webkit-autofill,
html[data-theme="light"] .submission-form input.control:-webkit-autofill:hover,
html[data-theme="light"] .submission-form input.control:-webkit-autofill:focus {
    -webkit-text-fill-color: rgba(0,0,0,0.88) !important;
    caret-color: #000000 !important;

    transition:
        background-color 999999s ease-out 0s,
        color 999999s ease-out 0s !important;
}


/* ==================================================
   SUBMIT PAGE — MOBILE INTERNAL SCROLL
   DESKTOP UNCHANGED
   Keeps header/footer visible while long contact fields scroll.
================================================== */

@media (max-width: 767px) {

    html,
    body {
        width: 100%;
        height: 100%;
        min-height: 100%;
        overflow: hidden !important;
        overscroll-behavior: none;
    }

    .site.submit-site {
        width: 100%;
        height: 100vh;
        height: 100dvh;
        min-height: 100vh;
        min-height: 100dvh;
        overflow: hidden;
    }

    .site.submit-site > .submit-main {
        flex: 1 1 auto;
        min-height: 0;
        width: 100%;

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

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

        -webkit-overflow-scrolling: touch;
        overscroll-behavior-y: contain;

        scrollbar-width: none;

        padding:
            8px
            12px
            12px;
    }

    .site.submit-site > .submit-main::-webkit-scrollbar {
        display: none;
        width: 0;
        height: 0;
    }

    .submit-main .form-stage {
        width:
            min(100%, 410px);

        height: auto;
        min-height: max-content;

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

        padding:
            8px
            0
            18px;
    }

    .submit-main .form-stack {
        width: 100%;
        height: auto;
        min-height: max-content;
        flex: 0 0 auto;
    }

    .submit-main .submission-form {
        height: auto;
        flex: 0 0 auto;
    }

}

/* ==================================================
   SUBMIT PAGE — MOBILE BACKGROUND VISIBILITY
   Mirrors the homepage mobile-only polish.
   DESKTOP UNCHANGED.
================================================== */

@media (max-width: 767px) {

    .liquid-1 {
        width: 116vw;
        height: 94vh;
        left: -49vw;
        top: -8vh;
        filter: blur(52px);
        opacity: 0.90;
    }

    .liquid-2 {
        width: 118vw;
        height: 96vh;
        right: -51vw;
        bottom: -10vh;
        filter: blur(57px);
        opacity: 0.85;
    }

    .liquid-3 {
        width: 88vw;
        height: 72vh;
        left: 6vw;
        top: 12vh;
        filter: blur(63px);
        opacity: 0.72;
    }

    .liquid-4 {
        width: 82vw;
        height: 106vh;
        left: 9vw;
        top: -10vh;
        filter: blur(54px);
        opacity: 0.50;
    }

    .dot-grid {
        background-image:
            radial-gradient(
                circle,
                rgba(0,0,0,0.82) 0.20px,
                transparent 0.34px
            );

        background-size:
            2px 2px;

        opacity:
            0.68;
    }

}