/* Local OFL fonts; whole Arabic lines stay intact throughout the reveal. */
body,button,input,select { font-family:'IBM Plex Sans Arabic',Arial,sans-serif; }
body { line-height:1.5; }
.edition { min-height:22px; line-height:22px; }
.header-actions,.site-header nav { line-height:22px; }
.header-trial { min-height:46px; }
h1 { width:100%; }
html[lang=en] h1 { font-size:clamp(34px,3.9vw,56px); line-height:1.12; }
html[lang=en] h1>span,html[lang=en] h1>em { min-height:1.12em; }
.hero-actions .primary { line-height:21px; }
html[lang=ar] body { font-family:'IBM Plex Sans Arabic',Arial,sans-serif; }
html[lang=ar] h1 em { font-family:'Noto Naskh Arabic',serif; font-weight:500; font-size:clamp(46px,4.2vw,64px); line-height:1.5; margin-top:0; }
h1>span,h1>em { display:block; }
.brand-opening { display:none; }
.brand-intro-active.connection-playing .brand-opening { display:block; position:fixed; inset:0; z-index:100; pointer-events:none; }
/* The same official icon meets the header icon at identical bounds. */
.connection-field { position:absolute; inset:0; background:#123b30; }
.connection-mark { position:absolute; width:112px; height:112px; left:calc(50% - 56px); top:calc(50% - 110px); object-fit:contain; transform-origin:center; }
.brand-signature { position:absolute; left:50%; top:calc(50% + 20px); transform:translateX(-50%); }
.brand-signature img { width:230px; height:auto; }
.connection-thread { position:absolute; inset:0; width:100%; height:100%; overflow:hidden; }
.connection-thread path { stroke:#30aa7f; stroke-width:1.5; stroke-dasharray:1; stroke-dashoffset:1; opacity:0; }
.opening-controls { position:absolute; bottom:var(--skip-bottom,150px); left:50%; transform:translateX(-50%); pointer-events:auto; }
.opening-controls button { min-height:44px; min-width:100px; padding:8px 18px; border:1px solid #91ac9f; border-radius:5px; background:#123b30; color:white; font-size:14px; cursor:pointer; }
.opening-controls :focus-visible { outline:3px solid #e6ee9c; outline-offset:4px; }
.brand-intro-active .hero-actions { position:relative; z-index:101; transform:translateY(var(--cta-y,0px)); background:var(--paper); box-shadow:0 0 0 10px var(--paper); border-radius:2px; }
.brand-intro-active .site-header .brand>img { opacity:0; }
.connection-playing .connection-mark { animation:mark-connect 3.8s cubic-bezier(.65,0,.2,1) both; }
.connection-playing .connection-field { animation:field-connect 3.8s ease both; }
.connection-playing .brand-signature { animation:wordmark-connect 3.8s ease both; }
.connection-playing .connection-thread path { animation:thread-connect 3.8s ease both; }
.connection-playing .opening-controls { animation:controls-connect 3.8s linear both; }
.connection-playing .hero-actions { animation:cta-connect 3.8s cubic-bezier(.22,1,.36,1) both; }
.connection-playing .site-header .brand>img { animation:header-connect 3.8s linear both; }
.connection-playing h1 { animation:headline-connect 3.8s cubic-bezier(.22,1,.36,1) both; }
.connection-playing .scene-wrap { animation:product-connect 3.8s ease both; }
.connection-playing :is(.queue-person,.customer) { animation:arrival-connect 3.8s var(--ease) both; }
.connection-playing .incoming { animation:message-connect 3.8s var(--ease) both; }
.connection-playing :is(.owner-row,.composer,.queue-count) { animation:context-connect 3.8s ease both; }
@keyframes mark-connect { 0%,15%{transform:translate(0,0) scale(1);opacity:1} 43%,44%{transform:translate(var(--mark-x),var(--mark-y)) scale(var(--mark-scale));opacity:1} 44.1%,100%{transform:translate(var(--mark-x),var(--mark-y)) scale(var(--mark-scale));opacity:0} }
@keyframes header-connect { 0%,44%{opacity:0} 44.1%,100%{opacity:1} }
@keyframes wordmark-connect { 0%,15%{opacity:1} 31%,100%{opacity:0} }
@keyframes field-connect { 0%,22%{opacity:1} 47%,100%{opacity:0} }
@keyframes controls-connect { 0%,25%{opacity:1;visibility:visible} 30%,100%{opacity:0;visibility:hidden;pointer-events:none} }
@keyframes cta-connect { 0%,28%{transform:translateY(var(--cta-y))} 53%,100%{transform:none} }
@keyframes thread-connect { 0%,40%{stroke-dashoffset:1;opacity:0} 43%{opacity:.7} 61%{stroke-dashoffset:0;opacity:.7} 73%,100%{stroke-dashoffset:0;opacity:0} }
@keyframes product-connect { 0%,39%{opacity:0} 60%,100%{opacity:1} }
@keyframes headline-connect { 0%,43%{opacity:0;transform:translateY(16px)} 65%,100%{opacity:1;transform:none} }
@keyframes arrival-connect { 0%,54%{opacity:0;transform:translateY(8px)} 70%,100%{opacity:1;transform:none} }
@keyframes message-connect { 0%,65%{opacity:0;transform:translateY(12px)} 85%,100%{opacity:1;transform:none} }
@keyframes context-connect { 0%,77%{opacity:0} 96%,100%{opacity:1} }
@media(max-width:900px) { html[lang=ar] h1 em { font-size:46px; line-height:1.5; margin-inline-start:12px; } .opening-controls button { font-size:13px; } }
@media(max-width:450px) {
  html[lang=en] h1 { font-size:49px; line-height:1.05; }
  html[lang=en] h1>span { height:2.1em; }
  html[lang=en] h1>em { font-size:48px; min-height:1.05em; }
  html[lang=en] .intro-copy .lead { min-height:118.4px; }
  html[lang=en] .hero-actions { display:grid; justify-items:start; }
  html[lang=en] .intro-copy .fine { min-height:40.8px; }
}
@media(prefers-reduced-motion:reduce) { .brand-intro-active .brand-opening { display:none; } .brand-intro-active * { animation:none!important; } }

/* Pending JS/CSS keeps the real page and CTA in their normal layout. */
.brand-intro-active:not(.connection-playing) .hero-actions{position:static;transform:none;box-shadow:none}
.brand-intro-active:not(.connection-playing) .site-header .brand>img{opacity:1}