html[lang="ar"]{direction:rtl;max-width:100%;overflow-x:hidden}
html[lang="ar"] body{
font-family:"IBM Plex Sans Arabic","Plus Jakarta Sans",sans-serif;
direction:rtl;
text-align:right;
}
/* Arabic institutional pages: keep captions, controls and diagram copy legible. */
html[lang="ar"] body.arabic-mirrored-page :is(.why-page,.about-page,.security-v2) small{
font-size:14px !important;
line-height:1.65!important;
letter-spacing:0!important;
text-transform:none!important;
}
html[lang="ar"] body.arabic-mirrored-page :is(
.why-page .eyebrow,
.why-page .why-kicker,
.why-page .why-section-no,
.about-page .ip-kicker,
.about-page .about-v2-index,
.security-v2 .ip-kicker,
.security-v2 .security-kicker
){
font-size:14px!important;
line-height:1.6!important;
letter-spacing:0!important;
text-transform:none!important;
}
html[lang="ar"] body.arabic-mirrored-page :is(.why-page,.about-page,.security-v2) :is(nav button,button>span,button>b){
font-size:14px!important;
line-height:1.55!important;
letter-spacing:0!important;
}
html[lang="ar"] body.arabic-mirrored-page .why-page :is(
.why-hero-proof span,
.why-hero-proof b,
.why-window-bar,
.why-pulse,
.why-pulse b,
.why-stage-label,
.why-system-map article i,
.why-system-map article span,
.why-boundary>span,
.why-lock span,
.why-scale-number>span,
.why-owner-path article>span,
.why-owner-link b,
.why-owner-proof small
){
font-size:14px !important;
line-height:1.55!important;
letter-spacing:0!important;
text-transform:none!important;
}
html[lang="ar"] body.arabic-mirrored-page .why-page :is(
.why-reason-list button p,
.why-system-map article span,
.why-server small,
.why-owner-intro>p
){
font-size:17px !important;
line-height:1.7!important;
}
html[lang="ar"] body.arabic-mirrored-page .why-page :is(.why-hero:after,.why-proof-card-media:before){
font-size:14px !important;
letter-spacing:0!important;
}
html[lang="ar"] body.arabic-mirrored-page .about-page :is(
.about-v2-stats span,
.about-v2-dashboard>div,
.about-v2-badge span,
.about-timeline-copy>span,
.about-timeline-signal,
.about-proof-screen b,
.about-proof-number span,
.about-workbench>nav button span,
.about-work-stage>div:last-child>span,
.about-work-stage>div:last-child b,
.about-v2-map-stat,
.about-v2-marquee span,
.about-v3-office>b,
.about-v3-office-route,
.about-v3-office-route strong,
.about-v3-office-result aside span,
.about-v3-portfolio-core>span,
.about-v3-ecosystem article>span,
.about-v3-portfolio-proof
){
font-size:14px !important;
line-height:1.6!important;
letter-spacing:0!important;
text-transform:none!important;
}
html[lang="ar"] body.arabic-mirrored-page .about-page :is(
.about-v3-office p,
.about-v3-office-result>div p,
.about-timeline-copy p,
.about-work-stage p
){
font-size:17px !important;
line-height:1.75!important;
}
html[lang="ar"] body.arabic-mirrored-page .security-v2 :is(
.security-hero-tags span,
.security-perimeter>span,
.security-perimeter>span b,
.security-model-boundary>span,
.sec8-panel-copy>span,
.sec8-flow>b,
.sec8-flow section>div:after,
.sec8-boundary>footer span,
.sec8-boundary>footer b,
.sec8-hybrid-boundaries section span,
.sec8-hybrid-boundaries>section:after,
.sec8-detail-card span,
.sec10-access>span,
.sec10-access-route span,
.sec10-zone>header span,
.sec10-node strong,
.sec10-private-link span,
.sec10-status,
.sec10-map-caption span,
.sec11-selector>header>span,
.sec11-selector nav button>span,
.sec11-selected>span,
.sec11-people>span,
.sec11-route span,
.sec11-control-stamp span,
.sec11-control-stamp strong,
.sec11-stage>footer>span
){
font-size:14px !important;
line-height:1.55!important;
letter-spacing:0!important;
text-transform:none!important;
}
html[lang="ar"] body.arabic-mirrored-page .security-v2 :is(
.sec8-panel-copy p,
.sec8-detail-card p,
.sec10-map-caption p,
.sec11-selected>p,
.sec11-stage>footer p
){
font-size:17px !important;
line-height:1.7!important;
}
html[lang="ar"] body.arabic-mirrored-page .security-v2 :is(.sec8-detail-card,.sec10-map-caption,.sec11-stage>footer){
height:auto!important;
}
@media(max-width:640px){
html[lang="ar"] body.arabic-mirrored-page :is(.why-page,.about-page,.security-v2) small{
font-size:14px !important;
}
html[lang="ar"] body.arabic-mirrored-page .security-v2 :is(.sec8-panel-copy p,.sec8-detail-card p,.sec10-map-caption p,.sec11-selected>p,.sec11-stage>footer p){
font-size:17px !important;
}
}
/* Shawts hero uses the same composition in a true RTL mirror. */
html[lang="ar"] body.arabic-shawts-page .story-design-broadcast .product-story-hero{padding:88px 0 96px;background:radial-gradient(circle at 13% 16%,rgba(185,240,101,.48),transparent 24%),radial-gradient(circle at 40% 92%,rgba(74,205,139,.14),transparent 30%),linear-gradient(225deg,#fbfcf5 0%,#edf9ef 55%,#e1f5e8 100%)}
html[lang="ar"] body.arabic-shawts-page .story-design-broadcast .product-story-hero:after{right:auto;left:-150px}
html[lang="ar"] body.arabic-shawts-page .story-design-broadcast .product-story-hero>.section-shell{min-height:610px;grid-template-columns:minmax(420px,.82fr) minmax(0,1.18fr)!important;gap:64px!important}
html[lang="ar"] body.arabic-shawts-page .story-design-broadcast .product-story-copy{max-width:565px!important}
html[lang="ar"] body.arabic-shawts-page .story-design-broadcast .story-index{left:auto;right:-24px;top:-108px;font-size:170px}
html[lang="ar"] body.arabic-shawts-page .story-design-broadcast .product-story-copy h1{max-width:565px!important;font-size:clamp(48px,4.2vw,62px)!important;line-height:1.2!important;letter-spacing:-.04em!important}
html[lang="ar"] body.arabic-shawts-page .story-design-broadcast .product-story-copy>p{max-width:520px!important;margin-top:25px;font-size:18px!important;line-height:1.85!important}
html[lang="ar"] body.arabic-shawts-page .story-hero-proof{direction:rtl;text-align:right}
html[lang="ar"] body.arabic-shawts-page .story-design-broadcast .product-story-screen{border-radius:28px 28px 28px 9px;transform:rotate(-.65deg) scale(1.025)}
html[lang="ar"] body.arabic-shawts-page .story-design-broadcast .product-story-screen:before{inset:-31px -28px 34px 25px}
@media(max-width:980px){html[lang="ar"] body.arabic-shawts-page .story-design-broadcast .product-story-hero>.section-shell{grid-template-columns:1fr!important;gap:54px!important}html[lang="ar"] body.arabic-shawts-page .story-design-broadcast .product-story-copy{max-width:720px!important}html[lang="ar"] body.arabic-shawts-page .story-design-broadcast .product-story-copy h1,html[lang="ar"] body.arabic-shawts-page .story-design-broadcast .product-story-copy>p{max-width:680px!important}}
@media(max-width:680px){html[lang="ar"] body.arabic-shawts-page .story-design-broadcast .product-story-hero{padding:62px 0 72px!important}html[lang="ar"] body.arabic-shawts-page .story-design-broadcast .product-story-hero>.section-shell{gap:40px!important}html[lang="ar"] body.arabic-shawts-page .story-design-broadcast .story-index{right:-8px;top:-62px;font-size:104px!important}html[lang="ar"] body.arabic-shawts-page .story-design-broadcast .product-story-copy h1{font-size:34px!important;line-height:1.35!important}html[lang="ar"] body.arabic-shawts-page .story-design-broadcast .product-story-copy>p{margin-top:20px;font-size:17px !important;line-height:1.85!important}html[lang="ar"] body.arabic-shawts-page .story-design-broadcast .product-story-screen{transform:none}}
/* Dashboard module 03: mirror every moderation composition, not only the hero grid. */
html[lang="ar"] body.arabic-moderation-page .story-design-moderation{
direction:rtl;
text-align:right;
}
html[lang="ar"] body.arabic-moderation-page .story-design-moderation .product-story-hero{
background:radial-gradient(circle at 18% 18%,rgba(185,240,101,.2),transparent 26%),linear-gradient(225deg,#14271f,#073c2b);
}
html[lang="ar"] body.arabic-moderation-page .dashboard-shawts-hero .product-story-copy h1{
color:#fff!important;
text-shadow:0 2px 18px rgba(0,0,0,.16);
}
html[lang="ar"] body.arabic-moderation-page .dashboard-shawts-hero .product-story-copy>p{
color:#d8e9e1!important;
}
html[lang="ar"] body.arabic-moderation-page .dashboard-shawts-hero .story-hero-proof>span{
color:#e3f0ea!important;
}
html[lang="ar"] body.arabic-moderation-page .dashboard-shawts-hero .product-story-copy>.eyebrow{
color:#087545!important;
background:#f5fbf6!important;
}
html[lang="ar"] body.arabic-moderation-page .story-design-moderation .product-story-hero:before{
mask-image:linear-gradient(270deg,transparent 20%,#000);
}
html[lang="ar"] body.arabic-moderation-page .story-design-moderation .product-story-screen,
html[lang="ar"] body.arabic-moderation-page .moderation-step-stage,
html[lang="ar"] body.arabic-moderation-page .moderation-queue-screen,
html[lang="ar"] body.arabic-moderation-page .moderation-context-stage{
border-radius:25px 25px 25px 8px;
}
html[lang="ar"] body.arabic-moderation-page .story-design-moderation .product-story-screen:before{
inset:-28px -25px 30px 22px;
border-radius:18px 42px 18px 42px;
background:linear-gradient(215deg,#b9f065,#4ed08c);
}
html[lang="ar"] body.arabic-moderation-page :is(.moderation-steps,.moderation-workspace,.moderation-context-experience),
html[lang="ar"] body.arabic-moderation-page :is(.moderation-post,.moderation-ai,.moderation-review,.moderation-actions,.moderation-restrict){
direction:rtl;
text-align:right;
}
html[lang="ar"] body.arabic-moderation-page .moderation-steps>nav:before{
background:linear-gradient(270deg,#08a657,#b9f065);
}
html[lang="ar"] body.arabic-moderation-page .moderation-steps>nav button,
html[lang="ar"] body.arabic-moderation-page .moderation-actions>div button,
html[lang="ar"] body.arabic-moderation-page .moderation-context-experience>aside button{
text-align:right;
}
html[lang="ar"] body.arabic-moderation-page .moderation-real-screen>div>span,
html[lang="ar"] body.arabic-moderation-page .moderation-context-screen>header span{
margin-left:0;
margin-right:5px;
}
html[lang="ar"] body.arabic-moderation-page .moderation-real-screen>div>b{
margin-left:0;
margin-right:auto;
}
html[lang="ar"] body.arabic-moderation-page .moderation-restrict>div>button i{
margin-left:0;
margin-right:auto;
}
html[lang="ar"] body.arabic-moderation-page .moderation-context-experience>aside button{
border-left:0;
border-right:3px solid transparent;
}
html[lang="ar"] body.arabic-moderation-page .moderation-context-experience>aside button:hover,
html[lang="ar"] body.arabic-moderation-page .moderation-context-experience>aside button.active{
border-left-color:transparent;
border-right-color:#b9f065;
transform:translateX(-5px);
}
html[lang="ar"] body.arabic-moderation-page .moderation-context-panels footer i{
display:inline-block;
transform:scaleX(-1);
}
@media(max-width:760px){
html[lang="ar"] body.arabic-moderation-page .moderation-context-experience>aside button:hover,
html[lang="ar"] body.arabic-moderation-page .moderation-context-experience>aside button.active{transform:none}
}
/* Shawts capabilities: complete RTL geometry and a non-scrolling mobile control. */
html[lang="ar"] body.arabic-shawts-page .shawts-capability-flow>nav button{
text-align:right;
}
html[lang="ar"] body.arabic-shawts-page .capability-stage{
border-radius:24px 24px 24px 7px;
}
html[lang="ar"] body.arabic-shawts-page .capability-copy h3{
letter-spacing:0;
line-height:1.35;
}
html[lang="ar"] body.arabic-shawts-page .capability-copy p{
line-height:1.85;
}
html[lang="ar"] body.arabic-shawts-page .capability-preview{
border-radius:28px 28px 28px 8px;
direction:rtl;
text-align:right;
}
html[lang="ar"] body.arabic-shawts-page .cap-editor header,
html[lang="ar"] body.arabic-shawts-page .compose-toolbar{
direction:rtl;
justify-content:flex-start;
}
html[lang="ar"] body.arabic-shawts-page .arabic-format-icon{
position:relative;
width:25px;
height:25px;
padding:0;
display:inline-block;
flex:0 0 25px;
border-radius:7px;
background:#eff6f1;
color:#315748;
font-size:0;
text-decoration:none;
}
html[lang="ar"] body.arabic-shawts-page .arabic-format-icon:before,
html[lang="ar"] body.arabic-shawts-page .arabic-format-icon:after{
content:"";
position:absolute;
left:6px;
right:6px;
border-radius:2px;
background:currentColor;
}
html[lang="ar"] body.arabic-shawts-page .format-bold:before{top:7px;height:4px}
html[lang="ar"] body.arabic-shawts-page .format-bold:after{bottom:7px;height:4px}
html[lang="ar"] body.arabic-shawts-page .format-italic:before{
left:11px;
right:auto;
top:5px;
width:3px;
height:15px;
transform:skewX(18deg);
}
html[lang="ar"] body.arabic-shawts-page .format-italic:after{display:none}
html[lang="ar"] body.arabic-shawts-page .format-underline:before{
top:6px;
height:9px;
border:2px solid currentColor;
border-top:0;
background:transparent;
}
html[lang="ar"] body.arabic-shawts-page .format-underline:after{bottom:5px;height:2px}
html[lang="ar"] body.arabic-shawts-page .capability-preview:before{
right:auto;
left:-70px;
}
html[lang="ar"] body.arabic-shawts-page .capability-note{
direction:rtl;
text-align:center;
margin-top:14px;
padding:16px 22px;
border-top:1px solid rgba(255,255,255,.14);
background:rgba(255,255,255,.045);
}
html[lang="ar"] body.arabic-shawts-page .capability-note>span{margin:0;white-space:nowrap}
html[lang="ar"] body.arabic-shawts-page .capability-note>p{max-width:none;margin:0;color:#e2eee8;font-size:17px;line-height:1.6;text-align:center;text-wrap:nowrap;white-space:nowrap}
@media(max-width:680px){
html[lang="ar"] body.arabic-shawts-page .shawts-capability-flow{
padding:10px;
overflow:hidden;
}
html[lang="ar"] body.arabic-shawts-page .capability-endpoints{
height:auto;
min-height:42px;
padding:2px 4px 10px;
}
html[lang="ar"] body.arabic-shawts-page .shawts-capability-flow>nav{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:6px;
overflow:visible;
}
html[lang="ar"] body.arabic-shawts-page .shawts-capability-flow>nav:before{
display:none;
}
html[lang="ar"] body.arabic-shawts-page .shawts-capability-flow>nav button{
width:100%;
min-width:0;
height:70px;
padding:10px 12px;
}
html[lang="ar"] body.arabic-shawts-page .capability-stage{
min-height:610px;
margin-top:10px;
}
html[lang="ar"] body.arabic-shawts-page .capability-stage>article{
padding:22px 18px;
gap:20px;
align-content:start;
}
html[lang="ar"] body.arabic-shawts-page .capability-copy h3{
font-size:28px;
line-height:1.45;
}
html[lang="ar"] body.arabic-shawts-page .capability-copy p{
font-size:17px;
line-height:1.8;
}
html[lang="ar"] body.arabic-shawts-page .capability-preview{
min-height:270px;
padding:16px;
}
html[lang="ar"] body.arabic-shawts-page .capability-note{
padding:14px 12px;
}
html[lang="ar"] body.arabic-shawts-page .capability-note>p{font-size:17px;line-height:1.6}
}
/* Arabic QA baseline: one typographic system, logical alignment and safe BiDi. */
html[lang="ar"] body,
html[lang="ar"] button,
html[lang="ar"] input,
html[lang="ar"] textarea,
html[lang="ar"] select{
font-family:"IBM Plex Sans Arabic","Plus Jakarta Sans",sans-serif!important;
}
html[lang="ar"] body{font-weight:400;line-height:1.7}
html[lang="ar"] h1,
html[lang="ar"] h2,
html[lang="ar"] h3{font-weight:600!important;line-height:1.35!important;letter-spacing:0!important;text-wrap:balance}
html[lang="ar"] h4,
html[lang="ar"] h5,
html[lang="ar"] h6{font-weight:500!important;line-height:1.45!important;letter-spacing:0!important}
html[lang="ar"] p,
html[lang="ar"] li{font-weight:400;line-height:1.7}
html[lang="ar"] small,
html[lang="ar"] figcaption{line-height:1.55}
html[lang="ar"] input,
html[lang="ar"] textarea,
html[lang="ar"] select,
html[lang="ar"] th,
html[lang="ar"] td{text-align:right}
html[lang="ar"] table{direction:rtl}
html[lang="ar"] input[type="email"],
html[lang="ar"] input[type="tel"],
html[lang="ar"] input[type="url"],
html[lang="ar"] a[href^="mailto:"],
html[lang="ar"] a[href^="tel:"],
html[lang="ar"] code,
html[lang="ar"] .bidi-ltr{
direction:ltr!important;
unicode-bidi:isolate!important;
text-align:left!important;
font-family:"Plus Jakarta Sans",sans-serif!important;
}
html[lang="ar"] bdi{unicode-bidi:isolate}
@media(max-width:680px){
html[lang="ar"] main h1{font-size:clamp(32px,10.5vw,44px);line-height:1.28!important}
html[lang="ar"] main h2{font-size:clamp(27px,8vw,38px);line-height:1.32!important}
}
html[lang="ar"] h1,html[lang="ar"] h2,html[lang="ar"] h3,html[lang="ar"] h4,
html[lang="ar"] .eyebrow,html[lang="ar"] .button,html[lang="ar"] .nav-links,
html[lang="ar"] .nav-trigger,html[lang="ar"] .story-index{
font-family:"IBM Plex Sans Arabic",sans-serif;
}
html[lang="ar"] h1,html[lang="ar"] h2,html[lang="ar"] h3{
letter-spacing:0;
text-wrap:balance;
}
html[lang="ar"] h1{line-height:1.35}
html[lang="ar"] h2{line-height:1.4}
html[lang="ar"] h3{line-height:1.4}
html[lang="ar"] p,html[lang="ar"] li,html[lang="ar"] small{line-height:1.7}
html[lang="ar"] .product-story-copy,html[lang="ar"] .hub-copy,
html[lang="ar"] .section-heading,html[lang="ar"] .dash-section-head,
html[lang="ar"] .problem-copy,html[lang="ar"] .insight-copy,
html[lang="ar"] .story-closing .section-shell,html[lang="ar"] .closing .section-shell,
html[lang="ar"] .ip-closing .ip-shell,html[lang="ar"] .sec2-closing .sec2-shell{
text-align:right;
}
html[lang="ar"] .button span{transform:scaleX(-1)}
html[lang="ar"] .brand img{object-position:right center}
html[lang="ar"] .nav-shell{direction:rtl}
html[lang="ar"] .nav-links,html[lang="ar"] .nav-actions{direction:rtl}
html[lang="ar"] .mega{direction:rtl;text-align:right}
html[lang="ar"] .discover-menu{right:auto;left:-38px}
html[lang="ar"] .discover-links>a{grid-template-columns:44px minmax(0,1fr) auto;text-align:right}
html[lang="ar"] .discover-links>a:hover{transform:translateX(-3px)}
html[lang="ar"] .discover-links>a>span:last-child{transform:scaleX(-1)}
html[lang="ar"] input,html[lang="ar"] textarea,html[lang="ar"] select{text-align:right}
html[lang="ar"] [dir="ltr"],html[lang="ar"] .language-switch{font-family:"Plus Jakarta Sans",sans-serif}
html[lang="ar"] .product-story-screen img,html[lang="ar"] .module-screen img,
html[lang="ar"] .hub-dashboard-screen img{object-fit:contain}
@media(max-width:720px){
html[lang="ar"] body,html[lang="ar"] #app{width:100%;max-width:100%;overflow-x:hidden}
html[lang="ar"] .nav-shell{width:calc(100vw - 32px)!important;max-width:calc(100vw - 32px);margin-inline:auto!important}
html[lang="ar"] h1{line-height:1.25}
html[lang="ar"] h2{line-height:1.32}
html[lang="ar"] .product-story-hero{width:100%;max-width:100%;overflow:hidden}
html[lang="ar"] .product-story-hero>.section-shell{
width:100%!important;max-width:100%!important;min-width:0!important;
margin:0!important;padding-inline:14px!important;display:flex!important;
flex-direction:column!important;align-items:stretch!important;gap:34px!important;
}
html[lang="ar"] .product-story-copy{
order:1!important;width:100%!important;max-width:100%!important;min-width:0!important;
margin:0!important;padding:0!important;transform:none!important;text-align:right!important;
}
html[lang="ar"] .product-story-copy h1{
width:100%!important;max-width:100%!important;margin-inline:0!important;
font-size:35px!important;line-height:1.24!important;letter-spacing:-.025em!important;
white-space:normal!important;overflow-wrap:normal!important;word-break:normal!important;
}
html[lang="ar"] .product-story-copy>p{width:100%!important;max-width:100%!important;font-size:17px!important}
html[lang="ar"] .product-story-copy .hero-actions{width:100%;display:grid;grid-template-columns:1fr}
html[lang="ar"] .product-story-copy .button{width:100%}
html[lang="ar"] .product-story-hero-visual{order:2!important;width:100%!important;max-width:100%!important;min-width:0!important;margin:10px 0 0!important;overflow:visible}
html[lang="ar"] .story-index{left:auto!important;right:0!important;top:-50px!important;font-size:86px!important}
html[lang="ar"] .phone-float.f1{right:0!important;left:auto!important}
html[lang="ar"] .phone-float.f2{left:0!important;right:auto!important}
}
/* Security readability — section labels and centered technical review */
html[lang="ar"] .security-v2 .sec2-kicker{
font-size:16px;
font-weight:700;
line-height:1.55;
letter-spacing:0;
}
html[lang="ar"] .security-v2 .sec2-closing .sec2-shell{
text-align:center!important;
}
html[lang="ar"] .security-v2 .sec2-closing h2,
html[lang="ar"] .security-v2 .sec2-closing p{
margin-inline:auto;
text-align:center;
}
html[lang="ar"] .security-v2 .sec2-closing .hero-actions{
justify-content:center!important;
}
@media(max-width:640px){
html[lang="ar"] .security-v2 .sec2-kicker{font-size:14px}
}
@media(max-width:980px){
html[lang="ar"] .nav-shell{direction:rtl;display:grid;grid-template-columns:auto 1fr auto}
html[lang="ar"] .nav-shell>.brand{position:static;grid-column:1;grid-row:1;justify-self:start;margin:0}
html[lang="ar"] .nav-shell>.menu-button{position:static;grid-column:3;grid-row:1;justify-self:end;margin:0}
html[lang="ar"] .nav-links{direction:rtl;text-align:right;inset:68px 0 0}
html[lang="ar"] .nav-links>a,html[lang="ar"] .nav-trigger,html[lang="ar"] .mega-links a{text-align:right}
html[lang="ar"] .discover-menu{right:auto;left:auto}
}
/* Shawts Arabic: match the English page rhythm with native RTL typography. */
html[lang="ar"] body.arabic-shawts-page .product-story-page{direction:rtl}
html[lang="ar"] body.arabic-shawts-page .product-story-hero>.section-shell{
direction:rtl;grid-template-columns:minmax(0,1fr) minmax(0,460px);gap:82px
}
html[lang="ar"] body.arabic-shawts-page .product-story-copy{
width:100%;max-width:460px;justify-self:start;text-align:right
}
html[lang="ar"] body.arabic-shawts-page .product-story-copy h1{
max-width:460px;font-family:"IBM Plex Sans Arabic",sans-serif;
font-size:clamp(47px,3.75vw,58px);font-weight:600;line-height:1.35;
letter-spacing:0;text-align:right;text-wrap:balance
}
html[lang="ar"] body.arabic-shawts-page .product-story-copy h1>span{display:block;white-space:normal}
html[lang="ar"] body.arabic-shawts-page .product-story-copy>p{max-width:445px;font-size:18px;line-height:1.8}
html[lang="ar"] body.arabic-shawts-page .story-block-head,
html[lang="ar"] body.arabic-shawts-page .story-card-grid article,
html[lang="ar"] body.arabic-shawts-page .broadcast-proof,
html[lang="ar"] body.arabic-shawts-page .broadcast-flow,
html[lang="ar"] body.arabic-shawts-page .broadcast-context-board,
html[lang="ar"] body.arabic-shawts-page .shawts-capability-flow,
html[lang="ar"] body.arabic-shawts-page .shawts-context-experience{direction:rtl;text-align:right}
html[lang="ar"] body.arabic-shawts-page .broadcast-proof>nav button,
html[lang="ar"] body.arabic-shawts-page .broadcast-flow>nav button,
html[lang="ar"] body.arabic-shawts-page .shawts-capability-flow button,
html[lang="ar"] body.arabic-shawts-page .shawts-context-experience button{text-align:right}
html[lang="ar"] body.arabic-shawts-page .broadcast-proof>nav button>strong{right:auto;left:17px}
html[lang="ar"] body.arabic-shawts-page .proof-comment.reply{margin-left:0;margin-right:42px}
html[lang="ar"] body.arabic-shawts-page .story-block-head h2{line-height:1.22;letter-spacing:-.035em}
html[lang="ar"] body.arabic-shawts-page .story-card-grid h3,
html[lang="ar"] body.arabic-shawts-page .broadcast-flow-stage h3,
html[lang="ar"] body.arabic-shawts-page .broadcast-context-copy h3{line-height:1.3;letter-spacing:-.025em}
@media(max-width:720px){
html[lang="ar"] body.arabic-shawts-page .product-story-hero>.section-shell{display:flex!important;gap:34px}
html[lang="ar"] body.arabic-shawts-page .product-story-copy{max-width:none}
html[lang="ar"] body.arabic-shawts-page .product-story-copy h1{max-width:none;font-size:35px!important;line-height:1.24!important}
html[lang="ar"] body.arabic-shawts-page .product-story-copy h1>span{white-space:normal}
}
/* Arabic dashboard pages need their own type rhythm. The English story layouts use
very tight display leading and aggressive emergency wrapping that do not suit
Arabic letterforms. Keep these rules last so every dashboard design shares the
same readable scale instead of inheriting page-specific English overrides. */
html[lang="ar"] body.arabic-mirrored-page.product-story-page{
--ps-shell:min(1160px,calc(100vw - 56px));
}
html[lang="ar"] body.arabic-mirrored-page.product-story-page h1,
html[lang="ar"] body.arabic-mirrored-page.product-story-page h2,
html[lang="ar"] body.arabic-mirrored-page.product-story-page h3{
letter-spacing:0!important;
white-space:normal!important;
overflow-wrap:break-word!important;
word-break:normal!important;
text-wrap:pretty!important;
}
html[lang="ar"] body.arabic-mirrored-page.product-story-page .product-story-hero{
padding-block:78px 82px;
}
html[lang="ar"] body.arabic-mirrored-page.product-story-page .product-story-hero>.section-shell{
min-height:520px;
grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)!important;
gap:56px!important;
align-items:center;
}
html[lang="ar"] body.arabic-mirrored-page.product-story-page .product-story-copy{
width:100%;
max-width:540px!important;
min-width:0;
justify-self:start;
}
html[lang="ar"] body.arabic-mirrored-page.product-story-page .product-story-copy h1{
max-width:530px!important;
font-size:clamp(40px,3.5vw,52px)!important;
font-weight:700;
line-height:1.3!important;
}
html[lang="ar"] body.arabic-mirrored-page.product-story-page .product-story-copy h1>span{
display:inline!important;
white-space:normal!important;
}
html[lang="ar"] body.arabic-mirrored-page.product-story-page .product-story-copy>p{
max-width:520px!important;
margin-top:22px;
font-size:17px!important;
line-height:1.9!important;
overflow-wrap:break-word!important;
word-break:normal!important;
}
html[lang="ar"] body.arabic-mirrored-page.product-story-page .story-index{
inset-inline-start:0!important;
inset-inline-end:auto!important;
top:-68px!important;
font-size:112px!important;
}
html[lang="ar"] body.arabic-mirrored-page.product-story-page .product-story-block{
padding-block:88px!important;
}
/* .story-head-vector is absolutely positioned into a gutter that .story-block-head
reserves with padding-right:135px. Zeroing the padding here removed that gutter
while the badge stayed pinned to the physical right — which in RTL is where the
heading now starts, so it landed on top of the first word. Reserve the gutter on
the inline-end side and flip the badge to match: physical right in LTR, physical
left in RTL. */
html[lang="ar"] body.arabic-mirrored-page.product-story-page .story-block-head{
display:block!important;
width:100%!important;
max-width:820px!important;
margin:0 0 34px!important;
padding:0!important;
padding-inline-end:135px!important;
}
/* Statement sections deliberately carry their message inside the cinematic
component. Keep the duplicate section header hidden, as it is in English. */
html[lang="ar"] body.arabic-mirrored-page.product-story-page .story-statement>.section-shell>.story-block-head{
display:none!important;
}
html[lang="ar"] body.arabic-mirrored-page .app-hub .hub-selector header{
max-width:850px;
}
html[lang="ar"] body.arabic-mirrored-page .app-hub .hub-selector h2{
max-width:850px!important;
font-size:clamp(42px,4vw,56px)!important;
line-height:1.25!important;
text-wrap:balance!important;
}
html[lang="ar"] body.arabic-mirrored-page.product-story-page .story-head-vector{
inset-inline-end:0!important;
inset-inline-start:auto!important;
transform:rotate(-7deg);
}
@media(max-width:680px){
html[lang="ar"] body.arabic-mirrored-page .product-story-app .product-story-nav::after{
content:"اسحب لاستكشاف المزيد ←";
right:auto;
left:14px;
background:linear-gradient(270deg,rgba(251,252,245,0),#fbfcf5 28%);
}
html[lang="ar"] body.arabic-mirrored-page .product-story-app .product-story-nav>.section-shell{
scroll-padding-inline:18px 96px;
}
html[lang="ar"] body.arabic-mirrored-page .app-hub .hub-copy h1{
max-width:100%!important;
font-size:34px!important;
line-height:1.3!important;
text-wrap:balance!important;
}
html[lang="ar"] body.arabic-mirrored-page .app-hub .hub-selector h2{
max-width:100%!important;
font-size:29px!important;
line-height:1.4!important;
}
html[lang="ar"] body.arabic-mirrored-page .app-hub .hub-connection h2{
font-size:30px!important;
line-height:1.35!important;
}
}
html[lang="ar"] body.arabic-mirrored-page.product-story-page .story-head-vector svg{
transform:rotate(-7deg);
}
/* Below the desktop breakpoint the badge stacks above the heading, so the gutter
must go away with it. */
@media(max-width:680px){
html[lang="ar"] body.arabic-mirrored-page.product-story-page .story-block-head{
padding-inline-end:0!important;
}
html[lang="ar"] body.arabic-mirrored-page.product-story-page .story-head-vector{
position:relative!important;
inset-inline-end:auto!important;
inset-inline-start:auto!important;
margin:0 0 18px!important;
}
}
/* Arabic dashboard typography floor.
The English product compositions use 7–11px utility copy in many places.
Arabic letterforms need more height and a larger optical size, so keep every
dashboard label readable and let its container grow instead of clipping it. */
html[lang="ar"] body.arabic-mirrored-page .product-story-dashboard,
html[lang="ar"] body.arabic-mirrored-page .dashboard-hub{
font-size:16px;
}
html[lang="ar"] body.arabic-mirrored-page .product-story-dashboard small,
html[lang="ar"] body.arabic-mirrored-page .dashboard-hub small{
font-size:14px!important;
line-height:1.65!important;
letter-spacing:0!important;
}
html[lang="ar"] body.arabic-mirrored-page .product-story-dashboard .eyebrow,
html[lang="ar"] body.arabic-mirrored-page .dashboard-hub .eyebrow{
font-size:14px !important;
line-height:1.55!important;
letter-spacing:.02em!important;
}
html[lang="ar"] body.arabic-mirrored-page .product-story-dashboard .product-story-screen>div,
html[lang="ar"] body.arabic-mirrored-page .dashboard-hub .hub-dashboard-screen>div{
min-height:42px;
height:auto;
padding-block:8px;
font-size:14px !important;
line-height:1.45;
}
html[lang="ar"] body.arabic-mirrored-page .product-story-dashboard .product-story-nav a{
min-height:70px;
padding-block:10px;
font-size:14px !important;
line-height:1.5;
}
html[lang="ar"] body.arabic-mirrored-page .product-story-dashboard .product-story-nav a span{
font-size:14px !important;
}
html[lang="ar"] body.arabic-mirrored-page .product-story-dashboard .screen-signal{
padding:11px 14px;
font-size:14px !important;
line-height:1.45;
}
html[lang="ar"] body.arabic-mirrored-page .product-story-dashboard .story-hero-proof>span{
min-height:66px;
padding:11px 12px;
}
html[lang="ar"] body.arabic-mirrored-page .product-story-dashboard .story-hero-proof i{
width:28px;
height:28px;
font-size:14px !important;
}
html[lang="ar"] body.arabic-mirrored-page .product-story-dashboard .story-hero-proof b{
font-size:14px !important;
line-height:1.5;
}
html[lang="ar"] body.arabic-mirrored-page .product-story-dashboard :is(button>span,button>em),
html[lang="ar"] body.arabic-mirrored-page .dashboard-hub button>span{
font-size:14px !important;
line-height:1.5!important;
letter-spacing:0!important;
}
html[lang="ar"] body.arabic-mirrored-page .product-story-dashboard :is(
.story-card-grid article>span,
.story-matrix-head,
.story-matrix button i,
.story-stepper nav button span,
.named-metrics nav span,
.named-report header,
.moderation-step-panels header>span,
.moderation-workspace-detail>article>span,
.moderation-context-panels article>span,
.calendar-date span,
.calendar-demo>span,
.story-stories .story-card-grid article:after,
.story-path b,
.perimeter>span,
.brand-configurator label,
.story-dual>article>span,
.story-sides article>span,
.folder-files>div>span,
.document-state article>span,
.incident-line span,
.report-builder label,
.report-builder aside span,
.story-contexts b,
.story-related>span
){
font-size:14px !important;
line-height:1.55!important;
letter-spacing:0!important;
}
html[lang="ar"] body.arabic-mirrored-page .product-story-dashboard .story-related a{
padding:10px 13px;
font-size:14px !important;
line-height:1.45;
}
html[lang="ar"] body.arabic-mirrored-page .product-story-dashboard :is(
.named-report [data-named-list]>div,
.story-objection-list p,
.story-faq .faq-item>div p,
.story-card-grid p
){
font-size:17px !important;
line-height:1.85!important;
}
html[lang="ar"] body.arabic-mirrored-page .dashboard-hub .hub-stage>aside small,
html[lang="ar"] body.arabic-mirrored-page .dashboard-hub .hub-route-grid>button>span{
font-size:14px !important;
}
html[lang="ar"] body.arabic-mirrored-page .dashboard-hub .hub-stage>aside p,
html[lang="ar"] body.arabic-mirrored-page .dashboard-hub .hub-route-grid p{
font-size:17px !important;
line-height:1.75!important;
}
html[lang="ar"] body.arabic-mirrored-page .dashboard-hub .hub-stage>aside a{
font-size:14px!important;
line-height:1.5;
}
/* Events 05 / journey workspace bar: it is separate from the hero browser bar
and previously retained the 7–8px English microcopy and physical LTR margins. */
html[lang="ar"] body.arabic-mirrored-page .story-design-event .event-real-screen>div{
height:48px;
padding-inline:16px;
direction:rtl;
font-size:14px!important;
line-height:1.5;
letter-spacing:0;
}
html[lang="ar"] body.arabic-mirrored-page .story-design-event .event-real-screen>div>i{
width:8px;
height:8px;
flex:0 0 8px;
}
html[lang="ar"] body.arabic-mirrored-page .story-design-event .event-real-screen>div>span{
margin-left:0;
margin-right:7px;
font-size:14px!important;
font-weight:600;
white-space:nowrap;
}
html[lang="ar"] body.arabic-mirrored-page .story-design-event .event-real-screen>div>b{
margin-left:0;
margin-right:auto;
padding:7px 11px;
font-size:14px !important;
line-height:1.4;
letter-spacing:0;
white-space:nowrap;
}
@media(max-width:680px){
html[lang="ar"] body.arabic-mirrored-page .product-story-dashboard small,
html[lang="ar"] body.arabic-mirrored-page .dashboard-hub small{font-size:14px!important}
html[lang="ar"] body.arabic-mirrored-page .product-story-dashboard .product-story-nav a{
min-width:132px;
min-height:74px;
font-size:14px!important;
}
html[lang="ar"] body.arabic-mirrored-page .product-story-dashboard :is(button>span,button>em),
html[lang="ar"] body.arabic-mirrored-page .dashboard-hub button>span{font-size:14px !important}
html[lang="ar"] body.arabic-mirrored-page .product-story-dashboard .story-hero-proof{
grid-template-columns:1fr;
}
html[lang="ar"] body.arabic-mirrored-page .product-story-dashboard .story-hero-proof>span{
min-height:58px;
}
html[lang="ar"] body.arabic-mirrored-page .story-design-event .event-real-screen>div{
height:46px;
padding-inline:11px;
font-size:14px !important;
}
html[lang="ar"] body.arabic-mirrored-page .story-design-event .event-real-screen>div>span{
max-width:48%;
overflow:hidden;
text-overflow:ellipsis;
font-size:14px !important;
}
html[lang="ar"] body.arabic-mirrored-page .story-design-event .event-real-screen>div>b{
padding:6px 8px;
font-size:14px !important;
}
}
html[lang="ar"] body.arabic-mirrored-page.product-story-page .story-block-head>.eyebrow{
display:inline-flex;
margin-bottom:14px!important;
}
html[lang="ar"] body.arabic-mirrored-page.product-story-page .story-block-head h2,
html[lang="ar"] body.arabic-mirrored-page.product-story-page .story-objections header h2,
html[lang="ar"] body.arabic-mirrored-page.product-story-page .story-faq header h2{
width:100%!important;
max-width:780px!important;
margin:0!important;
padding:0!important;
font-size:clamp(34px,3.25vw,46px)!important;
line-height:1.38!important;
}
html[lang="ar"] body.arabic-mirrored-page.product-story-page .story-block-intro{
max-width:720px!important;
margin-top:16px!important;
font-size:16px!important;
line-height:1.9!important;
overflow-wrap:break-word!important;
word-break:normal!important;
}
html[lang="ar"] body.arabic-mirrored-page.product-story-page .story-card-grid h3,
html[lang="ar"] body.arabic-mirrored-page.product-story-page .story-step-panels h3,
html[lang="ar"] body.arabic-mirrored-page.product-story-page .story-insight h3{
line-height:1.55!important;
}
html[lang="ar"] body.arabic-mirrored-page.product-story-page .story-card-grid p,
html[lang="ar"] body.arabic-mirrored-page.product-story-page .story-step-panels p,
html[lang="ar"] body.arabic-mirrored-page.product-story-page .story-matrix p{
line-height:1.85!important;
overflow-wrap:break-word!important;
word-break:normal!important;
}
html[lang="ar"] body.arabic-mirrored-page.product-story-page .story-stories .story-card-grid article:after{
content:"نهاية مغلقة";
}
@media(max-width:980px){
html[lang="ar"] body.arabic-mirrored-page.product-story-page{
--ps-shell:min(900px,calc(100vw - 40px));
}
html[lang="ar"] body.arabic-mirrored-page.product-story-page .product-story-hero>.section-shell{
min-height:0;
grid-template-columns:minmax(0,1fr)!important;
gap:44px!important;
}
html[lang="ar"] body.arabic-mirrored-page.product-story-page .product-story-copy{
max-width:700px!important;
}
html[lang="ar"] body.arabic-mirrored-page.product-story-page .product-story-copy h1,
html[lang="ar"] body.arabic-mirrored-page.product-story-page .product-story-copy>p{
max-width:680px!important;
}
}
@media(max-width:680px){
html[lang="ar"] body.arabic-mirrored-page.product-story-page{
--ps-shell:calc(100vw - 32px);
}
html[lang="ar"] body.arabic-mirrored-page.product-story-page .product-story-hero{
padding-block:56px 62px!important;
}
html[lang="ar"] body.arabic-mirrored-page.product-story-page .product-story-hero>.section-shell{
width:var(--ps-shell)!important;
max-width:var(--ps-shell)!important;
margin-inline:auto!important;
padding-inline:0!important;
gap:34px!important;
}
html[lang="ar"] body.arabic-mirrored-page.product-story-page .product-story-copy{
width:100%!important;
max-width:100%!important;
}
html[lang="ar"] body.arabic-mirrored-page.product-story-page .product-story-copy h1{
width:100%!important;
max-width:100%!important;
font-size:32px!important;
line-height:1.42!important;
}
html[lang="ar"] body.arabic-mirrored-page.product-story-page .product-story-copy>p{
width:100%!important;
max-width:100%!important;
font-size:17px !important;
line-height:1.9!important;
}
html[lang="ar"] body.arabic-mirrored-page.product-story-page .story-index{
top:-42px!important;
font-size:70px!important;
}
html[lang="ar"] body.arabic-mirrored-page.product-story-page .product-story-block{
padding-block:62px!important;
}
html[lang="ar"] body.arabic-mirrored-page.product-story-page .story-block-head{
max-width:100%!important;
margin-bottom:26px!important;
}
html[lang="ar"] body.arabic-mirrored-page.product-story-page .story-block-head h2,
html[lang="ar"] body.arabic-mirrored-page.product-story-page .story-objections header h2,
html[lang="ar"] body.arabic-mirrored-page.product-story-page .story-faq header h2{
max-width:100%!important;
font-size:29px!important;
line-height:1.48!important;
}
html[lang="ar"] body.arabic-mirrored-page.product-story-page .story-card-grid h3,
html[lang="ar"] body.arabic-mirrored-page.product-story-page .story-step-panels h3{
font-size:22px!important;
line-height:1.55!important;
}
}
/* ── Mobile-app stories in Arabic ───────────────────────────────────────────
The app mockups are typeset for English: display text runs at a line-height
of ~1.0 and several panels are pinned to a fixed pixel height. Arabic sets
taller and longer, so those boxes clip. Relax the leading, let the fixed
heights become minimums, and give the flex rows room to wrap. */
html[lang="ar"] body.arabic-mirrored-page .product-story-app strong,
html[lang="ar"] body.arabic-mirrored-page .product-story-app blockquote{
line-height:1.42!important;
height:auto!important;
overflow:visible!important;
text-wrap:pretty;
}
html[lang="ar"] body.arabic-mirrored-page .product-story-app b,
html[lang="ar"] body.arabic-mirrored-page .product-story-app em,
html[lang="ar"] body.arabic-mirrored-page .product-story-app small,
html[lang="ar"] body.arabic-mirrored-page .product-story-app span{
line-height:1.6;
}
html[lang="ar"] body.arabic-mirrored-page .product-story-app h3{
line-height:1.5!important;
}
/* Panel footers carry three short labels that are noticeably longer in Arabic. */
html[lang="ar"] body.arabic-mirrored-page .product-story-app article>footer{
height:auto!important;
grid-auto-flow:row;
align-content:center;
row-gap:6px;
overflow:visible!important;
}
@media(min-width:681px){
html[lang="ar"] body.arabic-mirrored-page .product-story-app article>footer{
min-height:86px;
}
}
/* Vertical "offboarding" rail: Arabic needs a wider band than the English caps. */
html[lang="ar"] body.arabic-mirrored-page .chats-v39-boundary strong{
line-height:1.5!important;
white-space:normal!important;
}
html[lang="ar"] body.arabic-mirrored-page .chats-v39-owned aside strong,
html[lang="ar"] body.arabic-mirrored-page .chats-v41-context-map aside strong,
html[lang="ar"] body.arabic-mirrored-page .chats-v39-console>header strong{
font-size:clamp(24px,2vw,30px)!important;
line-height:1.45!important;
}
/* Numbers and index chips read as Latin runs inside an RTL line. */
html[lang="ar"] body.arabic-mirrored-page .product-story-app .story-index,
html[lang="ar"] body.arabic-mirrored-page .product-story-nav span{
line-height:1.25!important;
}
/* Accordion rows: the chevron had no reserved track, so it pushed 17px out. */
html[lang="ar"] body.arabic-mirrored-page .story-objection-list button,
html[lang="ar"] body.arabic-mirrored-page .story-faq button{
gap:18px;
}
html[lang="ar"] body.arabic-mirrored-page .story-objection-list button>span,
html[lang="ar"] body.arabic-mirrored-page .story-faq button>span{
flex:1 1 auto;
min-width:0;
}
html[lang="ar"] body.arabic-mirrored-page .story-objection-list button>i,
html[lang="ar"] body.arabic-mirrored-page .story-faq button>i{
flex:0 0 auto;
}
/* Sticky module rail: give it air under the header and space the index off
the label, which otherwise collide once the label is Arabic. */
html[lang="ar"] body.arabic-mirrored-page .product-story-nav a{
gap:10px;
}
html[lang="ar"] body.arabic-mirrored-page .product-story-nav .section-shell{
padding-block:4px;
}
/* Header: the dropdown caret sat tight against the Arabic label. */
html[lang="ar"] .nav-trigger{gap:9px}
html[lang="ar"] .nav-trigger>span{transform:none;font-size:max(14px, .8em);opacity:.75}
html[lang="ar"] .nav-actions{gap:16px}
/* Shawts is a composed product story, so mirror its geometry as well as its text. */
html[lang="ar"] body.arabic-shawts-page .product-story-page,
html[lang="ar"] body.arabic-shawts-page .product-story,
html[lang="ar"] body.arabic-shawts-page .product-story-block,
html[lang="ar"] body.arabic-shawts-page .product-story-nav,
html[lang="ar"] body.arabic-shawts-page .broadcast-proof,
html[lang="ar"] body.arabic-shawts-page .broadcast-flow,
html[lang="ar"] body.arabic-shawts-page .broadcast-context-board,
html[lang="ar"] body.arabic-shawts-page .shawts-capability-flow,
html[lang="ar"] body.arabic-shawts-page .shawts-context-experience{
direction:rtl;
}
html[lang="ar"] body.arabic-shawts-page .product-story-hero{
background:radial-gradient(circle at 18% 20%,rgba(185,240,101,.38),transparent 25%),linear-gradient(135deg,#fbfcf5,#e8f8ed);
}
html[lang="ar"] body.arabic-shawts-page .product-story-hero:before{
mask-image:linear-gradient(270deg,transparent 20%,#000);
}
html[lang="ar"] body.arabic-shawts-page .product-story-screen{
border-radius:25px 25px 25px 8px;
transform:rotate(-1deg);
}
html[lang="ar"] body.arabic-shawts-page .product-story-screen:before{
inset:-28px -25px 30px 22px;
border-radius:18px 42px 18px 42px;
background:linear-gradient(215deg,#b9f065,#53ce8f);
}
html[lang="ar"] body.arabic-shawts-page .product-story-screen>div span{
margin-left:0;
margin-right:7px;
}
html[lang="ar"] body.arabic-shawts-page .screen-signal.s1{
right:auto;
left:-22px;
}
html[lang="ar"] body.arabic-shawts-page .screen-signal.s2{
left:auto;
right:-28px;
}
html[lang="ar"] body.arabic-shawts-page .story-block-head{
position:relative;
max-width:930px!important;
padding-left:132px!important;
padding-right:0!important;
}
html[lang="ar"] body.arabic-shawts-page .story-head-vector{
right:auto!important;
left:0!important;
transform:rotate(-7deg);
}
html[lang="ar"] body.arabic-shawts-page .story-head-vector svg{
transform:rotate(-10deg);
}
/* Arabic Shawts capabilities: preserve the English section's position and scale,
then mirror its internal reading order without allowing generic dashboard rules
to collapse or displace it. */
html[lang="ar"] body.arabic-shawts-page .shawts-capabilities-clone{
display:block!important;
position:relative;
width:100%;
direction:rtl;
visibility:visible!important;
opacity:1!important;
overflow:visible;
}
html[lang="ar"] body.arabic-shawts-page .shawts-capabilities-clone>.story-capabilities{
display:block!important;
position:relative;
width:100%;
scroll-margin-top:110px;
direction:rtl;
visibility:visible!important;
opacity:1!important;
transform:none!important;
}
html[lang="ar"] body.arabic-shawts-page .shawts-capabilities-clone .story-block-head{
margin-inline:0 auto!important;
padding-right:0!important;
padding-left:132px!important;
direction:rtl;
text-align:right!important;
}
html[lang="ar"] body.arabic-shawts-page .shawts-capabilities-clone .story-block-head .eyebrow,
html[lang="ar"] body.arabic-shawts-page .shawts-capabilities-clone .story-block-head h2{
text-align:right!important;
}
html[lang="ar"] body.arabic-shawts-page .shawts-capabilities-clone .story-head-vector{
right:auto!important;
left:0!important;
}
html[lang="ar"] body.arabic-shawts-page .shawts-capabilities-clone .capability-endpoints,
html[lang="ar"] body.arabic-shawts-page .shawts-capabilities-clone .shawts-capability-flow>nav,
html[lang="ar"] body.arabic-shawts-page .shawts-capabilities-clone .capability-stage>article{
direction:rtl;
}
html[lang="ar"] body.arabic-shawts-page .shawts-capabilities-clone .capability-stage>article{
grid-template-columns:minmax(0,1.08fr) minmax(300px,.72fr);
}
html[lang="ar"] body.arabic-shawts-page .shawts-capabilities-clone .capability-copy{
grid-column:1;
text-align:right!important;
}
html[lang="ar"] body.arabic-shawts-page .shawts-capabilities-clone .capability-preview{
grid-column:2;
}
@media(max-width:680px){
html[lang="ar"] body.arabic-shawts-page .shawts-capabilities-clone .story-block-head{
padding-left:0!important;
}
html[lang="ar"] body.arabic-shawts-page .shawts-capabilities-clone .capability-stage>article{
grid-template-columns:1fr;
}
html[lang="ar"] body.arabic-shawts-page .shawts-capabilities-clone .capability-copy,
html[lang="ar"] body.arabic-shawts-page .shawts-capabilities-clone .capability-preview{
grid-column:1;
}
}
html[lang="ar"] body.arabic-shawts-page .story-card-grid article{
border-radius:23px 23px 7px 23px;
}
html[lang="ar"] body.arabic-shawts-page .story-card-grid article:nth-child(even){
border-radius:23px 23px 23px 7px;
}
html[lang="ar"] body.arabic-shawts-page .product-story-block blockquote{
border-left:0;
border-right:4px solid var(--accent);
}
html[lang="ar"] body.arabic-shawts-page .broadcast-proof>nav button:hover,
html[lang="ar"] body.arabic-shawts-page .broadcast-proof>nav button.active{
transform:translateX(-7px);
}
html[lang="ar"] body.arabic-shawts-page .story-metrics .story-block-head{
margin-bottom:40px!important;
}
html[lang="ar"] body.arabic-shawts-page .story-metrics .story-block-head h2{
max-width:680px!important;
}
html[lang="ar"] body.arabic-shawts-page .broadcast-proof{
grid-template-columns:310px minmax(0,1fr);
align-items:stretch;
}
html[lang="ar"] body.arabic-shawts-page .broadcast-proof>nav button{
grid-template-columns:52px minmax(0,1fr);
text-align:right;
}
html[lang="ar"] body.arabic-shawts-page .broadcast-proof>nav button>strong{
right:auto!important;
left:17px!important;
}
html[lang="ar"] body.arabic-shawts-page .proof-product{
border-radius:27px 27px 27px 8px;
}
html[lang="ar"] body.arabic-shawts-page .proof-product-context>span{
left:auto;
right:18px;
}
html[lang="ar"] body.arabic-shawts-page .proof-progress i{
margin-right:0;
margin-left:auto;
background:linear-gradient(270deg,#08a657,#b9f065);
}
html[lang="ar"] body.arabic-shawts-page .story-metrics .story-insight{
direction:rtl;
text-align:center;
}
html[lang="ar"] body.arabic-shawts-page .story-metrics .story-insight h3,
html[lang="ar"] body.arabic-shawts-page .story-metrics .story-insight p,
html[lang="ar"] body.arabic-shawts-page .story-metrics .story-insight em{text-align:center}
html[lang="ar"] body.arabic-shawts-page .broadcast-flow>nav:before{
background:linear-gradient(270deg,#08a657,#b9f065);
}
html[lang="ar"] body.arabic-shawts-page .broadcast-flow-stage{
border-radius:29px 29px 29px 9px;
}
html[lang="ar"] body.arabic-shawts-page .broadcast-flow-stage:before{
right:auto;
left:-60px;
}
html[lang="ar"] body.arabic-shawts-page .broadcast-flow-stage>article{
transform:translateX(-30px);
}
html[lang="ar"] body.arabic-shawts-page .broadcast-flow-stage>article.active{
transform:none;
}
html[lang="ar"] body.arabic-shawts-page .shawts-capability-flow,
html[lang="ar"] body.arabic-shawts-page .shawts-context-screen{
border-radius:34px 34px 34px 10px;
}
html[lang="ar"] body.arabic-shawts-page .broadcast-context-board>article{
border-radius:28px 28px 8px 28px;
}
html[lang="ar"] body.arabic-shawts-page .broadcast-context-board>article:hover>header>i{
transform:rotate(10deg) scale(1.08);
}
html[lang="ar"] body.arabic-shawts-page .shawts-context-panels article>div{
grid-column:2;
}
html[lang="ar"] body.arabic-shawts-page .shawts-context-panels article>small,
html[lang="ar"] body.arabic-shawts-page .shawts-context-panels article>h3,
html[lang="ar"] body.arabic-shawts-page .shawts-context-panels article>p{
grid-column:1;
}
@media(max-width:980px){
html[lang="ar"] body.arabic-shawts-page .screen-signal.s1{left:-5px}
html[lang="ar"] body.arabic-shawts-page .screen-signal.s2{right:-4px}
html[lang="ar"] body.arabic-shawts-page .broadcast-proof>nav button:hover,
html[lang="ar"] body.arabic-shawts-page .broadcast-proof>nav button.active{transform:translateY(-5px)}
}
@media(max-width:680px){
html[lang="ar"] body.arabic-shawts-page .product-story-hero>.section-shell{
overflow:visible;
}
html[lang="ar"] body.arabic-shawts-page .product-story-copy h1{
font-size:32px!important;
line-height:1.42!important;
}
html[lang="ar"] body.arabic-shawts-page .story-block-head{
padding-left:0!important;
}
html[lang="ar"] body.arabic-shawts-page .story-head-vector{
position:relative!important;
left:auto!important;
right:auto!important;
width:68px!important;
height:68px!important;
margin:0 0 18px!important;
}
html[lang="ar"] body.arabic-shawts-page .product-story-screen{
width:100%;
max-width:100%;
transform:none;
}
html[lang="ar"] body.arabic-shawts-page .product-story-screen:before{
inset:-14px -8px 18px 10px;
}
html[lang="ar"] body.arabic-shawts-page .screen-signal.s1{left:0}
html[lang="ar"] body.arabic-shawts-page .screen-signal.s2{right:0}
html[lang="ar"] body.arabic-shawts-page .story-metrics .story-block-head{
margin-bottom:28px!important;
}
html[lang="ar"] body.arabic-shawts-page .broadcast-proof{
display:flex;
flex-direction:column;
gap:16px;
}
html[lang="ar"] body.arabic-shawts-page .broadcast-proof>nav{
display:grid;
grid-template-columns:1fr;
gap:10px;
overflow:visible;
}
html[lang="ar"] body.arabic-shawts-page .broadcast-proof>nav button{
width:100%;
min-height:126px;
padding:18px;
grid-template-columns:46px minmax(0,1fr);
flex:none;
}
html[lang="ar"] body.arabic-shawts-page .broadcast-proof>nav button>i{
width:46px;
height:46px;
}
html[lang="ar"] body.arabic-shawts-page .broadcast-proof>nav button:hover,
html[lang="ar"] body.arabic-shawts-page .broadcast-proof>nav button.active{
transform:none;
}
html[lang="ar"] body.arabic-shawts-page .story-metrics .story-insight{
display:flex;
padding:24px 18px;
}
html[lang="ar"] body.arabic-shawts-page .shawts-context-panels article>small,
html[lang="ar"] body.arabic-shawts-page .shawts-context-panels article>h3,
html[lang="ar"] body.arabic-shawts-page .shawts-context-panels article>p,
html[lang="ar"] body.arabic-shawts-page .shawts-context-panels article>div{
grid-column:1;
}
}
/* Arabic mobile hero containment for the editorial About composition. */
@media(max-width:680px){
html[lang="ar"] .about-v4 .ab4-hero-copy h1{font-size:32px!important;line-height:1.22!important;text-align:right}
html[lang="ar"] .about-v4 .ab4-hero-copy h1>span,
html[lang="ar"] .about-v4 .ab4-hero-copy h1>em{max-width:100%;white-space:normal!important;text-align:right}
html[lang="ar"] .about-v4 .ab4-hero-copy>.ab4-kicker{display:block;max-width:100%;white-space:normal;text-align:right}
}
/* Final cascade enforcement after route-specific styles. */
/* Homepage RTL contract: mirror the major two-column compositions while keeping
interface screenshots in their native orientation. Logical alignment avoids
left/right regressions at responsive breakpoints. */
html[lang="ar"] body.home-page main{direction:rtl;text-align:start}
html[lang="ar"] body.home-page :is(.home-hero-v2-grid,.why-v2-layout,.security-layout,.faq-layout){direction:rtl}
html[lang="ar"] body.home-page :is(.home-hero-v2-copy,.home-section-intro,.section-heading,.company-band-intro,.company-band-copy,.security-copy){text-align:start}
html[lang="ar"] body.home-page :is(.home-hero-v2-copy,.home-section-intro,.section-heading,.company-band-copy,.security-copy)>*{margin-inline-start:0;margin-inline-end:0}
html[lang="ar"] body.home-page :is(.hero-actions,.home-hero-proof,.security-actions,.security-assurance){justify-content:flex-start}
html[lang="ar"] body.home-page :is(.home-product-stage,.home-dashboard-device,.device-mockup,.dashboard-v3-stage,.app-phone-stage){direction:ltr}
html[lang="ar"] body.home-page :is(.home-product-caption,.home-reach-signal,.dashboard-v3-detail,.app-detail){direction:rtl;text-align:start}
html[lang="ar"] body.home-page .home-device-bar{direction:rtl}
html[lang="ar"] body.home-page .home-device-bar>b{margin-inline-start:auto!important;margin-inline-end:0!important}
html[lang="ar"] body.home-page :is(.home-product-tabs button,.dashboard-v3-tabs button,.metric-tabs button,.faq-item button){text-align:start}
html[lang="ar"] body.home-page :is(.footer-top,.footer-grid,.footer-bottom){direction:rtl;text-align:start}
/* Arabic homepage — employee app showcase */
html[lang="ar"] body.home-page .home-app-showcase .app-intro-v2{max-width:900px;margin-inline-start:auto;margin-inline-end:0;text-align:right}
html[lang="ar"] body.home-page .home-app-showcase .app-intro-v2-heading{max-width:900px}
html[lang="ar"] body.home-page .home-app-showcase .app-intro-v2 h2{display:block;font-size:clamp(44px,4.6vw,64px);line-height:1.3!important}
html[lang="ar"] body.home-page .home-app-showcase .app-intro-v2 h2 :is(span,em){display:block;width:max-content;max-width:100%;margin:0;padding:.04em .12em .12em;white-space:normal}
html[lang="ar"] body.home-page .home-app-showcase .app-intro-v2 h2 span{padding-inline-start:0}
html[lang="ar"] body.home-page .home-app-showcase .app-intro-v2 h2 em:not(:last-child){color:#08a657}
html[lang="ar"] body.home-page .home-app-showcase .app-intro-v2 h2 em:last-child{transform:rotate(1deg)}
html[lang="ar"] body.home-page .home-app-showcase .app-canvas{direction:rtl;grid-template-columns:235px minmax(320px,1fr) 292px}
html[lang="ar"] body.home-page .home-app-showcase .app-dock{grid-column:1;direction:rtl}
html[lang="ar"] body.home-page .home-app-showcase .app-dock{padding:14px;justify-content:center;gap:9px;overflow:hidden}
html[lang="ar"] body.home-page .home-app-showcase .app-dock button{width:100%;min-width:0;min-height:72px;padding:0 16px;grid-template-columns:34px minmax(0,1fr) 10px;gap:10px;border-radius:14px;text-align:right;overflow:hidden}
html[lang="ar"] body.home-page .home-app-showcase .app-dock button>span{font-size:14px;text-align:center}
html[lang="ar"] body.home-page .home-app-showcase .app-dock button>div{min-width:0}
html[lang="ar"] body.home-page .home-app-showcase .app-dock button b{display:block;font-size:14px;line-height:1.45;white-space:normal;overflow-wrap:anywhere}
html[lang="ar"] body.home-page .home-app-showcase .app-dock button.active{min-height:72px;padding:0 16px;background:#073f32;box-shadow:0 12px 24px rgba(7,63,50,.16)}
html[lang="ar"] body.home-page .home-app-showcase .app-dock button.active b{color:#fff}
html[lang="ar"] body.home-page .home-app-showcase .app-phone-stage{grid-column:2;direction:ltr}
html[lang="ar"] body.home-page .home-app-showcase .app-detail{grid-column:3;direction:rtl;text-align:right}
@media(max-width:680px){
html[lang="ar"] body.home-page :is(.home-hero-v2-copy,.home-section-intro,.section-heading,.company-band-intro,.company-band-copy,.security-copy){text-align:start!important}
html[lang="ar"] body.home-page :is(.hero-actions,.home-hero-proof,.security-actions,.security-assurance){align-items:stretch;justify-content:flex-start}
html[lang="ar"] body.home-page .home-app-showcase .app-intro-v2{margin-bottom:30px;text-align:right!important}
html[lang="ar"] body.home-page .home-app-showcase .app-intro-v2 h2{display:block;font-size:clamp(30px,9vw,38px)!important;line-height:1.4!important}
html[lang="ar"] body.home-page .home-app-showcase .app-intro-v2 h2 :is(span,em){display:block;width:max-content;max-width:100%;padding:.02em 0 .1em}
html[lang="ar"] body.home-page .home-app-showcase .app-intro-v2 h2 em:last-child{margin-top:4px;padding-inline:.18em;transform:none}
html[lang="ar"] body.home-page .home-app-showcase .app-canvas{display:grid;grid-template-columns:1fr;gap:12px;padding:9px}
html[lang="ar"] body.home-page .home-app-showcase .app-dock{grid-column:1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:0;background:transparent;overflow:visible}
html[lang="ar"] body.home-page .home-app-showcase .app-dock button{display:flex;min-height:52px;padding:10px 12px;align-items:center;justify-content:space-between;text-align:right}
html[lang="ar"] body.home-page .home-app-showcase .app-dock button small{display:none!important}
html[lang="ar"] body.home-page .home-app-showcase .app-phone-stage{grid-column:1;min-height:490px}
html[lang="ar"] body.home-page .home-app-showcase .app-detail{grid-column:1;padding:28px 20px;text-align:right}
}
html[lang="ar"] main h1,html[lang="ar"] main h2,html[lang="ar"] main h3{font-family:"IBM Plex Sans Arabic",sans-serif!important;font-weight:600!important;line-height:1.35!important;letter-spacing:0!important}
html[lang="ar"] main h4,html[lang="ar"] main h5,html[lang="ar"] main h6{font-family:"IBM Plex Sans Arabic",sans-serif!important;font-weight:500!important;line-height:1.45!important}
html[lang="ar"] main p,html[lang="ar"] main li{font-family:"IBM Plex Sans Arabic",sans-serif!important;font-weight:400;line-height:1.7!important}
@media(max-width:680px){
html[lang="ar"] main h1{font-size:clamp(32px,10.5vw,44px)!important;line-height:1.28!important}
html[lang="ar"] main h2{font-size:clamp(27px,8vw,38px)!important;line-height:1.32!important}
html[lang="ar"] .cv-page h1 span+span:before,html[lang="ar"] .cv-page h1 em:before,html[lang="ar"] .c9-page h3 span+span:before{content:' ';}
html[lang="ar"] .cv-page h1{font-size:clamp(27px,7.8vw,36px)!important}
html[lang="ar"] .cv-page h2{font-size:clamp(25px,7.4vw,34px)!important}
html[lang="ar"] .fr-page h2,html[lang="ar"] .ms-page h2{font-size:clamp(24px,6.8vw,32px)!important}
html[lang="ar"] .ep-page h2,html[lang="ar"] .ep-page h3{font-size:clamp(23px,6.8vw,31px)!important}
html[lang="ar"] .sv-page h1{font-size:clamp(28px,8vw,38px)!important}
html[lang="ar"] .c9-page h3{line-height:1.45!important;overflow:visible!important}
}
/* Arabic homepage dashboard: exact English component parity, mirrored only. */
html[lang="ar"] body.home-page .dashboard-v3-head{direction:rtl;grid-template-columns:1fr .72fr;gap:70px;align-items:end;margin-bottom:38px}
html[lang="ar"] body.home-page .dashboard-v3-head>div:first-child{grid-column:1;text-align:right}
html[lang="ar"] body.home-page .dashboard-v3-head>div:last-child{grid-column:2;text-align:right;padding-bottom:4px}
html[lang="ar"] body.home-page .dashboard-v3-head h2{font-size:clamp(45px,4.5vw,61px);line-height:1.18!important}
html[lang="ar"] body.home-page .dashboard-v3-head h2>span{display:block}
html[lang="ar"] body.home-page .dashboard-v3-console{display:flex;flex-direction:column;padding:12px;border-radius:30px 30px 9px 30px}
html[lang="ar"] body.home-page .dashboard-v3-topbar{order:1;height:46px}
html[lang="ar"] body.home-page .dashboard-v3-tabs{order:2;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:7px;padding:8px;overflow:visible;direction:rtl}
html[lang="ar"] body.home-page .dashboard-v3-tabs button{min-width:0;min-height:70px;padding:7px 5px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;text-align:center}
html[lang="ar"] body.home-page .dashboard-v3-tabs button span,
html[lang="ar"] body.home-page .dashboard-v3-tabs button b{grid-column:auto;grid-row:auto;width:auto;text-align:center}
html[lang="ar"] body.home-page .dashboard-v3-tabs button b{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.35}
html[lang="ar"] body.home-page .dashboard-v3-detail{order:3;margin-top:9px;padding:20px 22px;grid-template-columns:72px minmax(0,1fr) auto;gap:22px;direction:rtl;text-align:right}
html[lang="ar"] body.home-page .dashboard-v3-detail>[data-dashboard-v3-count]{display:block}
html[lang="ar"] body.home-page .dashboard-v3-detail .button{justify-self:start}
html[lang="ar"] body.home-page .dashboard-v3-stage{order:4;margin-top:9px;border-radius:18px;background:#d8f2df;overflow:visible}
html[lang="ar"] body.home-page .dashboard-v3-browser{border:0;border-radius:18px;box-shadow:none}
html[lang="ar"] body.home-page .dashboard-v3-browserbar{display:flex;direction:rtl}
html[lang="ar"] body.home-page .dashboard-v3-browserbar span{margin-right:5px;margin-left:0}
html[lang="ar"] body.home-page .dashboard-v3-browserbar>b{margin-right:auto;margin-left:0}
html[lang="ar"] body.home-page .dashboard-v3-browser>img{width:100%;height:auto;max-height:none;object-fit:contain;filter:url(#dashboard-sharpen) contrast(1.02)!important}
@media(max-width:980px){
html[lang="ar"] body.home-page .dashboard-v3-head{grid-template-columns:1fr;gap:18px}
html[lang="ar"] body.home-page .dashboard-v3-head>div:first-child,
html[lang="ar"] body.home-page .dashboard-v3-head>div:last-child{grid-column:1}
html[lang="ar"] body.home-page .dashboard-v3-tabs{display:flex;overflow-x:auto}
html[lang="ar"] body.home-page .dashboard-v3-tabs button{flex:0 0 108px}
html[lang="ar"] body.home-page .dashboard-v3-detail{grid-template-columns:60px minmax(0,1fr)}
html[lang="ar"] body.home-page .dashboard-v3-detail .button{grid-column:2}
}
@media(max-width:680px){
html[lang="ar"] body.home-page .dashboard-v3-head h2{font-size:40px!important;line-height:1.3!important}
html[lang="ar"] body.home-page .dashboard-v3-console{padding:7px;border-radius:20px}
html[lang="ar"] body.home-page .dashboard-v3-topbar>div{display:none}
html[lang="ar"] body.home-page .dashboard-v3-tabs{display:flex;padding:7px;gap:5px;overflow-x:auto}
html[lang="ar"] body.home-page .dashboard-v3-tabs button{flex:0 0 92px;min-height:64px}
html[lang="ar"] body.home-page .dashboard-v3-detail{padding:15px;grid-template-columns:1fr;gap:8px}
html[lang="ar"] body.home-page .dashboard-v3-detail>[data-dashboard-v3-count]{display:block}
html[lang="ar"] body.home-page .dashboard-v3-detail .button{grid-column:1;width:100%}
}
/* Arabic homepage heading system: explicit RTL alignment and calm two-line wraps. */
html[lang="ar"] body.home-page main :is(h1,h2,h3),
html[lang="ar"] body.home-page main :is(header,.section-heading,.home-section-intro,.why-v2-heading,.dashboard-v3-head>div,.app-intro-v2,.security-message,.company-band-intro,.closing .section-shell){
direction:rtl;
text-align:right!important;
}
html[lang="ar"] body.home-page main :is(.eyebrow,.ip-kicker){justify-content:flex-start;text-align:right!important}
html[lang="ar"] body.home-page main section:not(.taw-static-hero) h2{
text-align:right!important;
text-wrap:balance;
overflow-wrap:normal;
word-break:normal;
}
html[lang="ar"] body.home-page .dashboard-v3-head h2>span,
html[lang="ar"] body.home-page .dashboard-v3-head h2>em,
html[lang="ar"] body.home-page .home-app-showcase .app-intro-v2 h2>span,
html[lang="ar"] body.home-page .home-app-showcase .app-intro-v2 h2>em{display:block;width:max-content;max-width:100%;white-space:nowrap}
html[lang="ar"] body.home-page :is(.section-heading,.home-section-intro,.dashboard-v3-head,.app-intro-v2,.closing .section-shell){margin-inline-start:0;margin-inline-end:0}
html[lang="ar"] body.home-page .closing :is(.eyebrow,h2,p,.hero-actions){margin-inline-start:0;margin-inline-end:0;text-align:right!important;justify-content:flex-start}
html[lang="ar"] body.home-page .why-v2-grid h3{font-size:26px;line-height:1.42!important;text-wrap:balance}
html[lang="ar"] body.home-page .app-detail h3{font-size:34px;line-height:1.35!important;text-wrap:balance}
html[lang="ar"] body.home-page :is(.why-v2-grid h3,.app-detail h3,.channel-result h3){overflow-wrap:normal;word-break:normal}
@media(max-width:680px){
html[lang="ar"] body.home-page .dashboard-v3-head h2{font-size:34px!important;line-height:1.32!important}
html[lang="ar"] body.home-page .home-app-showcase .app-intro-v2 h2{font-size:32px!important;line-height:1.38!important}
html[lang="ar"] body.home-page .why-v2-grid h3{font-size:21px}
html[lang="ar"] body.home-page .app-detail h3{font-size:32px}
}
/* The closing CTA is the sole centered heading exception on the Arabic homepage. */
html[lang="ar"] body.home-page main section.closing .section-shell{
display:flex;
flex-direction:column;
align-items:center;
margin-inline:auto;
text-align:center!important;
}
html[lang="ar"] body.home-page main section.closing :is(.eyebrow,h2,p){
width:100%;
margin-inline:auto;
text-align:center!important;
}
html[lang="ar"] body.home-page main section.closing .eyebrow{justify-content:center}
html[lang="ar"] body.home-page main section.closing .hero-actions{
width:auto;
margin-inline:auto;
justify-content:center;
align-items:center;
text-align:center!important;
}
html[lang="ar"] body.home-page .closing .hero-actions .button{justify-content:center;text-align:center!important}