/* Editorial feature sections: a shared heading, illustration and compact feature list. */
body.j3-page .j3-feature-story > .j3-section-frame {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:42px 48px;align-items:center;}
body.j3-page .j3-feature-story .j3-section-head {grid-column:1/-1;grid-row:1;width:100%;max-width:none;margin:0;padding:0;text-align:start;}
body.j3-page .j3-feature-story .fcat-head {display:grid;grid-template-columns:1fr 1fr;gap:0 64px;align-items:center;margin:0;padding:0;}
body.j3-page .j3-feature-story .fcat-head-tag {grid-column:1/-1;margin:0 0 16px;}
body.j3-page .j3-feature-story .fcat-head-title {margin:0;max-width:600px;font-size:clamp(34px,3.4vw,48px);line-height:1.13;}
body.j3-page .j3-feature-story .fcat-head-desc {max-width:560px;margin:0;font-size:17px;line-height:1.8;}
body.j3-page .j3-feature-story .j3-section-frame > :is(.fcat-img,.prd-img) {grid-column:1;grid-row:2;width:100%;min-width:0;max-width:620px;margin:0;padding:0;background:none;border:0;justify-self:center;}
body.j3-page .j3-feature-story :is(.fcat-img,.prd-img) :is(.j3-feature-art,.img-ph,.img-ph-clip) {display:block;width:100%;height:auto;margin:0!important;padding:0;border:0;background:none;}
body.j3-page .j3-feature-story :is(.fcat-img,.prd-img) img {display:block;width:100%;height:auto;max-height:none;object-fit:contain;}
body.j3-page .j3-feature-story .j3-section-content {grid-column:2;grid-row:2;min-width:0;width:100%;}
body.j3-page .j3-feature-story .j3-detail-layout {display:block;}
body.j3-page .j3-feature-story .j3-feature-index {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 30px;}
body.j3-page .j3-feature-story .j3-feature-index > .fcat-item,
body.j3-page .j3-feature-story .j3-feature-index > .fcat-item:first-child {display:block;position:relative;padding:19px 0 0;border:0;border-top:1px solid var(--j3-line);border-radius:0;background:none;min-width:0;}
body.j3-page .j3-feature-story .j3-feature-index > .fcat-item::before {display:block;padding:0;margin:0 0 12px;font-size:11px;line-height:1;}
body.j3-page .j3-feature-story .j3-feature-index .fcat-item-title {font-size:18px;line-height:1.35;margin:0 0 10px;}
body.j3-page .j3-feature-story .j3-feature-index .fcat-item-desc {font-size:14px;line-height:1.75;margin:0;}
body.j3-page .j3-feature-story[data-feature-count="5"] .fcat-item:last-child {grid-column:1/-1;}
/* Homepage overviews retain their captions and actions. */
body.j3-page .j3-home-feature-story:is(#messenger,#telephony,#crm) .prd-head {display:grid;grid-template-columns:1fr 1fr;gap:0 64px;align-items:center;text-align:start;max-width:none;margin:0;padding:0;}
body.j3-page .j3-home-feature-story .prd-head .sec-tag {grid-column:1/-1;order:-1;justify-self:start;margin:0 0 16px;}
body.j3-page .j3-home-feature-story .prd-head :is(h2,p) {margin:0;}
body.j3-page .j3-home-feature-story .feat-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 28px;}
body.j3-page .j3-home-feature-story .feat-card {min-width:0;padding:17px 0 0;border:0;border-top:1px solid var(--j3-line);border-radius:0;background:none;box-shadow:none;}
body.j3-page .j3-home-feature-story .product-cta-row {margin-top:26px;}
body.j3-page .j3-home-feature-story .prd-img .img-ph {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;}
body.j3-page .j3-home-feature-story .prd-img .img-ph-clip {grid-column:1/-1;}
body.j3-page .j3-home-feature-story#messenger .prd-img .img-ph-clip {background:#eae9f0;border-radius:24px;padding:18px;}
body.j3-page .j3-home-feature-story .prd-img .j3-product-note {position:static;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;margin:0;padding:12px 0;border:0;border-top:1px solid var(--j3-line);background:none;transform:none;min-width:0;text-align:center;}
body.j3-page .j3-home-feature-story .prd-img .j3-product-note :is(.pb-card-val,strong) {font-size:20px;line-height:1.2;}
body.j3-page .j3-home-feature-story .prd-img .j3-product-note :is(.pb-card-lbl,.pb-card-top,small,.pb-txt) {font-size:11px;line-height:1.4;}
body.j3-page .j3-home-feature-story .prd-img .j3-product-note svg {width:20px;height:20px;}
/* AI result sections keep the same illustration-and-evidence rhythm. */
body.j3-page:is([data-j3-page="ai-analytics"],[data-j3-page="ai-receptionist"],[data-j3-page="ai-lead-qualification"],[data-j3-page="ai-appointment-automation"]) #results > .j3-section-frame {display:grid;grid-template-columns:minmax(0,.88fr) minmax(0,1.32fr);gap:36px 56px;align-items:center;}
body.j3-page #results:has(.results-showcase) .j3-section-head {grid-column:1/-1;grid-row:1;width:100%;max-width:none;margin:0;padding:0;text-align:start;}
body.j3-page #results:has(.results-showcase) .j3-section-head :is(h2,p) {margin-inline:0;}
body.j3-page #results:has(.results-showcase) :is(.j3-section-content,.j3-section-content > .container,.j3-section-content .j3-functional,.results-showcase,.results-body) {display:contents;}
body.j3-page #results .results-media-col {grid-column:1;grid-row:2;width:100%;max-width:500px;justify-self:center;}
body.j3-page #results .results-stack {grid-column:2;grid-row:2;width:100%;min-width:0;}
body.j3-page #results .results-stack .benefits-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;}
body.j3-page #results .results-stack .benefit {padding:20px 0 0;border:0;border-top:1px solid var(--j3-line);border-radius:0;background:none;box-shadow:none;}
body.j3-page #results:has(.results-showcase) .metrics-grid {grid-column:1/-1;grid-row:3;margin:0;}
@media(max-width:1000px){
  body.j3-page .j3-feature-story > .j3-section-frame {column-gap:32px;grid-template-columns:repeat(2,minmax(0,1fr));}
  body.j3-page .j3-feature-story .j3-feature-index {column-gap:22px;}
}
@media(max-width:760px){
  body.j3-page .j3-feature-story > .j3-section-frame {grid-template-columns:1fr;gap:28px;}
  body.j3-page .j3-feature-story .fcat-head,
  body.j3-page .j3-home-feature-story:is(#messenger,#telephony,#crm) .prd-head {grid-template-columns:1fr;gap:16px;}
  body.j3-page .j3-feature-story .fcat-head-tag {margin:0;}
  body.j3-page .j3-feature-story .fcat-head-title {font-size:34px;}
  body.j3-page .j3-feature-story .fcat-head-desc {font-size:16px;}
  body.j3-page .j3-feature-story .j3-section-frame > :is(.fcat-img,.prd-img) {grid-column:1;grid-row:2;max-width:600px;}
  body.j3-page .j3-feature-story .j3-section-content {grid-column:1;grid-row:3;}
  body.j3-page .j3-feature-story .j3-feature-index,
  body.j3-page .j3-home-feature-story .feat-grid {grid-template-columns:1fr;gap:22px;}
  body.j3-page:is([data-j3-page="ai-analytics"],[data-j3-page="ai-receptionist"],[data-j3-page="ai-lead-qualification"],[data-j3-page="ai-appointment-automation"]) #results > .j3-section-frame {grid-template-columns:1fr;gap:28px;}
  body.j3-page #results .results-media-col {grid-column:1;grid-row:2;max-width:420px;}
  body.j3-page #results .results-stack {grid-column:1;grid-row:3;}
  body.j3-page #results .results-stack .benefits-grid {grid-template-columns:1fr;}
  body.j3-page #results:has(.results-showcase) .metrics-grid {grid-row:4;}
}

/* Alternate the illustration side without changing the mobile reading order. */
@media(min-width:761px){
  body.j3-page .j3-feature-story-reversed > .j3-section-frame {grid-template-columns:repeat(2,minmax(0,1fr));}
  body.j3-page .j3-feature-story-reversed .j3-section-frame > :is(.fcat-img,.prd-img) {grid-column:2;}
  body.j3-page .j3-feature-story-reversed .j3-section-content {grid-column:1;}
}
/* Keep artwork large on tablets without squeezing the two-column feature list. */
@media(min-width:761px) and (max-width:1000px){
  body.j3-page .j3-feature-story > .j3-section-frame {grid-template-columns:1fr;gap:32px;}
  body.j3-page .j3-feature-story .j3-section-frame > :is(.fcat-img,.prd-img) {grid-column:1;grid-row:2;max-width:600px;}
  body.j3-page .j3-feature-story .j3-section-content {grid-column:1;grid-row:3;}
}
/* Shared outer corners also cover legacy section-specific background colors.
   Keep overflow visible so SVG shadows and captions are not cut off. */
body.j3-page {--j3-art-radius:28px;}
body.j3-page .j3-feature-story .j3-section-frame > :is(.prd-img,.fcat-img) {
  border-radius:var(--j3-art-radius)!important;background-clip:padding-box;
}
@media(max-width:760px){body.j3-page{--j3-art-radius:22px;}}