/* Original guide artwork, with localized live page headings retained. */
.guide-feature-hero{margin-block:48px 0;max-width:1280px}
.guide-feature-hero img{display:block;width:100%;height:auto;aspect-ratio:1672/941;border-radius:6px}
.article .guide-feature-card{display:block;width:100%;height:auto;aspect-ratio:1672/941;border-radius:5px;margin:0 0 26px;object-fit:contain}
@media(max-width:800px){.guide-feature-hero{margin-top:32px}.article .guide-feature-card{margin-bottom:22px}}
@media print{.guide-feature-hero{display:none!important}}

/* Mobile reading edge: English starts left; Arabic starts right. Keep desktop composition. */
@media(max-width:800px){
 :is(.zoho-guide,.feedback-guide,.marketing-guide,.font-guide) main{ text-align:start; }
 .zoho-guide .page-hero,.zoho-guide .page-hero h1,.zoho-guide .page-hero p,.zoho-guide .page-hero .eyebrow,
 .feedback-guide .page-hero,.marketing-guide .page-hero,.font-guide .font-guide-hero,
 .font-guide .font-guide-hero-copy,#guides .article,.insights-heading,.related-guides{text-align:start}
 .zoho-guide .page-hero h1,.zoho-guide .page-hero p,.zoho-guide .page-hero .guide-product-logo{margin-inline:0}
 .zoho-guide .page-hero .eyebrow,.zoho-guide .page-hero .guide-actions,
 .feedback-guide .guide-actions,.marketing-guide .guide-actions,.font-guide .guide-actions,
 .font-guide .mdm-actions,.font-guide .font-guide-signal{justify-content:flex-start}
}

/* Live localized editorial type: readable in either language, never baked into the art. */
.guide-feature-composed .guide-feature-art{display:block;position:relative;isolation:isolate;overflow:hidden;aspect-ratio:1672/941;border-radius:6px;background:linear-gradient(120deg,#0d264f,#234d87);container-type:inline-size}
.guide-feature-composed .guide-feature-art>img{position:absolute;inset-block:0;inset-inline-end:0;width:70%;height:100%;object-fit:contain;margin:0;border-radius:0;mask-image:linear-gradient(to right,transparent,#000 18%)}
[dir=rtl] .guide-feature-composed .guide-feature-art>img{mask-image:linear-gradient(to left,transparent,#000 18%)}
.guide-feature-copy{position:absolute;inset-inline-start:5%;inset-block:0;display:flex;flex-direction:column;justify-content:center;width:47%;text-align:start;color:#fff;z-index:1}
.guide-feature-label{display:block;font-size:clamp(8px,1.8cqw,22px);font-weight:700;letter-spacing:.13em;line-height:1.5;margin-bottom:5cqw}
.guide-feature-label:after{content:"";display:block;width:7cqw;height:3px;background:#89d6f4;border-radius:3px;margin-top:1.6cqw}
.guide-feature-title{display:block;font-size:clamp(19px,6.1cqw,76px);font-weight:750;line-height:1.08;letter-spacing:-.035em;text-wrap:balance;text-shadow:0 1px 10px #0d264f66}
[dir=rtl] .guide-feature-title{font-size:clamp(19px,5.6cqw,68px);line-height:1.4;letter-spacing:0}
[dir=rtl] .guide-feature-label{letter-spacing:0;font-size:clamp(10px,2.2cqw,25px)}
.article .guide-feature-card-art{display:block;margin-bottom:26px}
@media(max-width:800px){.article .guide-feature-card-art{margin-bottom:22px}}
.guide-feature-copy{width:37%}
.guide-feature-composed .guide-feature-art>img{width:62%;mask-image:radial-gradient(ellipse 88% 78% at 62% 50%,#000 56%,transparent 100%)}
[dir=rtl] .guide-feature-composed .guide-feature-art>img{mask-image:radial-gradient(ellipse 88% 78% at 38% 50%,#000 56%,transparent 100%)}

/* Blend the illustration's actual bounds, not the contain letterbox, into the full-width canvas. */
.guide-feature-composed .guide-feature-art>img,[dir=rtl] .guide-feature-composed .guide-feature-art>img{inset-block:auto;top:50%;height:auto;transform:translateY(-50%);mask-image:linear-gradient(to right,transparent,#000 14%,#000 86%,transparent),linear-gradient(to bottom,transparent,#000 16%,#000 80%,transparent);mask-composite:intersect;-webkit-mask-composite:source-in}