/* Direction 1's composition with Direction 2's useful extension demonstration. */
html .hero-hybrid{display:grid;grid-template-columns:minmax(0,.92fr) minmax(120px,.48fr) minmax(0,2.05fr);grid-template-rows:1fr auto;gap:18px 16px;padding:32px 32px 26px;min-height:620px;overflow:hidden;align-items:center;isolation:isolate}
html .hero-hybrid .hero-side-copy{grid-column:1;grid-row:1;position:relative;width:auto;max-width:none;padding:15px 0 0;margin:0;z-index:5;align-self:center}
html .hero-hybrid .hero-side-copy h2{font-size:clamp(34px,3.55vw,61px);line-height:1.06}
html .hero-hybrid .hero-side-copy p{font-size:13px;line-height:1.8;max-width:330px;margin:20px 0 23px}
html .hero-hybrid .hero-side-copy .button{white-space:normal;font-size:11px;padding:15px 16px;gap:12px;width:100%;justify-content:space-between}
html .hero-hybrid .hero-side-copy .eyebrow{font-size:7px;line-height:1.6;margin-bottom:18px}
html .hero-hybrid .app-route{font-size:10px;line-height:1.6;gap:8px}
html .hero-hybrid .adoption-proof{max-width:none;margin-top:24px}.hero-hybrid .adoption-proof strong{font-size:31px}
html .hero-hybrid .hero-character{grid-column:2;grid-row:1/3;position:relative;inset:auto;left:auto;right:auto;top:auto;bottom:auto;width:150%;height:355px;margin-inline:-25%;align-self:end;transform:none;z-index:3;pointer-events:none}
html .hero-hybrid .character-shadow{bottom:6%;left:15%;height:20px}
html .hero-hybrid .character-name{display:none}
.hero-demo{grid-column:3;grid-row:1/3;position:relative;min-width:0;z-index:4;background:var(--red);border:1px solid #ffffff50;padding:16px;box-shadow:8px 9px 0 #10111433;align-self:center}
.hero-demo-heading{display:flex;align-items:center;gap:17px;font-size:9px;font-weight:700;color:var(--paper);margin-bottom:17px;line-height:1.5}.hero-demo-heading i{flex:1;height:1px;background:#ffffff50}.hero-demo-caption{font-size:9px;line-height:1.6;color:var(--paper);margin:13px 0 0;text-align:center}
html .hero-hybrid .hero-explore{grid-column:1;grid-row:2;position:relative;inset:auto;left:auto;right:auto;bottom:auto;width:100%;font-size:7px;gap:10px;margin-top:0;align-self:end;padding-bottom:5px}
html .hero-hybrid .hero-explore svg{height:23px;width:23px}
html[lang=ar] .hero-hybrid .hero-side-copy h2{font-family:SavrzArabic,sans-serif;font-weight:900;font-size:clamp(27px,3vw,49px);line-height:1.45}
html[lang=ar] .hero-hybrid .hero-side-copy p{font-size:13px;line-height:1.9}
html[lang=ar] .hero-hybrid .hero-side-copy .eyebrow{font-size:9px}
html[lang=ar] .hero-hybrid .hero-demo-heading{font-size:11px}
html[lang=ar] .hero-hybrid .hero-demo-caption{font-size:10px}
html[lang=ar] .hero-hybrid .adoption-proof strong{font-family:SavrzArabic,sans-serif;font-weight:900;font-size:29px}
@media(min-width:1700px){html .hero-hybrid{padding:45px;gap:24px;min-height:690px}.hero-demo{padding:23px}.hero-demo-heading{font-size:11px;margin-bottom:20px}.hero-demo-caption{font-size:11px}html .hero-hybrid .hero-character{height:430px}html .hero-hybrid .hero-side-copy p{font-size:16px}html .hero-hybrid .hero-side-copy .button{font-size:14px}html .hero-hybrid .app-route{font-size:12px}}
@media(max-width:1240px) and (min-width:701px){html .hero-hybrid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto auto;gap:28px;padding:30px;min-height:0}html .hero-hybrid .hero-side-copy{grid-column:1;grid-row:1;padding:0}html .hero-hybrid .hero-side-copy h2{font-size:50px}html .hero-hybrid .hero-side-copy p{font-size:14px;max-width:420px}html .hero-hybrid .hero-character{grid-column:2;grid-row:1;justify-self:center;width:100%;height:340px;margin:0;align-self:end}.hero-demo{grid-column:1/-1;grid-row:2;padding:22px;max-width:860px;justify-self:center;width:100%}html .hero-hybrid .hero-explore{display:none}.hero-demo-caption{font-size:11px}html[lang=ar] .hero-hybrid .hero-side-copy h2{font-size:40px}html[lang=ar] .hero-hybrid .hero-side-copy p{font-size:14px}}
@media(max-width:700px){
html .hero-hybrid{display:block;position:relative;min-height:0;padding:25px 16px 20px;overflow:hidden}
html .hero-hybrid .hero-side-copy{width:100%;padding:0;margin:0;position:relative}
html .hero-hybrid .hero-side-copy .eyebrow{font-size:6px;margin-bottom:17px;max-width:65%}
html .hero-hybrid .hero-side-copy h2{font-size:clamp(33px,8.8vw,56px);line-height:1.1;width:69%;min-height:105px}
html .hero-hybrid .hero-side-copy p{font-size:12px;max-width:none;line-height:1.8;margin:19px 0 20px}
html .hero-hybrid .hero-side-copy .button{font-size:12px;padding:16px 18px;min-height:50px}
html .hero-hybrid .app-route{font-size:11px;margin-top:13px}
html .hero-hybrid .adoption-proof{margin-top:18px;padding-top:14px;gap:6px 9px;align-items:center;flex-wrap:wrap}
html .hero-hybrid .adoption-proof strong{font-size:27px}.hero-hybrid .adoption-proof .micro{font-size:8px;line-height:1.6;max-width:145px;flex-basis:auto;margin-inline-start:auto}
html .hero-hybrid .hero-character{position:absolute;grid-column:auto;grid-row:auto;width:34%;height:147px;left:auto;right:0;top:18px;bottom:auto;inset-inline-end:0;inset-inline-start:auto;margin:0;z-index:4}
.hero-demo{margin-top:28px;padding:10px;box-shadow:4px 5px 0 #10111433;width:100%;max-width:none}
.hero-demo-heading{font-size:7px;margin-bottom:12px;gap:10px}.hero-demo-caption{font-size:8px;line-height:1.7;margin-top:11px}
html .hero-hybrid .hero-explore{display:none}
html[lang=ar] .hero-hybrid .hero-character{left:0;right:auto;inset-inline-end:0;inset-inline-start:auto;top:26px}
html[lang=ar] .hero-hybrid .hero-side-copy h2{font-size:clamp(27px,7.5vw,43px);line-height:1.45;min-height:110px}
html[lang=ar] .hero-hybrid .hero-side-copy p{font-size:12px;line-height:1.9}
html[lang=ar] .hero-hybrid .hero-side-copy .eyebrow{font-size:7px}
html[lang=ar] .hero-hybrid .hero-demo-heading{font-size:9px}
html[lang=ar] .hero-hybrid .hero-demo-caption{font-size:9px}
html[lang=ar] .hero-hybrid .adoption-proof strong{font-size:25px}
}
@media(max-width:360px){html .hero-hybrid{padding-inline:13px}html .hero-hybrid .hero-side-copy h2{font-size:29px}html .hero-hybrid .hero-character{height:128px;top:22px}.hero-hybrid .adoption-proof .micro{font-size:7px;max-width:107px}.hero-demo{padding:8px}html[lang=ar] .hero-hybrid .hero-side-copy h2{font-size:25px}}

/* Review 30 Oct: preserve the approved mascot, with its ear above the demo. */
html .hero-hybrid .hero-character{z-index:5}
html .hero-hybrid .hero-side-copy{z-index:6}
html[lang=ar] .hero #hero-title{font-family:var(--arabic-font);font-weight:900;letter-spacing:0;line-height:1.45;font-synthesis:none}
html[lang=ar] #hero-title>span{font-family:inherit;font-weight:inherit;letter-spacing:0;transform:none!important}