/* Fitted media, restrained demo-style labels, and separated editorial panels.
   Keep the established Hub Lead typefaces, artwork, navigation and playback. */
.professional-page .rev-features {
  padding-inline: max(24px, calc((100vw - 1120px) / 2));
}
.professional-page .rev-features .rev-card-grid {
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 24px;
  align-items: start;
}
.professional-page .rev-features .rev-card {
  grid-column: span 4;
  height: auto;
  aspect-ratio: var(--card-ratio, 9 / 16);
  padding: 0;
  border: 0;
  border-radius: 24px;
  background: #15101e;
  box-shadow: 0 0 0 1px #75539355;
  overflow: hidden;
  isolation: isolate;
  transition: box-shadow 200ms ease;
}
.professional-page .rev-features .rev-card--square {
  grid-column: span 6;
  aspect-ratio: 1;
}
.professional-page .rev-features .rev-card--landscape {
  grid-column: span 6;
  aspect-ratio: 1280 / 854;
}
/* Fill the duplicate stage right into its rounded edges, without letterboxing.
   Keep the authored duplicate-leads headline on the left of the frame. */
.professional-page #rev-card-ai-duplicate-filter,
.professional-page #rev-card-ai-duplicate-filter .rev-video {background: #15101e;}
.professional-page #rev-card-ai-duplicate-filter .rev-video {
  object-fit: cover;
  object-position: left center;
}
/* The replacement film has no baked captions: both labels are real text,
   and the bottom capsule inherits exactly the treatment of the other cards. */
.campaign-control-headline {
  position: absolute;
  top: 12px;
  left: 16px;
  right: 16px;
  z-index: 2;
  margin: 0;
  color: #fff;
  font: 650 clamp(18px, 1.6vw, 24px)/1.15 'Inter Reference', Arial, sans-serif;
  text-transform: uppercase;
  text-align: left;
  text-wrap: balance;
}
/* Keep the approved film's height; expand only the card's width. */
.professional-page .rev-features .rev-card--full {
  grid-column: 1 / -1;
  width: 100%;
  max-width: none;
  height: calc(min(820px, 100vw - 48px) * .5625);
  aspect-ratio: auto;
  justify-self: center;
}
/* No corner marks or inner frame. The film is the rounded surface. */
.professional-page .rev-features .rev-card::before {content: none;}
.professional-page .rev-features .rev-card::after {
  content: '';
  position: absolute;
  inset: 78% 0 0;
  z-index: 1;
  border: 0;
  border-radius: 0;
  opacity: 1;
  background: linear-gradient(0deg, #0b071a88, transparent);
  pointer-events: none;
}
.professional-page .rev-features .rev-card:hover,
.professional-page .rev-features .rev-card:focus-visible {
  box-shadow: 0 0 0 1px #a77eff99, 0 0 24px #673de62b;
}
.professional-page .rev-features .rev-card .rev-video {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: inherit;
  object-fit: cover;
  object-position: center;
  background: transparent;
}
/* Same dark material and violet rim as the existing Book a demo button,
   scaled down into a light-touch floating label instead of a chunky box. */
.professional-page .rev-features .rev-card-label {
  top: auto;
  bottom: 16px;
  left: 16px;
  right: auto;
  width: max-content;
  max-width: calc(100% - 32px);
  margin: 0;
  padding: 9px 14px;
  border: 1px solid #8875bc;
  border-radius: 999px;
  background: var(--contact-purple-material);
  box-shadow: inset 0 -10px 17px -14px #673de6,
    inset 0 1px 0 #ffffff18, 0 0 15px #673de63b;
  color: #fff;
  font: 600 clamp(13px, 1.1vw, 15px)/1.3 'Inter Reference', Arial, sans-serif;
  letter-spacing: -.015em;
  text-align: left;
  text-wrap: pretty;
  text-shadow: none;
  z-index: 2;
  transition: border-color 200ms ease, box-shadow 200ms ease;
}
.professional-page .rev-features .rev-card:hover .rev-card-label,
.professional-page .rev-features .rev-card:focus-visible .rev-card-label {
  border-color: #b3a0eb;
  box-shadow: inset 0 -10px 17px -14px #673de6,
    inset 0 1px 0 #ffffff18, 0 0 20px #673de65c;
}
.presentation-visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
/* The black feature chapter curves over blush; blush then curves over white. */
.overview-chapter {background: #f8cfe0;}
.growth-chapter {background: #fff;}
.professional-page .growth-story {
  background: #f8cfe0;
  color: #19151f;
  padding-bottom: 96px;
  border-radius: 0 0 var(--hl-curve) var(--hl-curve);
}
.professional-page .growth-story-label,
.professional-page .growth-story-copy h2,
.professional-page .growth-story-copy h2 em,
.professional-page .growth-story-intro,
.professional-page .growth-step h3,
.professional-page .growth-step p {color: #19151f;}
.professional-page .growth-number {background: #f8cfe0; color: #673de6;}
.professional-page .growth-step.is-lit .growth-number {background: #673de6; color: #fff;}
.platform-introduction {
  max-width: 1000px;
  margin: 0 auto 80px;
  color: #19151f;
  text-align: center;
}
.platform-introduction h2 {
  margin: 0 0 24px;
  font: 400 clamp(32px, 3.3vw, 48px)/1.15 'Instrument Serif', Georgia, serif;
  text-wrap: balance;
}
.platform-introduction p {
  margin: 0;
  font: 400 clamp(17px, 1.5vw, 20px)/1.6 'Inter Reference', Arial, sans-serif;
  text-wrap: pretty;
}
.platform-introduction strong {font-weight: 600;}
@media (max-width: 760px) {
  .platform-introduction {margin-bottom: 52px;}
}
@media (max-width: 580px) {
  .campaign-control-headline {top: 14px; font-size: clamp(18px, 5.4vw, 27px);}
}
/* Kommo-inspired 1:2 alternating rhythm: two separate rounded tiles,
   rather than a text panel welded to its illustration. */
/* One continuous white service chapter. Typefaces and source artwork stay intact. */
.professional-page .rev-platform {padding-top: 80px; background: #fff; color: #19151f; color-scheme: light;}
.professional-page .rev-platform .rev-feature-list {margin-top: 0; gap: 56px;}
.platform-transition {
  background: radial-gradient(ellipse at 62% 85%, #673de644, transparent 70%), linear-gradient(180deg, #fff, #211334);
}
/* Editorial break between Cold Lead Nurturing and AI Lead Response. */
.rev-feature-list > .ai-earned-banner {
  width: 100%;
  margin-block: 20px;
  padding: 32px 0;
  border-radius: 24px;
  overflow: hidden;
  background: #f8f9f1;
}
@media (max-width: 760px) {
  .rev-feature-list > .ai-earned-banner {margin-block: 0; padding: 0;}
}
.professional-page .rev-feature--image,
.professional-page .rev-feature--image.rev-feature--media-left {
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  align-items: center;
  gap: 22px;
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow: visible;
}
.professional-page .rev-feature--image.rev-feature--media-left {
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
}
.professional-page .rev-feature--image .rev-feature-copy {
  padding: clamp(28px, 2.6vw, 38px);
  border: 0;
  border-radius: 0;
  background: transparent;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.professional-page .rev-feature--image .rev-feature-copy h3 {
  font-size: clamp(32px, 2.8vw, 42px);
  line-height: 1.08;
  margin-bottom: 20px;
  text-align: left;
  text-wrap: pretty;
  color: #19151f;
}
.professional-page .rev-feature--image .feature-hook {
  font-size: 16px;
  line-height: 1.5;
  margin-bottom: 14px;
  color: #19151f;
}
.professional-page .rev-feature--image .feature-description {
  margin-bottom: 0;
  color: #49414f;
  font-size: 15px;
  line-height: 1.7;
}
.professional-page .rev-feature--image .feature-more {margin-top: auto; padding-top: 24px;}
.professional-page .rev-feature--image .feature-more summary {
  width: fit-content;
  min-height: 44px;
  display: flex;
  gap: 12px;
  align-items: center;
  list-style: none;
  color: #332b3b;
  font: 600 14px/1.4 'Inter Reference', Arial, sans-serif;
  cursor: pointer;
}
.professional-page .rev-feature--image .feature-more summary::-webkit-details-marker {display: none;}
.professional-page .rev-feature--image .feature-more summary::after {content: '↗'; font-size: 18px;}
.professional-page .rev-feature--image .feature-more[open] summary::after {content: '−';}
.professional-page .rev-feature--image .feature-more summary:hover {color: #19151f; text-decoration: underline; text-underline-offset: 4px;}
.professional-page .rev-feature--image .feature-more summary:focus-visible {
  outline: 2px solid #a98be6; outline-offset: 4px; border-radius: 4px;
}
.professional-page .rev-feature--image .feature-more .feature-description {padding-top: 12px;}
.professional-page .rev-feature--image .rev-feature-media--image {
  align-self: start;
  width: 100%;
  height: auto;
  min-height: 0;
  aspect-ratio: 3 / 2;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}
.professional-page .rev-feature--image .rev-feature-media--image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
/* Restore the inset conversions panel from editorial-reference.css.
   Retain the approved dark closing invitation and its button. */
.professional-page .closing-invite {
  margin: 0;
  border-radius: 0;
  padding: 230px 32px 104px;
  background: linear-gradient(180deg, #321850 0, #211334 75px, #10091a 150px, #000 230px, #000 100%);
  color: #fff;
}
.professional-page .closing-invite h2,
.professional-page .closing-invite h2 em {color: #fff;}
.professional-page .closing-invite p {color: #cfc5dc;}
.professional-page .closing-invite .invite-details {color: #aa9abb;}
.professional-page .closing-invite .invite-button {
  background: var(--contact-purple-material);
  border: 1px solid #8875bc;
  box-shadow: inset 0 -10px 17px -14px #673de6, 0 0 24px #673de636;
}
@media (max-width: 1100px) {
  .professional-page .rev-features .rev-card-grid {gap: 20px;}
  .professional-page .rev-features .rev-card {border-radius: 20px;}
  .professional-page .rev-features .rev-card-label {left: 12px; bottom: 12px; max-width: calc(100% - 24px); padding: 8px 11px; font-size: 13px;}
  .professional-page .rev-feature--image,
  .professional-page .rev-feature--image.rev-feature--media-left {grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 20px;}
  .professional-page .rev-feature--image.rev-feature--media-left {grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);}
  .professional-page .rev-feature--image .rev-feature-copy {padding: 28px;}
}
@media (max-width: 760px) {
  .professional-page .rev-features .rev-card-grid {grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px;}
  .professional-page .rev-features .rev-card {grid-column: span 1;}
  .professional-page .rev-features .rev-card--landscape,
  .professional-page .rev-features .rev-card--full {grid-column: 1 / -1;}
  .professional-page .rev-platform {padding-top: 52px;}
  .professional-page .rev-platform .rev-feature-list {gap: 40px;}
  .professional-page .rev-feature--image,
  .professional-page .rev-feature--image.rev-feature--media-left {grid-template-columns: minmax(0, 1fr); gap: 16px;}
  .professional-page .rev-feature--image .rev-feature-copy {grid-column: 1; grid-row: 2; padding: 30px 26px;}
  .professional-page .rev-feature--image .rev-feature-media--image {grid-column: 1; grid-row: 1; height: auto;}
  .professional-page .rev-feature--image .rev-feature-copy h3 {font-size: 38px;}
  .professional-page .closing-invite {
    padding: 170px 24px 72px;
    background: linear-gradient(180deg, #321850 0, #211334 55px, #10091a 115px, #000 170px, #000 100%);
  }
}
@media (max-width: 580px) {
  .professional-page .rev-features .rev-card-grid {grid-template-columns: minmax(0, 1fr);}
  .professional-page .rev-features .rev-card {grid-column: 1 / -1; border-radius: 22px;}
  .professional-page .rev-features .rev-card-label {font-size: 14px; padding: 9px 13px;}
  .professional-page .rev-feature--image .rev-feature-copy h3 {font-size: 36px;}
}
@media (max-width: 360px) {
  .professional-page .rev-feature--image .rev-feature-copy {padding: 26px 22px;}
  .professional-page .rev-feature--image .rev-feature-copy h3 {font-size: 32px;}
}
@media (prefers-reduced-motion: reduce) {
  .professional-page .rev-features .rev-card,
  .professional-page .rev-features .rev-card-label {transition: none;}
}