/* Ovvos Wasel — shared styles. Page layout lives in each page's inline styles (from the design);
   this file holds the motion keyframes, header breakpoints, script-specific type rules and the
   hover rules collected from the design (appended by the build). */
@keyframes ovEq{0%,100%{transform:scaleY(.35)}50%{transform:scaleY(1)}}
@keyframes ovCaret{0%,100%{opacity:1}50%{opacity:0}}
@keyframes ovRing{0%{transform:scale(.6);opacity:.55}100%{transform:scale(2.4);opacity:0}}
@keyframes ovPulse{0%,100%{box-shadow:0 0 0 0 rgba(30,155,94,.45)}50%{box-shadow:0 0 0 6px rgba(30,155,94,0)}}

[hidden]{display:none !important}
:focus-visible{outline:2px solid #0B0B0B;outline-offset:2px}
.ov-skip{position:absolute;inset-inline-start:12px;top:-60px;z-index:100;padding:10px 16px;border-radius:6px;background:#0B0B0B;color:#F4F0E6 !important;font:700 15px Manrope,sans-serif;text-decoration:none}
.ov-skip:focus{top:12px}
.ov-hp{position:fixed !important;top:0;left:0;width:1px;height:1px;overflow:hidden;opacity:0;pointer-events:none;clip-path:inset(50%)}
.ov-hp *{width:1px !important;min-width:0 !important;padding:0 !important;border:0 !important}

/* Header: links above 1180px, menu button below; the CTA hides below 640px. */
.ov-nav-links{display:none}
.ov-nav-burger{display:flex}
.ov-nav-cta{display:none}
.ov-mobile-menu{display:flex}
@media (min-width:641px){.ov-nav-cta{display:flex}}
@media (min-width:1181px){.ov-nav-links{display:flex}.ov-nav-burger{display:none !important}.ov-mobile-menu{display:none !important}}
/* Narrow phones: long translated taglines (es, fr, pt) wrap instead of pushing the menu button off-screen. */
@media (max-width:480px){.ov-header nav{gap:14px !important}.ov-brand{flex-shrink:1 !important;min-width:0}.ov-brand-name{white-space:nowrap}.ov-brand-tag{line-height:1.35}}
.ov-hov-paper:hover{background:#EFEADB !important}
.ov-hov-ink-border:hover{border-color:#0B0B0B !important}
.ov-hov-ink2:hover{background:#2A2A2A !important}

/* FAQ: the answers' "span 2" adds a phantom column (and sideways scroll) once the group grid
   is down to one column, below 760px (2 × 320px + 64px gap). */
@media (max-width:759px){main [style*="grid-column: span 2"]{grid-column:1/-1 !important}}
/* Footer on phones: the design shows two link columns (an effect of the same "span 2"); make
   them explicit and shrinkable so long translated links (ru) wrap instead of widening the page. */
@media (max-width:427px){
  footer [style*="minmax(min(100%, 170px), 1fr)"]{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  footer [style*="grid-column: span 2"]{grid-column:1/-1 !important}
  footer a{overflow-wrap:break-word;hyphens:auto;-webkit-hyphens:auto}
}

/* Air-gapped diagram: on narrow phones stack room → ✕ → outside world vertically. */
@media (max-width:480px){
  .ov-airgap-row{flex-direction:column;align-items:stretch !important}
  .ov-airgap-row>div:nth-child(2){width:auto !important;flex-direction:row !important}
  .ov-airgap-row>div:nth-child(2)>span:not(:nth-child(2)){flex:1}
  .ov-airgap-row>div:last-child{width:auto !important}
}

/* Document reader on phones/tablets: wide tables and code scroll inside the sheet; the running
   header/footer lines wrap. */
@media screen and (max-width:920px){
  doc-page article :is(table,pre){display:block;max-width:100%;overflow-x:auto}
  doc-page>[slot=header],doc-page>[slot=footer],doc-page>header>span{flex-wrap:wrap;gap:4px 16px}
  doc-page>header h1{font-size:clamp(28px,8.5vw,40px) !important;hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}
}

/* Long compound words (German) break with hyphens rather than widening the page. */
:lang(de) body{hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}

/* Script-specific type (from the design's shared header). */
:lang(ur) *:not(:lang(ar)):not(:lang(fr)):not(:lang(de)):not(:lang(en)):not([style*="IBM Plex Mono"]){font-family:Manrope,'Noto Nastaliq Urdu','Noto Sans Arabic',sans-serif !important}
:lang(ur) [style*="IBM Plex Mono"]{font-family:'IBM Plex Mono','Noto Nastaliq Urdu','Noto Sans Arabic',monospace !important}
:lang(ur) :is(h1,h2,h3,h4,h5):not(:lang(ar)){line-height:1.85 !important;letter-spacing:0 !important}
:lang(ur) :is(p,li,dt,td,th,label,summary,blockquote,figcaption,a,button,strong,em,small):not(:lang(ar)):not([style*="IBM Plex Mono"]){line-height:2.1 !important}
:lang(ar) *,:lang(ur) *,:lang(fa) *,:lang(hi) *,:lang(zh) *{letter-spacing:0 !important}

@media print{
  .ov-header,.ov-skip{display:none !important}
  [data-reveal]{opacity:1 !important;transform:none !important}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
}

/* Hover rules from the design */
.h109hehm:hover{background: rgb(42, 42, 42) !important;color: rgb(255, 200, 0) !important}
.h15pyrdd:hover{background: rgb(255, 200, 0) !important;border-color: rgb(255, 200, 0) !important}
.h1b58qq4:hover{background: rgb(255, 213, 61) !important}
.h1oi083l:hover{background: rgb(42, 42, 42) !important;color: rgb(244, 240, 230) !important}
.h1qqxnhp:hover{color: rgb(59, 53, 32) !important}
.h1u8o6eh:hover{background: rgb(255, 213, 61) !important;color: rgb(11, 11, 11) !important}
.h1yg3hbi:hover{background: rgb(11, 11, 11) !important;color: rgb(255, 200, 0) !important}
.h3lm24y:hover{border-color: rgb(11, 11, 11) !important;color: rgb(17, 17, 17) !important}
.h6pfre3:hover{color: rgb(255, 213, 61) !important}
.h8l6qvp:hover{background: rgb(244, 240, 230) !important;color: rgb(11, 11, 11) !important}
.hgl6xow:hover{color: rgb(255, 200, 0) !important}
.hn9yajp:hover{background: rgb(42, 42, 42) !important}
.hwmtdmx:hover{color: rgb(11, 11, 11) !important;background: rgb(255, 213, 61) !important}
/* Desktop links per language: menu button until the translated links fit (measured at build). */
@media (min-width:1181px) and (max-width:1385px){html[lang="en"] .ov-nav-links{display:none !important}html[lang="en"] .ov-nav-burger{display:flex !important}html[lang="en"] .ov-mobile-menu:not([hidden]){display:flex !important}}
@media (min-width:1181px) and (max-width:1216px){html[lang="hi"] .ov-nav-links{display:none !important}html[lang="hi"] .ov-nav-burger{display:flex !important}html[lang="hi"] .ov-mobile-menu:not([hidden]){display:flex !important}}
@media (min-width:1181px) and (max-width:1458px){html[lang="es"] .ov-nav-links{display:none !important}html[lang="es"] .ov-nav-burger{display:flex !important}html[lang="es"] .ov-mobile-menu:not([hidden]){display:flex !important}}
@media (min-width:1181px) and (max-width:1529px){html[lang="fr"] .ov-nav-links{display:none !important}html[lang="fr"] .ov-nav-burger{display:flex !important}html[lang="fr"] .ov-mobile-menu:not([hidden]){display:flex !important}}
@media (min-width:1181px) and (max-width:1400px){html[lang="pt"] .ov-nav-links{display:none !important}html[lang="pt"] .ov-nav-burger{display:flex !important}html[lang="pt"] .ov-mobile-menu:not([hidden]){display:flex !important}}
@media (min-width:1181px) and (max-width:1497px){html[lang="ru"] .ov-nav-links{display:none !important}html[lang="ru"] .ov-nav-burger{display:flex !important}html[lang="ru"] .ov-mobile-menu:not([hidden]){display:flex !important}}
@media (min-width:1181px) and (max-width:1453px){html[lang="de"] .ov-nav-links{display:none !important}html[lang="de"] .ov-nav-burger{display:flex !important}html[lang="de"] .ov-mobile-menu:not([hidden]){display:flex !important}}