/* Approved readability, section rhythm, supplied artwork and Hub Lead footer. */
:root { --crm-chapter-gap: 40px; --chapter-white: #f7f7fc; }
/* A tight shadow follows the letters, not a boxed backing, so the tagline
   remains readable across the changing light trails in the hero film. */
.professional-page .brand-tagline {
  display: inline-block; width: max-content; max-width: 100%;
  color: #fff; background: transparent; border: 0;
  padding: 0; border-radius: 0;
  font: 800 13px/1.4 'Inter Tight', Arial, sans-serif;
  -webkit-text-stroke: .3px #000;
  paint-order: stroke fill;
  text-shadow: -1px 0 1px #000, 1px 0 1px #000, 0 -1px 1px #000, 0 2px 2px #000, 0 0 7px #000;
  white-space: nowrap;
}
.professional-page .official-brand { overflow: visible; }
/* Soft, edge-free shading only behind the logo corner. No label box or border;
   the hero film remains visible and the shading dissolves in every direction. */
.professional-page .header {isolation: isolate;}
.professional-page .header::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: clamp(240px, 23vw, 340px);
  height: 150px;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse at 28% 40%, #000b 0%, #0006 36%, transparent 72%);
}
/* Equal rhythm on either side of the CRM heading, including the motion takeover. */
html.scroll-takeover .conversion-story { align-items: flex-end; }
.professional-page .hero, .professional-page .conversion-story { background: #000; }
.professional-page .conversion-story { padding-bottom: 0; }
.crm-introduction { padding: var(--crm-chapter-gap) 0; }
.professional-page .performance-zone { padding-top: 0; }
.professional-page .performance-zone .platforms { padding: 0 0 56px; }
/* One continuous canvas: plum → white → plum, without hard seams or rules. */
.professional-page .performance-intro {
  margin-top: 0; padding-top: 164px; padding-bottom: 164px;
  background: linear-gradient(180deg, transparent, var(--chapter-white) 112px, var(--chapter-white) calc(100% - 112px), transparent);
}
.performance-data { border-top: 0; padding-top: 56px; padding-bottom: 118px; }
.rev-features { padding-top: 64px; padding-bottom: 32px; }
.performance-stats { font-variant-numeric: tabular-nums; }
/* Existing banner artwork; its placement within the services is scoped in
   presentation-boxes.css. Keep the original desktop and mobile composition. */
.ai-earned-banner {
  margin: 0; padding: 96px 0;
  background: linear-gradient(180deg, #000, #f8f9f1 96px, #f8f9f1 calc(100% - 96px), #000);
}
.ai-earned-visual { position: relative; width: min(1463px, 100%); margin: 0 auto; }
.ai-earned-screenshot { display: block; width: 100%; height: auto; }
.ai-earned-call {
  position: absolute; left: 5.65%; top: 63.35%;
  display: inline-flex; align-items: center; justify-content: center;
  width: max(9.92%, 114px); height: max(8.85%, 44px);
  padding: 0 10px; border: 0; border-radius: 999px;
  background: #000; color: #fff;
  font: 600 clamp(12px, 1.025vw, 15px)/1.2 'Inter Tight', Arial, sans-serif;
  text-decoration: none; white-space: nowrap;
}
.ai-earned-mobile-copy { display: none; }
.ai-earned-call:focus-visible, .footer-call:focus-visible { outline: 3px solid #ad92ef; outline-offset: 4px; }
.professional-page .rev-platform { background: #000; padding-top: 40px; }
/* Use the entire numbered artwork: never crop its embedded headlines or devices. */
.rev-feature--image { grid-template-columns: minmax(0, .7fr) minmax(0, 1.8fr); gap: 48px; }
.rev-feature--image.rev-feature--media-left { grid-template-columns: minmax(0, 1.8fr) minmax(0, .7fr); }
.rev-feature--image .rev-feature-copy h3 {
  font: 400 clamp(24px, 2.5vw, 36px)/1.15 'Inter Tight', Arial, sans-serif;
  color: #fff; margin: 0 0 28px; text-wrap: balance;
}
.rev-feature .rev-feature-media--image {
  height: auto; aspect-ratio: 3 / 2; padding: 0; border: 0;
  background: #fff; border-radius: 18px; overflow: hidden;
}
.rev-feature-media--image::before, .rev-feature-media--image::after { content: none; }
.rev-feature-media--image img { display: block; width: 100%; height: auto; object-fit: contain; }
/* Match the existing dark demo-button language, including its violet edge. */
.reference-footer a.footer-call {
  background: #08080d; color: #fff; border: 1px solid #8875bc;
  border-radius: 999px; padding: 12px 20px; min-height: 48px; gap: 22px;
  box-shadow: inset 0 -10px 17px -14px #673de6, 0 0 15px #673de626;
  font: 600 14px/1.2 'Inter Tight', Arial, sans-serif;
}
.reference-footer a.footer-call:hover { color: #fff; border-color: #b5a1f5; }
.reference-footer h3 { text-transform: none; }
.reference-footer .footer-top { grid-template-columns: 1.3fr .85fr 1.5fr 1fr; }
.reference-footer .footer-services a { min-height: 36px; line-height: 1.5; }
.reference-footer .legal-line { justify-content: flex-start; }
@media (max-width: 1000px) {
  .reference-footer .footer-top { grid-template-columns: 1fr 1fr; }
  .rev-feature--image, .rev-feature--image.rev-feature--media-left { gap: 28px; }
}
@media (max-width: 760px) {
  :root { --crm-chapter-gap: 32px; }
  .professional-page .brand-tagline { font-size: 10.5px; }
  .professional-page .official-brand { width: 155px; min-width: 155px; }
  .professional-page .performance-zone .platforms { padding: 0 0 32px; }
  .professional-page .performance-intro {
    padding: 110px 24px; background: linear-gradient(180deg, transparent, var(--chapter-white) 72px, var(--chapter-white) calc(100% - 72px), transparent);
  }
  .performance-data { padding-top: 40px; padding-bottom: 80px; }
  .rev-features { padding-top: 40px; padding-bottom: 24px; }
  .ai-earned-banner { padding: 64px 18px; background: linear-gradient(180deg, #000, #f8f9f1 64px, #f8f9f1 calc(100% - 64px), #000); }
  .ai-earned-visual {
    min-height: 500px; border-radius: 20px; overflow: hidden;
    background: linear-gradient(180deg, #17212c14, #17212c22 28%, #17212cef 65%, #17212c), url('assets/revision/ai-earned-portrait.webp') center 20% / cover no-repeat;
    padding: 275px 24px 28px;
  }
  .ai-earned-screenshot { display: none; }
  .ai-earned-mobile-copy { display: block; color: #fff; }
  .ai-earned-mobile-copy h2 { font: 400 34px/1.06 'Instrument Serif', Georgia, serif; margin: 0 0 18px; text-wrap: balance; }
  .ai-earned-mobile-copy h2 em { font-weight: 400; }
  .ai-earned-mobile-copy p { font: 400 15px/1.6 'Inter Tight', Arial, sans-serif; margin: 0 0 24px; }
  .ai-earned-call { position: relative; left: auto; top: auto; width: 144px; height: 48px; font-size: 15px; }
  .professional-page .rev-platform { padding-top: 32px; }
  .rev-feature--image, .rev-feature--image.rev-feature--media-left { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .rev-feature--image .rev-feature-copy h3 { font-size: 26px; margin-bottom: 18px; }
  .rev-feature--image .rev-feature-copy { grid-column: 1; grid-row: 2; }
  .rev-feature .rev-feature-media--image { grid-column: 1; grid-row: 1; height: auto; }
  .rev-feature-list { gap: 64px; }
}
@media (max-width: 600px) { .reference-footer .footer-top { grid-template-columns: 1fr; } }
@media (max-width: 360px) {
  .professional-page .official-brand { width: 143px; min-width: 143px; }
  .professional-page .brand-tagline { font-size: 10px; }
}