.tobor-cta {
  width: 100%;
  padding: 0 96px 64px;
  color: #fff;
  background: #fff;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.tobor-cta *,
.tobor-cta *::before,
.tobor-cta *::after { box-sizing: border-box; }

.tobor-cta__panel {
  position: relative;
  width: 100%;
  max-width: 1248px;
  height: 374px;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 16px;
  background: #262626;
}

.tobor-cta__media,
.tobor-cta__media img,
.tobor-cta__shade { position: absolute; inset: 0; width: 100%; height: 100%; }

.tobor-cta__media { display: block; margin: 0; }
.tobor-cta__media img { display: block; max-width: none; object-fit: cover; object-position: center; }
.tobor-cta__shade {
  background: rgba(0, 0, 0, 0.34);
}

.tobor-cta__inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 77px 463px 76.5px 81px;
}

.tobor-cta__content { display: flex; flex-direction: column; align-items: flex-start; width: min(704px, 100%); gap: 8px; }
.tobor-cta .tobor-cta__eyebrow {
  margin: 0;
  color: #99c300;
  font-size: 12px;
  font-weight: 500;
  line-height: 18px;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.tobor-cta h2 { margin: 0; color: #fff; font-size: 48px; font-weight: 700; line-height: 56px; letter-spacing: 0; }
.tobor-cta .tobor-cta__description { margin: 0; color: #fff; font-size: 20px; font-weight: 400; line-height: 28px; letter-spacing: 0; }
.tobor-cta__actions { display: flex; flex-wrap: wrap; gap: 17px; width: 100%; }
.tobor-cta__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 6px 16px;
  border: 2px solid #fff;
  border-radius: 128px;
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  text-align: center;
  text-decoration: none;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.tobor-cta__button:hover, .tobor-cta__button:focus { color: #fff; text-decoration: none; }
.tobor-cta__button--primary { border-color: #99c300; background: #99c300; color: #171717; }
.tobor-cta__button--primary:hover, .tobor-cta__button--primary:focus { border-color: #7da300; background: #7da300; color: #171717; }
.tobor-cta__button--secondary:hover, .tobor-cta__button--secondary:focus { background: rgba(255,255,255,.12); }

/* Figma 4566:33513 — the panel is full-bleed and 516px tall, the artwork holds
   the right 839px of the 1440 frame, and the copy sits on flat #262626 rather
   than under a wash. */
@media (min-width: 1025px) {
  .tobor-cta { padding: 0 0 64px; }
  .tobor-cta__panel { max-width: none; height: 516px; border-radius: 0; }
  .tobor-cta__inner { padding: 64px 96px; }

  /* The artwork holds the right of the frame rather than the whole panel, so the
     copy sits on flat colour. Figma draws its box at 839 of 1440 and then scales
     the image up inside it; widening the box to 68% reaches the same framing
     through plain cover, which matters because the other CTAs on the site pass
     landscape photos through here — the literal Figma crop is tuned to this
     square render and pushes a wide photo off the top. */
  /* Capped, not a bare percentage: past ~1440 a percentage keeps stretching the
     artwork box, and because the source is square its empty left half comes into
     view — opening a growing void between the copy and the hand (BugHerd #373).
     Fixing the width keeps the hand the same size and hard against the right
     edge at any viewport; the extra width becomes flat panel behind the copy.

     The fade is masked onto the artwork rather than painted across the panel, so
     it always begins at the image's own left edge. Tied to the panel it drifted
     away from the image once the width was capped, leaving the photo sitting on
     the panel as a visibly lighter block. */
  .tobor-cta__media {
    left: auto;
    right: 0;
    width: min(68%, 980px);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 34%);
    mask-image: linear-gradient(90deg, transparent 0, #000 34%);
  }

  /* Product pages carry a higher-specificity img { height: auto } from the
     theme. It went unnoticed while the box matched the artwork's own ratio;
     now that it does not, the image has to be told to fill the box again. */
  .tobor-cta__panel .tobor-cta__media img { width: 100%; height: 100%; object-fit: cover; }

  /* The mask above already keeps the copy on flat panel, so the old full-width
     wash is gone. A light tint stays over the artwork only, which is what keeps
     white text readable on the instances that pass a bright photo through. */
  .tobor-cta__shade {
    left: auto;
    right: 0;
    width: min(68%, 980px);
    background: rgba(0, 0, 0, .18);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 34%);
    mask-image: linear-gradient(90deg, transparent 0, #000 34%);
  }

  /* Ellipse 8: a #d9d9d9 disc, r155, Gaussian blur stdDeviation 250, centred at
     (1145, 251) of the 1440x516 panel. Drawn before the artwork, so behind it. */
  .tobor-cta__panel::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 79.5% 48.6%, rgba(217, 217, 217, .18) 0, rgba(217, 217, 217, 0) 60%);
    pointer-events: none;
  }
}

@media (max-width: 1024px) {
  .tobor-cta { padding: 0; background: #262626; }
  .tobor-cta__panel { max-width: none; height: 492.5px; border-radius: 0; }
  .tobor-cta__inner { padding: 64px 32px 32px; }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .tobor-cta__content { align-items: center; width: 100%; text-align: center; }
  .tobor-cta__actions { justify-content: center; }
}

@media (max-width: 767px) {
  .tobor-cta { padding: 0; background: #262626; }
  .tobor-cta__panel { max-width: none; height: 563px; border-radius: 0; }
  .tobor-cta__media img { object-position: center; }
  .tobor-cta__shade {
    background:
      linear-gradient(124.8106deg, #262626 8.6536%, rgba(38, 38, 38, 0) 84.213%),
      rgba(42, 42, 42, 0.3);
  }
  .tobor-cta__inner { flex-direction: column; align-items: flex-start; justify-content: center; padding: 16px 16px 32px; }
  .tobor-cta__content { align-items: center; gap: 16px; width: 100%; text-align: center; }
  .tobor-cta h2 { font-size: 32px; line-height: 40px; }
  .tobor-cta__actions { flex-direction: column; flex-wrap: nowrap; gap: 17px; margin-top: 16px; }
  .tobor-cta__button { width: 100%; padding: 6px 16px; }
}