/* PreSell OS · B2B landing page. Builds on styles.css (same type, cards, highlight, marquee).
   This page uses a lighter charcoal than the agency site for easier reading. */

.b2b {
  --bg: #1a1d1c;          /* brand charcoal, lifted from near-black */
  --surface: #212524;
  --surface-2: #272c2a;
  --surface-3: #2e3331;
  --border: rgba(255, 255, 255, 0.10);
  --border-2: rgba(255, 255, 255, 0.17);
  --text: #f6f8f7;
  --text-2: #c9cecb;
  --text-3: #a2a8a4;
}

/* Page background: charcoal deepening into evergreen toward the right, like the original site. */
body.b2b {
  background:
    radial-gradient(70% 90% at 100% 30%, rgba(20, 70, 50, 0.55), transparent 65%),
    radial-gradient(60% 70% at 85% 100%, rgba(0, 145, 86, 0.16), transparent 70%),
    linear-gradient(115deg, #17191b 0%, #1a1d1c 45%, #172420 100%);
  background-attachment: fixed;
}
.b2b .b2b-hero .aura { opacity: 0.6; }

/* ------------------------------------------------------------- Hero */
.b2b-hero { position: relative; overflow: hidden; padding-block: clamp(32px, 5vw, 72px) clamp(40px, 5vw, 64px); }
.b2b-hero .aura { top: 4%; left: 70%; width: min(1000px, 120vw); opacity: 0.9; }
.b2b-hero__grid {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(40px, 5vw, 80px); align-items: center;
}
.b2b-hero__copy { display: flex; flex-direction: column; align-items: flex-start; text-align: left; }
.b2b-hero .h-hero { margin-top: 24px; font-size: clamp(2.25rem, 1.2rem + 2.9vw, 3.5rem); line-height: 1.08; max-width: 16ch; }
.b2b-hero .hero__subhead { margin-top: 20px; }
.b2b-hero .sub { margin-top: 14px; max-width: 32em; color: var(--text-2); }

/* ------------------------------------------------------------- Video */
.video { position: relative; }
/* Thin glass bezel around a true 16:9 video: no letterbox bars, one clean edge. */
.video__frame {
  position: relative; padding: 5px; border-radius: 20px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.03));
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(0, 0, 0, 0.25);
}
.video__frame iframe, .video__poster {
  display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border: 0; border-radius: 15px;
}
.video__poster {
  position: relative; overflow: hidden; cursor: pointer; padding: 0; text-align: left;
  background: radial-gradient(80% 90% at 70% 100%, rgba(27, 227, 146, 0.22), rgba(20, 70, 50, 0.32) 40%, transparent 75%), var(--surface);
  border: 1px solid var(--border);
}
.video__grid {
  position: absolute; inset: 0; opacity: 0.55;
  background-image: linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 40px 40px;
  -webkit-mask-image: radial-gradient(70% 70% at 50% 50%, #000, transparent); mask-image: radial-gradient(70% 70% at 50% 50%, #000, transparent);
}
.video__play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: grid; place-items: center; width: 76px; height: 76px; border-radius: 50%;
  background: var(--mint); box-shadow: 0 0 0 10px rgba(27, 227, 146, 0.13), 0 12px 40px -8px rgba(27, 227, 146, 0.6);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.video__play svg { width: 26px; height: 26px; fill: var(--near-black); margin-left: 3px; }
.video__poster:hover .video__play { transform: translate(-50%, -50%) scale(1.05); box-shadow: 0 0 0 14px rgba(27, 227, 146, 0.15), 0 14px 48px -8px rgba(27, 227, 146, 0.7); }

/* ------------------------------------------------------------- CTA bar */
.ctabar {
  position: relative; margin-top: clamp(40px, 4.5vw, 56px);
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: clamp(20px, 3vw, 40px);
  padding: 10px clamp(24px, 3vw, 40px) 10px 10px; border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.025));
  border: 1px solid var(--border-2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 30px 80px -40px rgba(27, 227, 146, 0.4);
}
/* Brand gradient: deep green sweeping into mint (from the original site, refined). */
.ctabar__btn {
  position: relative; overflow: hidden; height: 68px; border-radius: 999px;
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem); font-weight: 600; color: #fff;
  background: linear-gradient(90deg, #0b7a4c 0%, var(--green) 38%, #14c47f 72%, var(--mint) 100%);
  border-color: transparent;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), inset 0 -1px 0 rgba(0, 0, 0, 0.15), 0 14px 40px -14px rgba(27, 227, 146, 0.7);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.18);
  transition: box-shadow 0.3s var(--ease), filter 0.3s var(--ease);
}
.ctabar__btn::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.14), transparent 55%);
}
.ctabar__btn:hover { filter: brightness(1.06); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 18px 48px -14px rgba(27, 227, 146, 0.8); }
.ctabar__proof { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; font-size: 0.9375rem; color: var(--text-2); white-space: nowrap; }
.ctabar__proof strong { color: var(--text); font-weight: 500; }
.stars { display: inline-flex; gap: 3px; }
.stars svg { width: 18px; height: 18px; fill: var(--mint); }

.b2b-hero .trusted { margin-top: clamp(48px, 5vw, 72px); }
.b2b-footer { background: transparent; border-top: 1px solid var(--border); padding-block: 28px; }
.b2b-footer .footer__bottom { margin: 0; padding: 0; border: 0; text-align: center; }

/* ------------------------------------------------------------- Responsive */
@media (max-width: 1100px) {
  .b2b-hero__grid { grid-template-columns: 1fr; }
  .b2b-hero__copy { align-items: center; text-align: center; }
  .b2b-hero .h-hero { max-width: 17ch; }
  .video { width: 100%; max-width: 640px; margin-inline: auto; }
  .b2b-hero .aura { left: 50%; top: 35%; }
  .ctabar { max-width: 640px; margin-inline: auto; }
}
@media (max-width: 600px) {
  .ctabar { grid-template-columns: 1fr; border-radius: 28px; padding: 10px 10px 18px; gap: 14px; }
  .ctabar__btn { height: 60px; border-radius: 20px; }
  .video__play { width: 60px; height: 60px; }
}
/* The long highlighted phrase may wrap on narrow phones instead of overflowing. */
@media (max-width: 480px) {
  .b2b-hero .hl { white-space: normal; background-size: 0 0; color: var(--mint); }
  .b2b-hero .hl::after { display: none; }
}

/* ------------------------------------------------------------- Opt-in page */
.lead { position: relative; overflow: hidden; padding-block: clamp(32px, 5vw, 72px) clamp(64px, 7vw, 104px); }
.lead .aura { top: 8%; left: 75%; opacity: 0.6; }
.lead__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.lead__copy { display: flex; flex-direction: column; align-items: flex-start; }
.lead__copy .h-hero { margin-top: 24px; font-size: clamp(2.75rem, 1.6rem + 3.6vw, 4.5rem); }
.lead__copy .sub { margin-top: 30px; max-width: 28em; color: var(--text-2); }
.lead__steps { margin-top: 32px; display: flex; gap: 8px; flex-wrap: wrap; }
.lead__steps li { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px 0 6px; border-radius: 999px; border: 1px solid var(--border); font-size: 0.875rem; color: var(--text-3); }
.lead__steps li span { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font-size: 0.75rem; font-weight: 600; background: rgba(255, 255, 255, 0.06); }
.lead__steps li.is-on { color: var(--text); border-color: rgba(27, 227, 146, 0.4); background: rgba(27, 227, 146, 0.07); }
.lead__steps li.is-on span { background: var(--mint); color: var(--near-black); }

.lead__card { padding: clamp(24px, 3vw, 36px); }
.lead-form { display: flex; flex-direction: column; gap: 18px; }
.lf-field label { display: block; margin-bottom: 8px; font-size: 0.9375rem; font-weight: 500; color: var(--text); }
.lf-field .input { height: 54px; border-radius: 12px; background: rgba(255, 255, 255, 0.05); }
.lf-field.has-error .error { display: block; }
.lead-form__btn {
  margin-top: 6px; height: 60px; width: 100%; border-radius: 999px; font-size: 1.125rem; color: #fff;
  background: linear-gradient(90deg, #0b7a4c 0%, var(--green) 38%, #14c47f 72%, var(--mint) 100%); border-color: transparent;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 14px 40px -14px rgba(27, 227, 146, 0.7);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.18);
}
.lead-form__btn:hover { filter: brightness(1.06); }
.lead-form__consent { font-size: 0.8125rem; line-height: 1.55; color: var(--text-3); }

@media (max-width: 900px) {
  .lead__grid { grid-template-columns: 1fr; }
  .lead__copy { align-items: center; text-align: center; }
  .lead__card { width: 100%; max-width: 560px; margin-inline: auto; }
}

/* Calendly calendar inside the booking card */
/* Calendly sits directly on the page (no box); it resizes itself to its content. */
.b2b .book__calendar { max-width: 1000px; margin-top: clamp(28px, 3.5vw, 40px); padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.book__calendar .calendly-inline-widget { background: transparent; }
.book__calendar .calendly-inline-widget iframe { display: block; }
.video__frame iframe { background: transparent; }