/* ---------------------------------------------------------------------
   Record Express - Creator Partner Program
   --------------------------------------------------------------------- */

:root {
   /* Exact logo teal (view/website/images/logo.svg) - deliberately not
      --main, which is brighter/more saturated than the actual logo mark
      now sitting in the hero photo right next to these. */
   --bp-teal: #346374;
}

/* Hero */

.bp-hero {
   position: relative;
   overflow: hidden;
   min-height: 560px;
   display: flex;
   align-items: center;
   color: white;
}

.bp-hero-bg {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: 35% center;
   z-index: 0;
}

.bp-hero-scrim {
   position: absolute;
   inset: 0;
   background: linear-gradient(100deg, rgba(6, 16, 20, .15) 0%, rgba(6, 16, 20, .55) 55%, rgba(6, 16, 20, .88) 100%);
   z-index: 1;
}

.bp-hero-inner {
   position: relative;
   z-index: 2;
   width: 100%;
   display: grid;
   grid-template-columns: 1fr 1fr;
   align-items: center;
   gap: var(--space-lg);
   padding: var(--space-xl) 0;
}

.bp-hero-content {
   grid-column: 2;
}

.bp-hero-eyebrow {
   display: block;
   color: var(--contrast-light);
   font-weight: 700;
   letter-spacing: 1px;
   text-transform: uppercase;
   font-size: var(--font-size-sm);
   margin-bottom: var(--space-xs);
}

.bp-hero-content h1 {
   font-size: var(--font-size-2xl);
   line-height: var(--line-height-heading);
   margin-bottom: var(--space-sm);
   color: white;
}

.bp-highlight {
   color: var(--contrast-light);
}

.bp-hero .bp-lead {
   color: rgba(255, 255, 255, .8);
   font-size: var(--font-size-lg);
   max-width: 460px;
   margin: 0;
}

.bp-hero-watermark {
   position: absolute;
   top: 50%;
   right: -10px;
   transform: translateY(-50%) rotate(90deg);
   transform-origin: right center;
   font-size: 80px;
   font-weight: 800;
   letter-spacing: 28px;
   color: rgba(255, 255, 255, .06);
   white-space: nowrap;
   z-index: 1;
   pointer-events: none;
}

/* Benefits row */

.bp-benefits {
   background: white;
   padding: var(--space-lg) 0;
}

.bp-benefits-inner {
   display: grid;
   grid-template-columns: 1fr 1fr 1fr;
}

.bp-benefit {
   display: flex;
   align-items: flex-start;
   gap: var(--space-sm);
   padding: 0 var(--space-md);
   border-left: 1px solid var(--grey-200);
}

.bp-benefit:first-child {
   border-left: none;
   padding-left: 0;
}

.bp-benefit:last-child {
   padding-right: 0;
}

.bp-benefit-icon {
   width: 48px;
   height: 48px;
   border-radius: 50%;
   background: var(--bp-teal);
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
}

.bp-benefit h3 {
   font-size: var(--font-size-base);
   margin: 0 0 4px;
}

.bp-benefit p {
   font-size: var(--font-size-sm);
   color: var(--grey-600);
   margin: 0;
}

/* How it works */

.bp-steps h2 {
   margin-bottom: var(--space-lg);
}

.bp-steps-list {
   max-width: 620px;
   margin: 0 auto;
}

.bp-step {
   display: flex;
   align-items: center;
   gap: var(--space-sm);
   position: relative;
   padding-bottom: var(--space-lg);
}

.bp-step:last-child {
   padding-bottom: 0;
}

.bp-step-num {
   width: 36px;
   height: 36px;
   border-radius: 50%;
   background: var(--bp-teal);
   color: white;
   display: flex;
   align-items: center;
   justify-content: center;
   font-weight: 700;
   font-size: var(--font-size-sm);
   flex-shrink: 0;
   position: relative;
   z-index: 1;
}

.bp-step-num::after {
   content: '';
   position: absolute;
   top: 100%;
   left: 50%;
   transform: translateX(-50%);
   width: 2px;
   height: var(--space-lg);
   background: var(--grey-300);
}

.bp-step:last-child .bp-step-num::after {
   display: none;
}

.bp-step-icon {
   width: 56px;
   height: 56px;
   border-radius: 50%;
   background: white;
   border: 1px solid var(--grey-200);
   box-shadow: 0 2px 8px rgba(0, 0, 0, .05);
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
}

/* Re-colors an .icon to the exact logo teal via masking instead of the
   shared .c-main filter class, which is tuned to the brighter --main. Each
   icon needs its own mask-position, mirroring its icons.css
   background-position (mask-image ignores the background shorthand). */
.bp-step-icon .icon,
.bp-trust-list .icon {
   background-image: none;
   background-color: var(--bp-teal);
   -webkit-mask-image: url('/shared/icons.svg');
   mask-image: url('/shared/icons.svg');
   -webkit-mask-repeat: no-repeat;
   mask-repeat: no-repeat;
   -webkit-mask-size: 420px 196px;
   mask-size: 420px 196px;
}

.bp-step-icon .icon-pen    { -webkit-mask-position: -112px -28px; mask-position: -112px -28px; }
.bp-step-icon .icon-users  { -webkit-mask-position: -336px -56px; mask-position: -336px -56px; }
.bp-step-icon .icon-tag    { -webkit-mask-position: -56px -168px; mask-position: -56px -168px; }
.bp-step-icon .icon-heart  { -webkit-mask-position: -28px -56px; mask-position: -28px -56px; }
.bp-trust-list .icon-shield { -webkit-mask-position: -168px -56px; mask-position: -168px -56px; }
.bp-trust-list .icon-lock   { -webkit-mask-position: -112px -56px; mask-position: -112px -56px; }
.bp-trust-list .icon-heart  { -webkit-mask-position: -28px -56px; mask-position: -28px -56px; }

.bp-step-text h3 {
   font-size: var(--font-size-base);
   margin: 0 0 4px;
}

.bp-step-text p {
   font-size: var(--font-size-sm);
   color: var(--grey-600);
   margin: 0;
}

/* Form section */

.bp-form-grid {
   display: grid;
   grid-template-columns: 0.8fr 1.2fr;
   gap: var(--space-xl);
   align-items: start;
}

.bp-form-intro h2 {
   margin-bottom: var(--space-sm);
}

.bp-form-intro p {
   color: var(--grey-600);
   margin-bottom: var(--space-md);
}

.bp-trust-list {
   list-style: none;
   display: flex;
   flex-direction: column;
   gap: var(--space-xs);
   margin: 0;
   padding: 0;
}

.bp-trust-list li {
   display: flex;
   align-items: center;
   gap: var(--space-xs);
   font-size: var(--font-size-sm);
   color: var(--grey-700);
}

.bp-form {
   display: flex;
   flex-direction: column;
   gap: var(--space-sm);
}

.bp-form[hidden] {
   display: none;
}

.bp-row {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: var(--space-sm);
}

.bp-field {
   display: flex;
   flex-direction: column;
   gap: 6px;
   font-size: var(--font-size-sm);
   font-weight: 600;
   color: var(--grey-700);
}

.bp-required {
   color: var(--error);
}

.bp-field input,
.bp-field textarea {
   font-size: var(--font-size-base);
   font-weight: 400;
   color: var(--grey-900);
   border: 1px solid var(--grey-300);
   border-radius: var(--radius);
   padding: 12px 14px;
   background: white;
   resize: vertical;
}

.bp-field input:focus,
.bp-field textarea:focus {
   outline: none;
   border-color: var(--main);
}

.bp-hp {
   position: absolute;
   left: -9999px;
   width: 1px;
   height: 1px;
   opacity: 0;
}

.bp-form-msg {
   margin: 0;
   font-size: var(--font-size-sm);
   color: var(--grey-700);
   min-height: 1.2em;
}

.bp-form-msg-error {
   color: var(--error);
}

.bp-form button[type="submit"] {
   align-self: flex-start;
   border: none;
}

.bp-success {
   text-align: center;
   padding: var(--space-lg) 0;
}

.bp-success h2 {
   margin-bottom: var(--space-xs);
}

.bp-success p {
   color: var(--grey-700);
}

/* Responsive */

@media (max-width: 900px) {
   .bp-hero-inner {
      grid-template-columns: 1fr;
   }

   .bp-hero-content {
      grid-column: 1;
   }

   .bp-hero-scrim {
      background: linear-gradient(180deg, rgba(6, 16, 20, .3) 0%, rgba(6, 16, 20, .8) 60%, rgba(6, 16, 20, .92) 100%);
   }

   .bp-benefits-inner {
      grid-template-columns: 1fr;
      gap: var(--space-md);
   }

   .bp-benefit {
      border-left: none;
      padding: 0;
   }

   .bp-form-grid {
      grid-template-columns: 1fr;
   }
}

@media (max-width: 600px) {
   .bp-row {
      grid-template-columns: 1fr;
   }

   .bp-hero-watermark {
      display: none;
   }
}