/* Block/Offer CTA — reusable section. Figma instance 13586:47470 (desktop) · 13586:47615 (mobile).
   Masters: 12832:9266 (desktop) · 12835:9296 (mobile). Markup: components/offer-cta.html.
   Units: em on the site's fluid scale — desktop Figma px ÷ 16, mobile (≤479) Figma px ÷ 16.38.
   Does not depend on the page class; uses base classes from styles.css
   (.section.pad-120.dark, .container, .headline-1, .text-body-*, .button-main, .input.form-input). */

.offer-cta {
  --offer-cta-muted: rgba(255, 255, 255, .7);   /* alpha/white-70 */
  --offer-cta-line: rgba(255, 255, 255, .15);   /* alpha/white-15 */
  --offer-cta-label: #f9fafb;                   /* gray/50 */
  --offer-cta-placeholder: #9ca3af;             /* gray/400 */
  --offer-cta-error: #f87171;                   /* Field/Input error */
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.offer-cta [hidden] {
  display: none !important;
}

.offer-cta-container {
  position: relative;
  z-index: 1;
}

/* ---------- Aurora (desktop only): seven blurred ellipses, positions and blend modes from Figma ---------- */

.offer-cta-aurora {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  isolation: isolate;
  background-color: var(--bg-color-main);
  pointer-events: none;
}

.offer-cta-glow {
  position: absolute;
  height: 14.25em;
  border-radius: 50%;
  filter: blur(4.21875em);          /* Figma layer blur 135 → σ 67.5 */
  transform: translateX(-50%);
}

/* Ellipse 100: brand purple + its own color-burn copy → #6546f2 */
.offer-cta-glow--base {
  left: calc(50% + .03125em);
  bottom: -12.125em;
  width: 124.0625em;
  background: linear-gradient(rgba(101, 70, 242, 0), #6546f2 16%);
}

/* Ellipse 101 ×2, plus-lighter */
.offer-cta-glow--left,
.offer-cta-glow--right {
  width: 40.625em;
  background: linear-gradient(rgba(101, 70, 242, 0), #6546f2 16%);
  mix-blend-mode: plus-lighter;
}

.offer-cta-glow--left {
  left: calc(12.5% + 1.25em);
  bottom: -12.125em;
}

.offer-cta-glow--right {
  left: calc(100% - 1.6875em);
  bottom: -11.1875em;
}

/* Ellipse 105, color-dodge */
.offer-cta-glow--dodge {
  left: calc(62.5% + .1875em);
  bottom: -9.125em;
  width: 36.875em;
  background: linear-gradient(rgba(62, 241, 141, 0), #511780 16%);
  mix-blend-mode: color-dodge;
}

/* Ellipse 107 ×2, overlay */
.offer-cta-glow--warm-left,
.offer-cta-glow--warm-right {
  width: 37.1875em;
  height: 6.9375em;
  background: linear-gradient(rgba(255, 93, 76, 0), #ff5d4c 16%);
  mix-blend-mode: overlay;
}

.offer-cta-glow--warm-left {
  left: calc(29.17% + 1.21875em);
  bottom: -3.5em;
}

.offer-cta-glow--warm-right {
  left: calc(79.17% - 2.59375em);
  bottom: -4.0625em;
}

/* Ellipse 104: dark pocket. Figma blends it plus-darker (310 × 130, σ 117) — only Safari supports that;
   elsewhere a slightly larger, sharper plain-black ellipse gives the closest result (tuned against the Figma render). */
.offer-cta-glow--shade {
  left: calc(8.33% + 2.3em);
  bottom: 1.6em;
  width: 22em;
  height: 9.5em;
  background: #000;
  filter: blur(5.5em);
  transform: none;
}

@supports (mix-blend-mode: plus-darker) {
  .offer-cta-glow--shade {
    left: calc(8.33% + 3.8125em);
    bottom: 2.25em;
    width: 19.375em;
    height: 8.125em;
    filter: blur(7.3156em);         /* σ 117.05 */
    mix-blend-mode: plus-darker;
  }
}

/* ---------- Layout ---------- */

.offer-cta-grid {
  display: grid;
  grid-template-columns: 41.25em 38.75em;       /* 660 | 620 */
  grid-template-rows: auto auto 1fr;
  grid-template-areas:
    "head proof"
    "form proof"
    "benefits proof";
  column-gap: 2.5em;                            /* 40 */
}

.offer-cta-head {
  grid-area: head;
  display: flex;
  flex-direction: column;
  gap: 1.5em;                                   /* 24 */
  color: var(--offer-cta-muted);
}

.offer-cta-eyebrow {
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0;
}

.offer-cta-title {
  color: var(--white);
}

.offer-cta-title-muted {
  color: var(--offer-cta-muted);
}

.offer-cta-lead {
  max-width: 31em;                              /* 620 at 20px */
  margin: 0;
}

/* ---------- Form ---------- */

.offer-cta-form {
  grid-area: form;
  margin: 0;
  padding-top: 3em;                             /* 48 */
}

.offer-cta-form-row {
  display: flex;
  align-items: flex-end;
  gap: 1.5em;                                   /* 24 */
}

.offer-cta-fields {
  display: flex;
  flex: 1 1 auto;
  gap: 1em;                                     /* 16 */
  min-width: 0;
}

.offer-cta-field {
  flex: 1 1 0;
  min-width: 0;
}

.offer-cta-field label {
  display: block;
  padding: .5714em 0;                           /* 8 at 14px */
  color: var(--offer-cta-label);
  cursor: pointer;
}

.offer-cta .form-input {
  height: auto;
  padding: .5714em 0;                           /* 8 at 14px, no side inset — as in Figma */
  font-size: .875em;
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: 0;
}

.offer-cta .input::placeholder {
  color: var(--offer-cta-placeholder);
  opacity: 1;
}

.offer-cta .input:focus,
.offer-cta .input:focus-visible {
  border-bottom-color: var(--white);
  box-shadow: inset 0 -1px 0 var(--white);      /* 2px underline on focus */
  outline: none;
}

.offer-cta .input:user-invalid {
  border-bottom-color: var(--offer-cta-error);
}

.offer-cta .input:-webkit-autofill {
  -webkit-text-fill-color: var(--white);
  box-shadow: inset 0 0 0 100em var(--bg-color-main);
  caret-color: var(--white);
}

.offer-cta .input:-webkit-autofill:focus {
  box-shadow: inset 0 0 0 100em var(--bg-color-main), inset 0 -1px 0 var(--white);
}

/* Button/Primary Color=white: solid white → white outline on hover */
.offer-cta-submit {
  flex: none;
  border-color: var(--white);
  white-space: nowrap;
}

.offer-cta-submit .ico-20 {
  width: 1.125em;                               /* arrow 18 */
  height: 1.125em;
}

.offer-cta-submit:focus-visible {
  outline: 2px solid var(--primary--purple-1);
  outline-offset: 2px;
}

.offer-cta-submit:disabled {
  cursor: progress;
  opacity: .6;
}

.offer-cta .form-success {
  padding: 1.5em;
  color: var(--white);
  text-align: left;
  background: transparent;
  border: 1px solid var(--offer-cta-line);
}

.offer-cta .form-error {
  margin-top: 1em;
  padding: 0;
  color: var(--offer-cta-error);
  background: transparent;
}

.offer-cta .form-success,
.offer-cta .form-error {
  font-size: .875em;
  line-height: 1.2;
}

.offer-cta .form-error a {
  color: inherit;
}

/* ---------- Benefits ---------- */

.offer-cta-benefits {
  grid-area: benefits;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: .75em 2em;                               /* 12 / 32 */
  margin: 0;
  padding: 1.5em 0 0;                           /* 24 */
  list-style: none;
}

.offer-cta-benefit {
  display: flex;
  align-items: center;
  gap: .5em;                                    /* 8 */
  color: var(--offer-cta-muted);
  font-size: .875em;
  line-height: 1.2;
}

.offer-cta-check {
  flex: none;
  width: 1.142857em;                            /* 16 at 14px */
  height: 1.142857em;
  color: var(--white);
}

/* ---------- Proof column ---------- */

.offer-cta-proof {
  grid-area: proof;
  align-self: start;
  padding-left: 2.5em;                          /* 40 */
  border-left: 1px solid var(--offer-cta-line);
}

.offer-cta-row {
  margin: 0;
  padding: 1.5em 0;                             /* 24 */
  border-top: 1px solid var(--offer-cta-line);
}

.offer-cta-row:first-child {
  padding-top: 0;
  border-top: 0;
}

.offer-cta-row:last-child {
  padding-bottom: 0;
}

.offer-cta-rating {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: 1.5em;                            /* 24 */
  row-gap: .5em;                                /* 8 */
}

.offer-cta-rating-main {
  display: contents;
}

.offer-cta-score {
  grid-row: 1 / 3;
  margin: 0;
  color: var(--white);
  font-family: Rg Standardbook, Arial, sans-serif;
  font-size: 4em;                               /* 64 */
  font-weight: 400;
  line-height: .9;
  letter-spacing: -.0234375em;
  white-space: nowrap;
}

.offer-cta-stars {
  display: flex;
  gap: .25em;                                   /* 4 */
  color: var(--green);
}

.offer-cta-stars svg {
  display: block;
  width: 1em;
  height: 1em;
}

.offer-cta-rating-text {
  display: flex;
  flex-direction: column;
  gap: .5em;
  margin: 0;
}

.offer-cta-rating-count {
  color: var(--white);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -.0625em;
}

.offer-cta-rating-note {
  color: var(--offer-cta-muted);
  font-size: .875em;
  line-height: 1.2;
}

.offer-cta-reviewers {
  display: none;                                /* not in the desktop master */
}

.offer-cta-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1em 2em;                                 /* 32 */
  list-style: none;
}

.offer-cta-badges li {
  display: flex;
}

.offer-cta-badge {
  width: auto;
  height: 1.375em;                              /* 22 */
  opacity: .7;
}

.offer-cta-badge--upwork {
  height: 2.125em;                              /* 34 */
}

.offer-cta-awards {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1em;                                     /* 16 */
  line-height: 1.2;
}

.offer-cta-awards-name {
  color: var(--white);
  font-weight: 400;
  letter-spacing: -.0625em;
}

.offer-cta-awards-extra {
  display: none;                                /* desktop shows "Clutch" only */
}

.offer-cta-awards-years {
  color: var(--offer-cta-muted);
  font-size: .875em;
}

@media (prefers-reduced-motion: reduce) {
  .offer-cta-submit {
    transition: none;
  }
}

/* ---------- Mobile 390 (Figma 12835:9296): head → benefits → proof → form ---------- */

@media screen and (max-width: 479px) {
  .offer-cta.section {
    padding-top: 4.884em;                       /* 80 */
    padding-bottom: 4.884em;
  }

  .offer-cta-aurora {
    display: none;                              /* no aurora in the mobile master */
  }

  .offer-cta-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
    grid-template-areas:
      "head"
      "benefits"
      "proof"
      "form";
    row-gap: 1.954em;                           /* 32 */
  }

  .offer-cta-head {
    gap: 1.465em;                               /* 24 */
    margin-bottom: 1.954em;                     /* + row gap = 64 */
  }

  .offer-cta-eyebrow {
    margin-bottom: .667em;                      /* + gap = 32 */
    font-size: .7326em;                         /* 12 */
    font-weight: 400;
  }

  .offer-cta-lead {
    max-width: none;
    line-height: 1.4;
    letter-spacing: -.03125em;                  /* -0.5 at 16 */
  }

  /* Form: stacked, button full width */
  .offer-cta-form {
    padding-top: 0;
  }

  .offer-cta-form-row,
  .offer-cta-fields {
    flex-direction: column;
    align-items: stretch;
    gap: .977em;                                /* 16 */
  }

  .offer-cta-field {
    flex: none;
  }

  .offer-cta-field label {
    padding: .667em 0;                          /* 8 at 12px */
    font-size: .7326em;                         /* 12 */
    font-weight: 400;
  }

  .offer-cta .form-input {
    padding: 1.333em 0;                         /* 16 at 12px → row 47px */
    font-size: .7326em;
    font-weight: 400;
  }

  .offer-cta-submit {
    justify-content: flex-start;
    gap: .143em;                                /* 2 at 14px */
    width: 100%;
    height: 4.057em;                            /* 56.8 at 14px */
    padding-left: 1.143em;
    padding-right: 1.143em;
    font-size: .8547em;                         /* 14 */
    letter-spacing: -.0714em;
  }

  .offer-cta-submit .ico-20,
  .offer-cta-submit svg {
    width: 1.286em;                             /* 18 at 14px */
    height: 1.286em;
  }

  /* Benefits */
  .offer-cta-benefits {
    flex-direction: column;
    gap: .733em;                                /* 12 */
    padding-top: 0;
  }

  /* Proof */
  .offer-cta-proof {
    padding-left: 0;
    border-left: 0;
  }

  .offer-cta-row,
  .offer-cta-row:first-child {
    padding: .977em 0;                          /* 16 */
    border-top: 1px solid var(--offer-cta-line);
  }

  .offer-cta-row:last-child {
    padding-bottom: 0;
  }

  .offer-cta-rating {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .488em;                                /* 8 */
  }

  .offer-cta-rating-main {
    display: flex;
    align-items: center;
    gap: .733em;                                /* 12 */
  }

  .offer-cta-score {
    font-size: 1.465em;                         /* 24 */
    line-height: 1.2;
    letter-spacing: 0;
  }

  .offer-cta-stars svg {
    width: .977em;
    height: .977em;
  }

  .offer-cta-rating-text,
  .offer-cta-awards {
    display: block;
    color: var(--offer-cta-muted);
    font-size: .8547em;                         /* 14 */
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: -.0714em;                   /* -1 at 14 */
  }

  .offer-cta-rating-count,
  .offer-cta-rating-note,
  .offer-cta-awards-name,
  .offer-cta-awards-years {
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
    letter-spacing: inherit;
  }

  .offer-cta-rating-note {
    text-transform: lowercase;
  }

  .offer-cta-rating-note::before {
    content: "— ";
  }

  .offer-cta-awards-extra {
    display: inline;
  }

  .offer-cta-awards-years::before {
    content: "· ";
  }

  .offer-cta-reviewers {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .488em;                                /* 8 */
  }

  .offer-cta-avatars {
    display: flex;
  }

  .offer-cta-avatar {
    display: flex;
    flex: none;
    justify-content: center;
    align-items: center;
    width: 2.857em;                             /* 40 at 14px */
    height: 2.857em;
    margin-right: -.571em;                      /* -8 overlap */
    color: var(--white);
    font-size: .8547em;                         /* initials 14 */
    line-height: 1.2;
    background: rgba(255, 255, 255, .2) padding-box;
    border: 2px solid var(--bg-color-main);
    border-radius: 50%;
  }

  .offer-cta-avatar:last-child {
    margin-right: 0;
  }

  .offer-cta-reviewers-names {
    color: var(--white);
    font-size: .8547em;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: -.0714em;
  }

  .offer-cta-reviewers-label {
    color: var(--offer-cta-muted);
    font-size: .7326em;                         /* 12 */
    font-weight: 400;
    line-height: 1.2;
  }

  .offer-cta-badges {
    gap: .977em 1.465em;                        /* 16 / 24 */
  }

  .offer-cta-badge,
  .offer-cta-badge--upwork {
    height: 1.343em;                            /* 22 */
  }

  .offer-cta-awards.offer-cta-row {
    padding-top: 1.143em;                       /* 16 at its own 14px */
  }
}

/* Windows high contrast: the badges are white PNGs and vanish on a light system canvas. */
@media (forced-colors: active) {
  .offer-cta-badges {
    forced-color-adjust: none;
    background: #000;
  }
  /* Word wrappers of the heading reveal get a backplate in high contrast; .9 line height makes them overlap. */
  .offer-cta-title {
    line-height: 1.05;
  }
}