/* ============================================================
   PRAXIS · Thumb law (mobile sweep, 5 Nov 2026).
   On a phone every control the visitor might tap gets at least a 44px
   tap area. Nothing here moves or resizes anything you can see: the
   links grow an invisible touch zone (an empty ::after laid over them),
   so every layout stays exactly as designed. Phones only.
   Loaded on every page of the site, EN, AR and RU.
   ============================================================ */
@media (max-width:767px){
  .lhead .logo,.lhead .backlink,.ncell .logo,
  .pf-nav a,.pf-contact a:not(.px-sf):not(.px-wa-foot),.af-nav a,
  .fcol a:not(.px-sf):not(.px-wa-foot):not(.px-book),.pxf-row a:not(.px-sf):not(.px-wa-foot):not(.px-book),
  .pf-legal a,.af-legal a,.flegal a,.pxf-legal a,
  .pf-mail,.af-mail,.pxf-mail,.dcol a.big,.ib-quiet,
  .px-ck-btns ~ * a,.cookie p a,.px-ar p a,.show p a{position:relative}

  /* header: logo and "Back to site" */
  .lhead .logo::after,.ncell .logo::after{content:'';position:absolute;left:0;right:0;top:-8px;bottom:-8px}
  .lhead .backlink::after{content:'';position:absolute;left:-10px;right:-10px;top:-12px;bottom:-12px}

  /* footer link lists (the three footer families: pf-, af-, f-/pxf-) */
  .pf-nav a::after,.pf-contact a:not(.px-sf):not(.px-wa-foot)::after,.af-nav a::after,
  .fcol a:not(.px-sf):not(.px-wa-foot):not(.px-book)::after,.pxf-row a:not(.px-sf):not(.px-wa-foot):not(.px-book)::after,
  .pf-mail::after,.af-mail::after,.pxf-mail::after,.dcol a.big::after,.ib-quiet::after{content:'';position:absolute;left:0;right:0;top:-10px;bottom:-10px}
  .pf-legal a::after,.af-legal a::after,.flegal a::after,.pxf-legal a::after{content:'';position:absolute;left:-6px;right:-6px;top:-11px;bottom:-11px}

  /* pricing card "Talk to us first" (absolutely placed: padding paid back by margin keeps the text in place) */
  .prc-talk{padding-top:11px;padding-bottom:11px;margin-top:-11px;margin-bottom:-11px}

  /* social icons were drawn at 42px on phones */
  .px-soc-foot a svg,.px-wa-foot svg{width:44px !important;height:44px !important}

  /* cookie notice */
  .px-ck-btns button{min-height:44px}
  .px-ck-btns ~ * a::after,.cookie p a::after,.px-ar p a::after,.show p a::after{content:'';position:absolute;left:-4px;right:-4px;top:-16px;bottom:-16px}

  /* form fields */
  form .field input:not([type=checkbox]):not([type=radio]):not([type=range]),form .field select,form .field textarea{min-height:44px}

  /* footer link lists sat 36px apart (26px links, 10px gap): a thumb could not tell them apart.
     The gap opens to 18px on phones only, so each link owns a 44px band. */
  .pf-nav,.pf-contact{gap:18px}
  .af-nav{gap:14px}
  .pf-nav a::after,.pf-contact a:not(.px-sf):not(.px-wa-foot)::after{top:-9px;bottom:-9px}
  .af-nav a::after{top:-7px;bottom:-7px}

  /* more links that were thumb-small: footer language line, answer titles, ad-page footer,
     the Book's audiobook player and the music buttons */
  .pf-line a,.qa-title,.lp-end a,.ab-x,.ab-speed{position:relative}
  .pf-line a::after,.lp-end a::after{content:'';position:absolute;left:-4px;right:-4px;top:-13px;bottom:-13px}
  .qa-title::after{content:'';position:absolute;left:0;right:0;top:-10px;bottom:-10px}
  .ab-x::after,.ab-speed::after{content:'';position:absolute;left:50%;top:50%;width:44px;height:44px;transform:translate(-50%,-50%)}
  #bksound::after,#gdsound::after{content:'';position:absolute;left:0;right:0;top:-3px;bottom:-3px}

  /* checkout: back-to-site mark, language pills, study-type chips (touch zones only, nothing moves) */
  .brand,.langs a,.chips .chip{position:relative}
  .brand::after{content:'';position:absolute;left:0;right:0;top:-12px;bottom:-12px}
  .langs a::after{content:'';position:absolute;left:-4px;right:-4px;top:-10px;bottom:-10px}
  .chips .chip::after{content:'';position:absolute;left:0;right:0;top:-3px;bottom:-3px}
}

/* EN-017 · The thumb law above stops at 767px, so English pages on phones held sideways (844px) and
   touch tablets (768 to 1366px, no mouse) kept 19 to 30px links (logo, Back to site, footer and legal
   links, cookie links). Same invisible touch zones there, English only; generated from the block above. */
@media (min-width:768px) and (max-width:1366px) and (hover:none) and (pointer:coarse){
  html:lang(en) .lhead .logo,html:lang(en) .lhead .backlink,html:lang(en) .ncell .logo,html:lang(en) .pf-nav a,html:lang(en) .pf-contact a:not(.px-sf):not(.px-wa-foot),html:lang(en) .af-nav a,html:lang(en) .fcol a:not(.px-sf):not(.px-wa-foot):not(.px-book),html:lang(en) .pxf-row a:not(.px-sf):not(.px-wa-foot):not(.px-book),html:lang(en) .pf-legal a,html:lang(en) .af-legal a,html:lang(en) .flegal a,html:lang(en) .pxf-legal a,html:lang(en) .pf-mail,html:lang(en) .af-mail,html:lang(en) .pxf-mail,html:lang(en) .dcol a.big,html:lang(en) .ib-quiet,html:lang(en) .px-ck-btns ~ * a,html:lang(en) .cookie p a,html:lang(en) .px-ar p a,html:lang(en) .show p a{position:relative}
  html:lang(en) .lhead .logo::after,html:lang(en) .ncell .logo::after{content:'';position:absolute;left:0;right:0;top:-8px;bottom:-8px}
  html:lang(en) .lhead .backlink::after{content:'';position:absolute;left:-10px;right:-10px;top:-12px;bottom:-12px}
  html:lang(en) .pf-nav a::after,html:lang(en) .pf-contact a:not(.px-sf):not(.px-wa-foot)::after,html:lang(en) .af-nav a::after,html:lang(en) .fcol a:not(.px-sf):not(.px-wa-foot):not(.px-book)::after,html:lang(en) .pxf-row a:not(.px-sf):not(.px-wa-foot):not(.px-book)::after,html:lang(en) .pf-mail::after,html:lang(en) .af-mail::after,html:lang(en) .pxf-mail::after,html:lang(en) .dcol a.big::after,html:lang(en) .ib-quiet::after{content:'';position:absolute;left:0;right:0;top:-10px;bottom:-10px}
  html:lang(en) .pf-legal a::after,html:lang(en) .af-legal a::after,html:lang(en) .flegal a::after,html:lang(en) .pxf-legal a::after{content:'';position:absolute;left:-6px;right:-6px;top:-11px;bottom:-11px}
  html:lang(en) .prc-talk{padding-top:11px;padding-bottom:11px;margin-top:-11px;margin-bottom:-11px}
  html:lang(en) .px-soc-foot a svg,html:lang(en) .px-wa-foot svg{width:44px !important;height:44px !important}
  html:lang(en) .px-ck-btns button{min-height:44px}
  html:lang(en) .px-ck-btns ~ * a::after,html:lang(en) .cookie p a::after,html:lang(en) .px-ar p a::after,html:lang(en) .show p a::after{content:'';position:absolute;left:-4px;right:-4px;top:-16px;bottom:-16px}
  html:lang(en) form .field input:not([type=checkbox]):not([type=radio]):not([type=range]),html:lang(en) form .field select,html:lang(en) form .field textarea{min-height:44px}
  html:lang(en) .pf-nav,html:lang(en) .pf-contact{gap:18px}
  html:lang(en) .af-nav{gap:14px}
  html:lang(en) .pf-nav a::after,html:lang(en) .pf-contact a:not(.px-sf):not(.px-wa-foot)::after{top:-9px;bottom:-9px}
  html:lang(en) .af-nav a::after{top:-7px;bottom:-7px}
  html:lang(en) .pf-line a,html:lang(en) .qa-title,html:lang(en) .lp-end a,html:lang(en) .ab-x,html:lang(en) .ab-speed{position:relative}
  html:lang(en) .pf-line a::after,html:lang(en) .lp-end a::after{content:'';position:absolute;left:-4px;right:-4px;top:-13px;bottom:-13px}
  html:lang(en) .qa-title::after{content:'';position:absolute;left:0;right:0;top:-10px;bottom:-10px}
  html:lang(en) .ab-x::after,html:lang(en) .ab-speed::after{content:'';position:absolute;left:50%;top:50%;width:44px;height:44px;transform:translate(-50%,-50%)}
  html:lang(en) #bksound::after,html:lang(en) #gdsound::after{content:'';position:absolute;left:0;right:0;top:-3px;bottom:-3px}
  html:lang(en) .brand,html:lang(en) .langs a,html:lang(en) .chips .chip{position:relative}
  html:lang(en) .brand::after{content:'';position:absolute;left:0;right:0;top:-12px;bottom:-12px}
  html:lang(en) .langs a::after{content:'';position:absolute;left:-4px;right:-4px;top:-9px;bottom:-9px}
  html:lang(en) .chips .chip::after{content:'';position:absolute;left:0;right:0;top:-3px;bottom:-3px}
}

/* ============================================================
   EN mobile sweep, phase 1 (5 Nov 2026, PR #44). English only (html:lang(en)),
   phones and tablets only (max-width:1023px, plus touch tablets up to 1366px with no mouse):
   desktop is untouched.
   The AR/RU twins are left to their own phases (see EN-LEDGER.md, "Notes for AR/RU").
   ============================================================ */
@media (max-width:1023px),(min-width:1024px) and (max-width:1366px) and (hover:none) and (pointer:coarse){
  /* EN-001 · The chat button (Olya) floated over headings, links and the FAQ list as the page scrolled.
     On phones and tablets it now docks into the bottom bar as its first cell: same navy, same gold rule,
     same breathing dots. The bar's two links move over by its width. It slides in and out with the bar
     (intro gate, menu open, keyboard up). Open, the chat panel is exactly as before.
     (praxis-core section 13 hid the floating button on the first screen; docked, it covers nothing, so it shows.) */
  html:lang(en) body:has(#ctaWidget) #pxct{left:56px !important;width:auto !important}
  /* block 8 (V1-21): with the chat docked the bar is 56px narrower, and "Book a free consultation" broke onto two lines on 360-414px phones; WhatsApp takes only the width it needs */
  html:lang(en) body:has(#ctaWidget) #pxct .pxct-wa{flex:0 0 auto}
  html:lang(en) body:has(#pxct) .cta-widget:not(.open){left:0 !important;right:auto !important;bottom:0 !important;opacity:1 !important;visibility:visible !important;pointer-events:auto !important;transition:transform .7s cubic-bezier(.2,.7,.2,1) !important}
  html:lang(en) body:has(#pxct) .cta-widget:not(.open) .cta-pill{box-sizing:border-box;width:56px;height:calc(49px + env(safe-area-inset-bottom));padding:0 0 env(safe-area-inset-bottom);gap:0;justify-content:center;border:0;border-top:1px solid rgba(199,162,76,.55);border-right:1px solid rgba(199,162,76,.25);border-radius:0;background:rgba(15,23,34,.96);box-shadow:0 -10px 30px rgba(0,0,0,.35);transform:none}
  html:lang(en) body:has(#pxct) .cta-widget:not(.open) .cta-pill-label{display:none}
  html:lang(en) body:has(#pxct) .cta-widget:not(.open) .cta-dots{width:28px;height:28px}
  html:lang(en) body:has(#pxct:not(.in)) .cta-widget:not(.open),
  html:lang(en).who-lock body:has(#pxct) .cta-widget:not(.open),
  html:lang(en) body.locked:has(#pxct) .cta-widget:not(.open),
  html:lang(en) body.pxct-typing:has(#pxct) .cta-widget:not(.open),
  html:lang(en) body:has(#pxct):has(.mmenu.open) .cta-widget:not(.open){transform:translateY(110%);pointer-events:none !important}

  /* EN-018 · Answers: the "More answers" links were 19px tall on a 33px pitch. Each gets a 44px band. */
  html:lang(en) .more li{margin-bottom:20px}
  html:lang(en) .more li a{position:relative}
  html:lang(en) .more li a::after{content:'';position:absolute;left:0;right:0;top:-13px;bottom:-12px}

  /* EN-005 · Chat: the message field was 14px, so iPhone Safari zoomed the page on tap and left it zoomed.
     16px on phones and tablets; the send arrow gets a 44px touch zone. */
  html:lang(en) .cta-input input{font-size:16px}
  html:lang(en) .cta-input button{position:relative}
  html:lang(en) .cta-input button::after{content:'';position:absolute;inset:-7px}

  /* EN-003 · Home hero: the bottom bar sat on "Where instinct meets evidence" and on the frame's lower
     rule. Both rise by the bar's height. */
  html:lang(en) .hero .caption{bottom:calc(40px + 49px + env(safe-area-inset-bottom))}
  html:lang(en) .hero .hero-frame{bottom:calc(20px + 49px + env(safe-area-inset-bottom))}

  /* EN-013 · After Accept or Reject, the cookie notice slides down out of sight; lifted above the bar,
     its top edge stayed 16px on screen under the bar (sideways phones). Once it has slid away it is
     also made invisible, so nothing of it remains. */
  html:lang(en) #cookieBar:not(.show),html:lang(en) #pxCookieBar:not(.show){visibility:hidden;transition:transform .7s cubic-bezier(.16,1,.3,1),visibility 0s .7s}
  html:lang(en) #cookieBar.show,html:lang(en) #pxCookieBar.show{visibility:visible}
  /* EN-019 · Until a cookie choice is made, the notice sits above the bar and covered the last lines of
     every page. While it shows, the page's closing spacer grows by its height, so the footer and the
     last words can always be scrolled clear of it. */
  html:lang(en) body:has(#cookieBar.show) #pxct-sp,html:lang(en) body:has(#pxCookieBar.show) #pxct-sp{height:calc(49px + 96px + env(safe-area-inset-bottom))}

  /* EN-029 · Every form field (checkout, Contact, Founders' Study, the ad pages, the questionnaire, the chat)
     at 16px on phones and tablets: smaller text made iPhone Safari zoom in on tap and leave the page zoomed. */
  html:lang(en) input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=submit]):not([type=button]),
  html:lang(en) select,html:lang(en) textarea{font-size:16px !important}

  /* EN-023 · Checkout: the see-through top bar (Praxis Model, EN RU AR) scrolled over the step headings and
     the study cards. On phones and tablets it is a solid navy band with a hairline, so nothing reads through. */
  /* CO3 · sideways phones: a field brought into view on focus or after an error stays clear of the checkout top bar */
  html:lang(en) body:has(#thread) .field :is(input,select,textarea),html:lang(en) body:has(#thread) .ferr{scroll-margin-top:76px}
  /* block 8 (V1-25): the focused field's label (above it) stays clear of the top bar too, all languages */
  body:has(#thread) .field :is(input,select,textarea){scroll-margin-top:112px}
  html:lang(en) body:has(#thread) .top{background:rgba(8,13,20,.97);border-bottom:1px solid rgba(199,162,76,.16)}
  /* EN-024 · Checkout has no bottom bar, and the floating chat button sat over the card edges, the Investor
     Edition price and "Continue". Closed, it now sits in the top bar beside the language pills, as the same
     breathing dots; it covers nothing there, so it shows from the first screen. Open, the chat is as before. */
  html:lang(en) body:has(#thread) .cta-widget:not(.open){top:8px;bottom:auto !important;left:auto !important;right:172px;z-index:60;opacity:1 !important;visibility:visible !important;pointer-events:auto !important}
  html:lang(en) body:has(#thread) .cta-widget:not(.open) .cta-pill{width:44px;height:44px;padding:0;gap:0;justify-content:center;background:transparent;border:0;box-shadow:none;transform:none}
  html:lang(en) body:has(#thread) .cta-widget:not(.open) .cta-pill-label{display:none}
  html:lang(en) body:has(#thread) .cta-widget:not(.open) .cta-dots{width:30px;height:30px}
  /* B3 · checkout titles balance their lines ("Your invoice is on its / way." left one word alone) */
  html:lang(en) body:has(#thread) .m-title{text-wrap:balance}
  /* Checkout touch zones (C1): the Agreement tick, the "i", the location steppers, the small links */
  html:lang(en) #m3 .chk{position:relative;flex-shrink:0}
  html:lang(en) #m3 .chk::after{content:'';position:absolute;inset:-12px}
  html:lang(en) .field .whywa::after{content:'';position:absolute;inset:-15px}
  html:lang(en) #sitesRow button{position:relative}
  html:lang(en) #sitesRow button::after{content:'';position:absolute;inset:-9px -12px}
  html:lang(en) #m1 .nextbtn,html:lang(en) #m2 .nextbtn,html:lang(en) #m5 .nextbtn{min-height:44px}
  html:lang(en) .talkfirst,html:lang(en) .quietline a,html:lang(en) .gulfline a,html:lang(en) #agreeTxt a,html:lang(en) #m3 > div:last-child a{position:relative}
  html:lang(en) .talkfirst::after,html:lang(en) .quietline a::after,html:lang(en) .gulfline a::after,html:lang(en) #agreeTxt a::after,html:lang(en) #m3 > div:last-child a::after{content:'';position:absolute;left:-4px;right:-4px;top:-16px;bottom:-16px}
  html:lang(en) #m3 > div:last-child a{display:inline-block;min-width:44px;text-align:center}
  /* EN-052 · Keyboard and switch users (WCAG 2.4.11): a link reached with Tab could stop under the bottom bar,
     and on the reading pages an in-page link (#closures, #disagree) put its heading under the sticky top bar.
     The browser now keeps that much room clear when it scrolls to a focused control or an anchor. Nothing
     moves for touch readers. */
  html:lang(en):has(#pxct){scroll-padding-bottom:calc(49px + 16px + env(safe-area-inset-bottom))}
  html:lang(en):has(.lhead){scroll-padding-top:84px}
  html:lang(en):has(#thread){scroll-padding-top:84px}
  html:lang(en):has(.lp-bar){scroll-padding-bottom:calc(65px + 16px + env(safe-area-inset-bottom))}
  html:lang(en):has(#mbar){scroll-padding-bottom:calc(120px + env(safe-area-inset-bottom))}
  /* EN-059 · Sideways the phone menu (665px of links in a 390px screen) scrolls inside itself; it now keeps
     that scroll to itself at either end (overscroll-behavior), as the page behind is already locked. */
  html:lang(en) #mmenu{overscroll-behavior:contain}
  /* EN-060 · Olya's chat close button is 30px; an invisible 44px touch zone around it, same look. */
  html:lang(en) .cta-close{position:relative}
  html:lang(en) .cta-close::after{content:'';position:absolute;inset:-7px}
}
@media (max-width:560px){
  html:lang(en) body:has(#thread) .cta-widget:not(.open){top:4px;right:140px}
}
@media (max-width:359px){
  /* EN-057 · Break-even calculator at 320px: "AED 421,2..." and "AED 268,5..." were cut with an ellipsis in
     the results grid. Below 360px a figure that does not fit wraps to a second line, as the gold key figure
     already does, so every number is whole. */
  html:lang(en) .fg .fig{white-space:normal;overflow:visible;text-overflow:clip}
  html:lang(en) body:has(#thread) .brand{letter-spacing:.12em;font-size:12px}
  html:lang(en) body:has(#thread) .langs{gap:4px}
  html:lang(en) body:has(#thread) .langs a{padding:4px 8px}
  html:lang(en) body:has(#thread) .cta-widget:not(.open){right:133px}
}
@media (max-width:767px){
  html:lang(en) body:has(#cookieBar.show) #pxct-sp,html:lang(en) body:has(#pxCookieBar.show) #pxct-sp{height:calc(49px + 168px + env(safe-area-inset-bottom))}
}
@media (max-width:479px){
  /* EN-001 (cont.) · the bar is 56px narrower beside the docked chat: under 480px its calendar icon
     steps aside and "Book a free consultation" may take two lines, so both labels stay whole to 320px. */
  html:lang(en) body:has(#ctaWidget) #pxct .pxct-book svg{display:none}
  html:lang(en) body:has(#ctaWidget) #pxct .pxct-book span{white-space:normal;line-height:1.35;text-align:center}
  html:lang(en) body:has(#ctaWidget) #pxct a{padding:0 8px}
}
@media (max-width:359px){
  /* EN-002 · 320px screens (small Androids, large-text settings): the menu button ran off the right
     edge and the bar's WhatsApp label was cut. Tighter padding only; nothing else changes. */
  html:lang(en) nav#nav{padding-left:12px;padding-right:12px}
  html:lang(en) nav#nav .nleft .ncell{padding:0 12px}
  html:lang(en) #pxct a{gap:6px;padding:0 6px}
  html:lang(en) #pxct a span{letter-spacing:.06em}
  /* home "How it works" cards: the column was held at 300px by "Unfiltered" plus 42px padding inside a
     240px card, so the right edge of every step was cut off */
  html:lang(en) .proc .wrap{padding-left:20px;padding-right:20px}
  html:lang(en) .proc-card{grid-template-columns:minmax(0,1fr)}
  html:lang(en) .pc-text{padding:30px 24px}
  /* EN-033 · 320px: the Express card's "your USD 999 counts in full" box (pinned 72px above the card foot) lay over
     "working days" and the food-truck line. On the narrowest phones that card is a little taller (3:5), so the box
     sits below the text, as it does on every wider phone. */
  html:lang(en) .prc-card:has(.prc-credit){aspect-ratio:3/5}
}
@media (orientation:landscape) and (max-height:500px){
  /* EN-022 · Phones held sideways: the sticky top bar of the reading pages (About, Answers, legal, Press)
     plus the bottom bar took a quarter of a 390px screen. The top bar is slimmer sideways (padding 8px).
     EN-051 · It used to scroll away (position:relative), but any change of the bar's position or offset at
     the moment the phone turns makes Chrome lose the reader's place (it jumped to the top, or a screenful
     away). A padding change keeps the place. */
  html:lang(en) .lhead{padding-top:8px;padding-bottom:8px}
}

/* EN-039 · Contact on phones and tablets (6 Nov 2026, PR #44). The film waits at opacity 0 until it has
   data, so nothing large painted until about 4.4 s on slow 4G. Its exact first frame (31 KB WebP) now sits
   as the top background layer under the film: same frame, same cover/centre crop, so the fade-in shows no
   change, and the picture is there at once. English only. */
@media (max-width:1023px){
  html:lang(en) .ct-left{background:
      url('/Assets/Images/contact-left-m.webp') center/cover no-repeat,
      radial-gradient(120% 90% at 38% 32%, rgba(199,140,52,.34), transparent 55%),
      radial-gradient(90% 80% at 70% 78%, rgba(120,60,18,.30), transparent 60%),
      linear-gradient(180deg,#1c130b 0%, #140d07 55%, #0c0805 100%)}
}

/* EN-037 · Reading pages (Founders' Study, About, Answers, legal, Press: the .lhead top bar). The sticky bar was
   86% opaque, so on phones the page text read through it while scrolling. On phones and tablets it is now the
   same navy at 97%, as the checkout bar (EN-023). Desktop untouched. English only. */
@media (max-width:1023px){
  html:lang(en) .lhead{background:rgba(15,23,34,.97)}
}

/* EN-026 · /book: the floating MUSIC pill sat over the reading text on phones and tablets. While the top bar is
   showing, book.html docks it into free space in the bar (right of EN RU AR on two-row phone bars, or between the
   logo and the links); a disc-only pill where space is tight (the button keeps its aria-label). English only. */
@media (max-width:1023px), (hover:none) and (pointer:coarse) and (max-width:1366px){
  html:lang(en) #bksound.bk-fx{top:0!important;left:0!important;right:auto!important;bottom:auto!important;transform:translate(var(--bkx),var(--bky))}
  html:lang(en) #bksound.bk-dock{z-index:201}
  html:lang(en) #bksound.bk-dock-sm{padding:8px!important;gap:0!important}
  html:lang(en) #bksound.bk-dock-sm .lbl{display:none}
}

/* EN-014 / EN-027 · Sample catalogue and sample study: the fixed "<- Praxis" and EN RU AR pills floated over the
   footer links, the scroll cue and the founder line while scrolling. On phones and touch tablets they sit at the
   top of the page and scroll away with it (the sample study's language pill joins the top-right, as on the
   catalogue). English only; desktop with a mouse untouched. */
@media (max-width:1023px), (hover:none) and (pointer:coarse) and (max-width:1366px){
  html:lang(en) #homelink{position:absolute}
  html:lang(en) #ssLang{position:absolute;bottom:auto!important;top:14px;right:14px}
  html:lang(en) body:has(.bookwrap) .back,html:lang(en) body:has(.bookwrap) .langs{position:absolute}
}

/* EN-028 · Answer-page tables at 320px: three tables (fix-or-close levers, cost to close, failure rate) were 16 to 27px
   wider than the text column. At 340px and below the cells keep 5px side padding and long words may hyphenate.
   360px and wider unchanged. English only. */
@media (max-width:340px){
  html:lang(en) body:has(.lhead) :is(th,td){padding-left:5px;padding-right:5px;-webkit-hyphens:auto;hyphens:auto;overflow-wrap:break-word}
}

/* EN-039 · Checkout film on English phones: it now waits (poster first), so its box keeps the film's shape from the
   start instead of growing when the poster arrives (layout shift). */
@media (max-width:1023px), (hover:none) and (pointer:coarse) and (max-width:1366px){
  html:lang(en) #filmVid{aspect-ratio:1222/720}
}
@media (max-width:1023px), (hover:none) and (pointer:coarse) and (max-width:1366px){
  html:lang(en) .ct-vid.px-first{opacity:1}
}

/* EN-039 · Checkout backdrop on English phones and touch tablets: a 1600px copy of the midnight silk (21 KB, was the
   2560px 115 KB file; the difference at phone size is under 1 level in 255). Preloaded by checkout.html. */
@media (max-width:1023px), (hover:none) and (pointer:coarse) and (max-width:1366px){
  html:lang(en) .rite{background-image:url('/Assets/Images/midnight-silk-m.webp')}
}

/* EN-039 · Sample catalogue backdrop on English phones and touch tablets: the same 21 KB phone copy of the silk as checkout. */
@media (max-width:1023px), (hover:none) and (pointer:coarse) and (max-width:1366px){
  html:lang(en) .silk{background-image:url('/Assets/Images/midnight-silk-m.webp')}
}

/* EN-025 · Checkout summary before a study is chosen: Price and Total showed the placeholder "·", which read on a
   phone as a stray full stop. On English phones and touch tablets the placeholder is a short gold rule, the same
   hairline as the summary's dividers. The text is unchanged (screen readers, desktop). */
@media (max-width:1023px), (hover:none) and (pointer:coarse) and (max-width:1366px){
  html:lang(en) .sum .price.ph{display:inline-block;width:16px;height:1px;font-size:0;line-height:0;vertical-align:middle;align-self:center;background:rgba(199,162,76,.7)}
}

/* EN-011 · Full-screen heroes on phones held upright. 100vh is the screen with Safari's toolbars hidden, so on a real
   iPhone, with the toolbar showing on arrival, the bottom ~90px of the home hero (the last line of the intro, the
   "Where instinct meets evidence" caption and the frame's lower rule) sat behind the bottom bar. The home hero is now
   the visible screen (100svh), floor 600px so the headline always clears the top bar on the shortest phones; the
   sample study's hero likewise (its 640px floor kept). Emulated phones (no toolbar) are unchanged. English only. */
@media (max-width:1023px) and (orientation:portrait){
  html:lang(en) .hero:has(.hero-inner){height:100vh;height:100svh;min-height:600px}
  html:lang(en) body:has(#hscroll) .hero{height:100vh;height:100svh}
}

/* EN-016 · Home on English phones and touch tablets: the gilded film frame and the Investor Edition silk wait until their
   section is 600px away (index.html adds .px-near), instead of downloading with the hero. Same pictures, same place. */
@media (max-width:1023px), (hover:none) and (pointer:coarse) and (max-width:1366px){
  html:lang(en) .pc-frame:not(.px-near)::after{background-image:none}
  html:lang(en) .invband:not(.px-near)::before{background-image:none}
}

/* EN-036 · The slim footer strip (questionnaire, service agreement, 404): its inline links (praxismodel.io, Answers,
   Privacy, Cookies, Terms) were 14-15px tall in 18px lines. On phones and touch tablets the strip's lines are 44px apart
   and each link has an invisible 44px touch band; same words, same size, same colours. English only. */
@media (max-width:1023px), (hover:none) and (pointer:coarse) and (max-width:1366px){
  :is(html:lang(en),html:lang(ar)) footer:not([class]):has(> a:not([class])){line-height:44px}
  :is(html:lang(en),html:lang(ar)) footer:not([class]) > a:not([class]){position:relative}
  :is(html:lang(en),html:lang(ar)) footer:not([class]) > a:not([class])::after{content:'';position:absolute;left:-4px;right:-4px;top:-10px;bottom:-10px;height:auto;margin-top:0} /* V3-02 (AR batch): height/margin reset so the block-10 centred zone below does not shift this band 16px up; Arabic twin of the 44px lines */ /* block 8: 36px bands with 8px between wrapped lines (house rule), now that Cookie settings can wrap onto a second line */
  footer:not([class]) > a[onclick*="pxCookieReopen"]{white-space:nowrap} /* block 8: "Cookie settings" moves to the next line whole instead of breaking across two (all languages) */
}

/* Break-even calculator page: its own ".in" style (the calculator's input rows) also matched the bottom bar, whose shown
   state is the class "in", and put an 8px gap between the bar's two links, so "WhatsApp" ran 4px past a 360px screen.
   The bar has no gap on phones and touch tablets, as on every other page. English only. */
@media (max-width:1023px), (hover:none) and (pointer:coarse) and (max-width:1366px){
  html:lang(en) #pxct.in{gap:0}
}

/* Grand Design, upright phones: "Scroll to begin the descent" sat under the SOUND pill at 360px, and on a real iPhone
   (toolbar showing, the scene is 100vh tall) it sat behind the bottom bar. The cue now rests 100px above the bottom of
   the visible screen, clear of the pill and the bar. English only. */
@media (max-width:1023px) and (orientation:portrait){
  html:lang(en) #scene #cue{bottom:100px;bottom:calc(100vh - 100svh + 100px)}
}

/* Ad landing pages (lp/*) on touch tablets 861-1366px: the round WhatsApp button floated over the ends of the list lines.
   Touch tablets now get the same bottom bar as phones (Book a free consultation + WhatsApp, after the hero), and no
   floating button. Desktop with a mouse unchanged. English only. */
@media (hover:none) and (pointer:coarse) and (min-width:861px) and (max-width:1366px){
  html:lang(en) .lp-wafloat{display:none!important}
  html:lang(en) body:has(.lp-bar){padding-bottom:calc(72px + env(safe-area-inset-bottom))}
  html:lang(en) .lp-bar{gap:8px;padding:8px 12px calc(8px + env(safe-area-inset-bottom))}
  html:lang(en) body.lp-past .lp-bar{display:flex}
  html:lang(en) .lp-bar .lp-cta{flex:0 0 calc(75% - 4px);min-height:48px;padding:0 8px;display:flex;align-items:center;justify-content:center;font-size:15px}
  html:lang(en) .lp-wabar{flex:1 1 auto;min-height:48px}
}

/* Sample study on English phones (820px and under, panels stacked): the story panels' pictures (about 1.2 MB) wait until
   their panel is 800px away (sample-study/index.html adds .px-near). Same pictures, same place. */
@media (max-width:820px){
  html:lang(en) #hscroll .hpanel:not(.px-near),html:lang(en) #hscroll .lead:not(.px-near){background-image:none!important}
}
/* EN-041 · Late web fonts on slow phones (6 Nov 2026, PR #44). Fraunces and Inter arrive about 1.7 s after the first
   paint on slow 4G; the phone's own serif and sans are wider or narrower, so the headline and lead re-wrapped and the
   page jumped (CLS 0.10-0.18). These fallback faces are the phone's system fonts scaled to Fraunces and Inter's measured
   widths and line metrics (measured on the pages' own text), so the swap lands on the same lines. Android: Noto Serif /
   Roboto; iPhone: Times / Helvetica (Liberation = their metric clones). Latin range only, so Arabic and Cyrillic text
   falls through exactly as before. Phones and touch tablets only: desktop has no such family, so its stacks are
   unchanged. The stacks name them on the English pages ('Fraunces','Fraunces fb','Fraunces fbi',serif). */
@media (max-width:1023px), (hover:none) and (pointer:coarse){
  @font-face{font-family:'Fraunces fb';src:local('Noto Serif Regular'),local('NotoSerif-Regular'),local('Noto Serif'),local('NotoSerif');font-weight:100 900;size-adjust:97.5%;ascent-override:100.3%;descent-override:26.2%;line-gap-override:0%;
    unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
  @font-face{font-family:'Fraunces fbi';src:local('Times New Roman'),local('TimesNewRomanPSMT'),local('Times'),local('Times-Roman'),local('Liberation Serif'),local('LiberationSerif');font-weight:100 900;size-adjust:113%;ascent-override:86.5%;descent-override:22.6%;line-gap-override:0%;
    unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
  @font-face{font-family:'Inter fb';src:local('Roboto'),local('Roboto-Regular'),local('Roboto Regular');font-weight:100 900;size-adjust:105%;ascent-override:92.3%;descent-override:23%;line-gap-override:0%;
    unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
  @font-face{font-family:'Inter fbi';src:local('Helvetica'),local('Helvetica Neue'),local('HelveticaNeue'),local('Arial'),local('ArialMT'),local('Liberation Sans'),local('LiberationSans');font-weight:100 900;size-adjust:105.3%;ascent-override:92%;descent-override:23%;line-gap-override:0%;
    unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
}

/* EN-056 · Reduced motion on phones and touch tablets (6 Nov 2026, PR #44). A visitor who asks the phone for
   less motion still got the endless loops: the sample study's sliding marquee band, Grand Design's drifting
   sky, mist and falling cue dot, Contact's flickering ember glow and the homepage's pulsing hint on the
   process nodes. They now hold still; everything else is unchanged. English only. */
@media (prefers-reduced-motion:reduce) and (max-width:1023px),(prefers-reduced-motion:reduce) and (max-width:1366px) and (hover:none) and (pointer:coarse){
  html:lang(en) .mtrack,html:lang(en) #sky,html:lang(en) .mist,html:lang(en) #cue .dot,
  html:lang(en) .ct-left .emberglow,html:lang(en) .node-pill::after{animation:none !important}
}

/* block 10 (V2-04), all languages, phones and touch tablets: invisible touch zones on the small links the verifier measured
   (the visible text and boxes are unchanged; a zone is a transparent ::after centred on the link) */
@media (max-width:1023px), (hover:none) and (pointer:coarse) and (max-width:1366px){
  .top > a.home, header.topbar > .logo, header.topbar .tnav a, .final a.keepbook, .plate2 a.cta2, .langs > button,
  .pxf-grid a, footer:not([class]) > a, footer:not([class]) .uf-slim-reach a, .lp > a:only-child, p > a[href="/#pricing"]:only-child{position:relative}
  .top > a.home::after, header.topbar > .logo::after, header.topbar .tnav a::after, .final a.keepbook::after, .plate2 a.cta2::after, .langs > button::after,
  .pxf-grid a::after, footer:not([class]) > a::after, footer:not([class]) .uf-slim-reach a::after, p > a[href="/#pricing"]:only-child::after{content:'';position:absolute;left:-4px;right:-4px;top:50%;height:44px;margin-top:-22px}
  /* lists of single links stacked closer than 44px (press "elsewhere", questionnaire footer rows): the zone fills the row, 8px apart */
  .pxf-grid a::after{height:36px;margin-top:-18px}
  article ul > li > a:only-child, main.article ul > li > a:only-child{position:relative}
  article ul > li > a:only-child::after, main.article ul > li > a:only-child::after{content:'';position:absolute;left:-4px;right:-4px;top:50%;height:36px;margin-top:-18px}
}

/* ============================================================
   AR mobile sweep, phase 2 (Nov 2026, branch mobile-ar-2026-11). Arabic twins of the English phase-1 rules
   above (html:lang(ar)), generated from them and mirrored where a rule places something on one side:
   the docked chat sits at the bar's right end in Arabic, the checkout chat beside the language pills on the
   left, the sample study language pill top-left. Phones and touch tablets only; desktop untouched.
   Left out on purpose: EN-026 (/book music pill docking: its script stays English-only). See AR-LEDGER.md.
   ============================================================ */
@media (min-width:768px) and (max-width:1366px) and (hover:none) and (pointer:coarse){
  html:lang(ar) .lhead .logo,html:lang(ar) .lhead .backlink,html:lang(ar) .ncell .logo,html:lang(ar) .pf-nav a,html:lang(ar) .pf-contact a:not(.px-sf):not(.px-wa-foot),html:lang(ar) .af-nav a,html:lang(ar) .fcol a:not(.px-sf):not(.px-wa-foot):not(.px-book),html:lang(ar) .pxf-row a:not(.px-sf):not(.px-wa-foot):not(.px-book),html:lang(ar) .pf-legal a,html:lang(ar) .af-legal a,html:lang(ar) .flegal a,html:lang(ar) .pxf-legal a,html:lang(ar) .pf-mail,html:lang(ar) .af-mail,html:lang(ar) .pxf-mail,html:lang(ar) .dcol a.big,html:lang(ar) .ib-quiet,html:lang(ar) .px-ck-btns ~ * a,html:lang(ar) .cookie p a,html:lang(ar) .px-ar p a,html:lang(ar) .show p a{position:relative}
  html:lang(ar) .lhead .logo::after,html:lang(ar) .ncell .logo::after{content:'';position:absolute;left:0;right:0;top:-8px;bottom:-8px}
  html:lang(ar) .lhead .backlink::after{content:'';position:absolute;left:-10px;right:-10px;top:-12px;bottom:-12px}
  html:lang(ar) .pf-nav a::after,html:lang(ar) .pf-contact a:not(.px-sf):not(.px-wa-foot)::after,html:lang(ar) .af-nav a::after,html:lang(ar) .fcol a:not(.px-sf):not(.px-wa-foot):not(.px-book)::after,html:lang(ar) .pxf-row a:not(.px-sf):not(.px-wa-foot):not(.px-book)::after,html:lang(ar) .pf-mail::after,html:lang(ar) .af-mail::after,html:lang(ar) .pxf-mail::after,html:lang(ar) .dcol a.big::after,html:lang(ar) .ib-quiet::after{content:'';position:absolute;left:0;right:0;top:-10px;bottom:-10px}
  html:lang(ar) .pf-legal a::after,html:lang(ar) .af-legal a::after,html:lang(ar) .flegal a::after,html:lang(ar) .pxf-legal a::after{content:'';position:absolute;left:-6px;right:-6px;top:-11px;bottom:-11px}
  html:lang(ar) .prc-talk{padding-top:11px;padding-bottom:11px;margin-top:-11px;margin-bottom:-11px}
  html:lang(ar) .px-soc-foot a svg,html:lang(ar) .px-wa-foot svg{width:44px !important;height:44px !important}
  html:lang(ar) .px-ck-btns button{min-height:44px}
  html:lang(ar) .px-ck-btns ~ * a::after,html:lang(ar) .cookie p a::after,html:lang(ar) .px-ar p a::after,html:lang(ar) .show p a::after{content:'';position:absolute;left:-4px;right:-4px;top:-16px;bottom:-16px}
  html:lang(ar) form .field input:not([type=checkbox]):not([type=radio]):not([type=range]),html:lang(ar) form .field select,html:lang(ar) form .field textarea{min-height:44px}
  html:lang(ar) .pf-nav,html:lang(ar) .pf-contact{gap:18px}
  html:lang(ar) .af-nav{gap:14px}
  html:lang(ar) .pf-nav a::after,html:lang(ar) .pf-contact a:not(.px-sf):not(.px-wa-foot)::after{top:-9px;bottom:-9px}
  html:lang(ar) .af-nav a::after{top:-7px;bottom:-7px}
  html:lang(ar) .pf-line a,html:lang(ar) .qa-title,html:lang(ar) .lp-end a,html:lang(ar) .ab-x,html:lang(ar) .ab-speed{position:relative}
  html:lang(ar) .pf-line a::after,html:lang(ar) .lp-end a::after{content:'';position:absolute;left:-4px;right:-4px;top:-13px;bottom:-13px}
  html:lang(ar) .qa-title::after{content:'';position:absolute;left:0;right:0;top:-10px;bottom:-10px}
  html:lang(ar) .ab-x::after,html:lang(ar) .ab-speed::after{content:'';position:absolute;left:50%;top:50%;width:44px;height:44px;transform:translate(-50%,-50%)}
  html:lang(ar) .brand,html:lang(ar) .langs a,html:lang(ar) .chips .chip{position:relative}
  html:lang(ar) .brand::after{content:'';position:absolute;left:0;right:0;top:-12px;bottom:-12px}
  html:lang(ar) .langs a::after{content:'';position:absolute;left:-4px;right:-4px;top:-9px;bottom:-9px}
  html:lang(ar) .chips .chip::after{content:'';position:absolute;left:0;right:0;top:-3px;bottom:-3px}
}
@media (max-width:1023px),(min-width:1024px) and (max-width:1366px) and (hover:none) and (pointer:coarse){
  html:lang(ar) body:has(#ctaWidget) #pxct{left:0 !important;right:56px !important;width:auto !important}
  html:lang(ar) body:has(#ctaWidget) #pxct .pxct-wa{flex:0 0 auto}
  html:lang(ar) body:has(#pxct) .cta-widget:not(.open){left:auto !important;right:0 !important;bottom:0 !important;opacity:1 !important;visibility:visible !important;pointer-events:auto !important;transition:transform .7s cubic-bezier(.2,.7,.2,1) !important}
  html:lang(ar) body:has(#pxct) .cta-widget:not(.open) .cta-pill{box-sizing:border-box;width:56px;height:calc(49px + env(safe-area-inset-bottom));padding:0 0 env(safe-area-inset-bottom);gap:0;justify-content:center;border:0;border-top:1px solid rgba(199,162,76,.55);border-left:1px solid rgba(199,162,76,.25);border-radius:0;background:rgba(15,23,34,.96);box-shadow:0 -10px 30px rgba(0,0,0,.35);transform:none}
  html:lang(ar) body:has(#pxct) .cta-widget:not(.open) .cta-pill-label{display:none}
  html:lang(ar) body:has(#pxct) .cta-widget:not(.open) .cta-dots{width:28px;height:28px}
  html:lang(ar) body:has(#pxct:not(.in)) .cta-widget:not(.open),
  html:lang(ar).who-lock body:has(#pxct) .cta-widget:not(.open),
  html:lang(ar) body.locked:has(#pxct) .cta-widget:not(.open),
  html:lang(ar) body.pxct-typing:has(#pxct) .cta-widget:not(.open),
  html:lang(ar) body:has(#pxct):has(.mmenu.open) .cta-widget:not(.open){transform:translateY(110%);pointer-events:none !important}
  html:lang(ar) .more li{margin-bottom:20px}
  html:lang(ar) .more li{position:relative} /* AR: the band hangs on the row, not the link: an Arabic link that wraps made WebKit's band reach past the screen edge */
  html:lang(ar) .more li a::after{content:'';position:absolute;left:0;right:0;top:-13px;bottom:-12px}
  html:lang(ar) .cta-input input{font-size:16px}
  html:lang(ar) .cta-input button{position:relative}
  html:lang(ar) .cta-input button::after{content:'';position:absolute;inset:-7px}
  html:lang(ar) .hero .caption{bottom:calc(40px + 49px + env(safe-area-inset-bottom))}
  html:lang(ar) .hero .hero-frame{bottom:calc(20px + 49px + env(safe-area-inset-bottom))}
  html:lang(ar) #cookieBar:not(.show),html:lang(ar) #pxCookieBar:not(.show){visibility:hidden;transition:transform .7s cubic-bezier(.16,1,.3,1),visibility 0s .7s}
  html:lang(ar) #cookieBar.show,html:lang(ar) #pxCookieBar.show{visibility:visible}
  html:lang(ar) body:has(#cookieBar.show) #pxct-sp,html:lang(ar) body:has(#pxCookieBar.show) #pxct-sp{height:calc(49px + 96px + env(safe-area-inset-bottom))}
  html:lang(ar) input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=submit]):not([type=button]),
  html:lang(ar) select,html:lang(ar) textarea{font-size:16px !important}
  html:lang(ar) body:has(#thread) .field :is(input,select,textarea),html:lang(ar) body:has(#thread) .ferr{scroll-margin-top:76px}
  html:lang(ar) body:has(#thread) .top{background:rgba(8,13,20,.97);border-bottom:1px solid rgba(199,162,76,.16)}
  html:lang(ar) body:has(#thread) .cta-widget:not(.open){top:8px;bottom:auto !important;right:auto !important;left:172px;z-index:60;opacity:1 !important;visibility:visible !important;pointer-events:auto !important}
  html:lang(ar) body:has(#thread) .cta-widget:not(.open) .cta-pill{width:44px;height:44px;padding:0;gap:0;justify-content:center;background:transparent;border:0;box-shadow:none;transform:none}
  html:lang(ar) body:has(#thread) .cta-widget:not(.open) .cta-pill-label{display:none}
  html:lang(ar) body:has(#thread) .cta-widget:not(.open) .cta-dots{width:30px;height:30px}
  html:lang(ar) body:has(#thread) .m-title{text-wrap:balance}
  html:lang(ar) #m3 .chk{position:relative;flex-shrink:0}
  html:lang(ar) #m3 .chk::after{content:'';position:absolute;inset:-12px}
  html:lang(ar) .field .whywa::after{content:'';position:absolute;inset:-15px}
  html:lang(ar) #sitesRow button{position:relative}
  html:lang(ar) #sitesRow button::after{content:'';position:absolute;inset:-9px -12px}
  html:lang(ar) #m1 .nextbtn,html:lang(ar) #m2 .nextbtn,html:lang(ar) #m5 .nextbtn{min-height:44px}
  html:lang(ar) .talkfirst,html:lang(ar) .quietline a,html:lang(ar) .gulfline a,html:lang(ar) #agreeTxt a,html:lang(ar) #m3 > div:last-child a{position:relative}
  html:lang(ar) .talkfirst::after,html:lang(ar) .quietline a::after,html:lang(ar) .gulfline a::after,html:lang(ar) #agreeTxt a::after,html:lang(ar) #m3 > div:last-child a::after{content:'';position:absolute;left:-4px;right:-4px;top:-16px;bottom:-16px}
  html:lang(ar) #m3 > div:last-child a{display:inline-block;min-width:44px;text-align:center}
  html:lang(ar):has(#pxct){scroll-padding-bottom:calc(49px + 16px + env(safe-area-inset-bottom))}
  html:lang(ar):has(.lhead){scroll-padding-top:84px}
  html:lang(ar):has(#thread){scroll-padding-top:84px}
  html:lang(ar):has(.lp-bar){scroll-padding-bottom:calc(65px + 16px + env(safe-area-inset-bottom))}
  html:lang(ar):has(#mbar){scroll-padding-bottom:calc(120px + env(safe-area-inset-bottom))}
  html:lang(ar) #mmenu{overscroll-behavior:contain}
  html:lang(ar) .cta-close{position:relative}
  html:lang(ar) .cta-close::after{content:'';position:absolute;inset:-7px}
}
@media (max-width:560px){
  html:lang(ar) body:has(#thread) .cta-widget:not(.open){top:4px;left:140px}
}
@media (max-width:359px){
  html:lang(ar) .fg .fig{white-space:normal;overflow:visible;text-overflow:clip}
  html:lang(ar) body:has(#thread) .brand{letter-spacing:.12em;font-size:12px}
  html:lang(ar) body:has(#thread) .langs{gap:4px}
  html:lang(ar) body:has(#thread) .langs a{padding:4px 8px}
  html:lang(ar) body:has(#thread) .cta-widget:not(.open){left:133px}
  html:lang(ar) nav#nav{padding-left:12px;padding-right:12px}
  html:lang(ar) nav#nav .nleft .ncell{padding:0 12px}
  html:lang(ar) #pxct a{gap:6px;padding:0 6px}
  html:lang(ar) #pxct a span{letter-spacing:.06em}
  html:lang(ar) .proc .wrap{padding-left:20px;padding-right:20px}
  html:lang(ar) .proc-card{grid-template-columns:minmax(0,1fr)}
  html:lang(ar) .pc-text{padding:30px 24px}
  html:lang(ar) .prc-card:has(.prc-credit){aspect-ratio:3/5}
}
@media (max-width:767px){
  html:lang(ar) body:has(#cookieBar.show) #pxct-sp,html:lang(ar) body:has(#pxCookieBar.show) #pxct-sp{height:calc(49px + 168px + env(safe-area-inset-bottom))}
}
@media (max-width:479px){
  html:lang(ar) body:has(#ctaWidget) #pxct .pxct-book svg{display:none}
  html:lang(ar) body:has(#ctaWidget) #pxct .pxct-book span{white-space:normal;line-height:1.35;text-align:center}
  html:lang(ar) body:has(#ctaWidget) #pxct a{padding:0 8px}
}
@media (orientation:landscape) and (max-height:500px){
  html:lang(ar) .lhead{padding-top:8px;padding-bottom:8px}
}
@media (max-width:1023px){
  html:lang(ar) .ct-left{background:
      url('/Assets/Images/contact-left-m.webp') center/cover no-repeat,
      radial-gradient(120% 90% at 38% 32%, rgba(199,140,52,.34), transparent 55%),
      radial-gradient(90% 80% at 70% 78%, rgba(120,60,18,.30), transparent 60%),
      linear-gradient(180deg,#1c130b 0%, #140d07 55%, #0c0805 100%)}
  html:lang(ar) .lhead{background:rgba(15,23,34,.97)}
}
@media (max-width:1023px), (hover:none) and (pointer:coarse) and (max-width:1366px){
  html:lang(ar) #homelink{position:absolute}
  html:lang(ar) #ssLang{position:absolute;bottom:auto!important;top:14px;right:auto;left:14px}
  html:lang(ar) body:has(.bookwrap) .back,html:lang(ar) body:has(.bookwrap) .langs{position:absolute}
  html:lang(ar) #filmVid{aspect-ratio:1222/720}
  html:lang(ar) .ct-vid.px-first{opacity:1}
  html:lang(ar) .rite{background-image:url('/Assets/Images/midnight-silk-m.webp')}
  html:lang(ar) .silk{background-image:url('/Assets/Images/midnight-silk-m.webp')}
  html:lang(ar) .sum .price.ph{display:inline-block;width:16px;height:1px;font-size:0;line-height:0;vertical-align:middle;align-self:center;background:rgba(199,162,76,.7)}
  html:lang(ar) .pc-frame:not(.px-near)::after{background-image:none}
  html:lang(ar) .invband:not(.px-near)::before{background-image:none}
  html:lang(ar) #pxct.in{gap:0}
}
@media (max-width:340px){
  html:lang(ar) body:has(.lhead) :is(th,td){padding-left:5px;padding-right:5px;-webkit-hyphens:auto;hyphens:auto;overflow-wrap:break-word}
}
@media (max-width:1023px) and (orientation:portrait){
  html:lang(ar) .hero:has(.hero-inner){height:100vh;height:100svh;min-height:600px}
  html:lang(ar) body:has(#hscroll) .hero{height:100vh;height:100svh}
  html:lang(ar) #scene #cue{bottom:100px;bottom:calc(100vh - 100svh + 100px)}
}
@media (hover:none) and (pointer:coarse) and (min-width:861px) and (max-width:1366px){
  html:lang(ar) .lp-wafloat{display:none!important}
  html:lang(ar) body:has(.lp-bar){padding-bottom:calc(72px + env(safe-area-inset-bottom))}
  html:lang(ar) .lp-bar{gap:8px;padding:8px 12px calc(8px + env(safe-area-inset-bottom))}
  html:lang(ar) body.lp-past .lp-bar{display:flex}
  html:lang(ar) .lp-bar .lp-cta{flex:0 0 calc(75% - 4px);min-height:48px;padding:0 8px;display:flex;align-items:center;justify-content:center;font-size:15px}
  html:lang(ar) .lp-wabar{flex:1 1 auto;min-height:48px}
}
@media (max-width:820px){
  html:lang(ar) #hscroll .hpanel:not(.px-near),html:lang(ar) #hscroll .lead:not(.px-near){background-image:none!important}
}
@media (prefers-reduced-motion:reduce) and (max-width:1023px),(prefers-reduced-motion:reduce) and (max-width:1366px) and (hover:none) and (pointer:coarse){
  html:lang(ar) .mtrack,html:lang(ar) #sky,html:lang(ar) .mist,html:lang(ar) #cue .dot,
  html:lang(ar) .ct-left .emberglow,html:lang(ar) .node-pill::after{animation:none !important}
}
/* AR-001 · Arabic phones: rtl.css pulls the logo cluster 20px to the right (margin-right:-20px, the desktop join with the
   centre links), but on phones the cluster stands alone, as in English (margin 0 under 1081px): at 320px it ran 8px off
   the screen and the side gutters were lopsided at every width. */
@media (max-width:1023px),(hover:none) and (pointer:coarse) and (max-width:1080px){
  html[dir="rtl"]:lang(ar) .nleft{margin-right:0}
}
/* AR-002 · Arabic headlines on phones: a single word was left alone on the last line (B3), as English had before its
   launch sweep; the lines are balanced as in English. */
@media (max-width:1023px),(hover:none) and (pointer:coarse) and (max-width:1366px){
  html:lang(ar) :is(h1,h2,h3){text-wrap:balance}
}
/* AR-003 · /book in Arabic: the floating MUSIC pill sat over the reading text on phones and tablets; as in English (EN-026)
   it now docks into free room in the top bar while the bar shows (left of the logo on two-line phone bars). book.html. */
@media (max-width:1023px), (hover:none) and (pointer:coarse) and (max-width:1366px){
  html:lang(ar) #bksound.bk-fx{top:0!important;left:0!important;right:auto!important;bottom:auto!important;transform:translate(var(--bkx),var(--bky))}
  html:lang(ar) #bksound.bk-dock{z-index:201}
  html:lang(ar) #bksound.bk-dock-sm{padding:8px!important;gap:0!important}
  html:lang(ar) #bksound.bk-dock-sm .lbl{display:none}
}
/* AR-004 · Arabic article pages: the "Read in English · Читать по-русски" line under the title had 13px-tall links; each
   gets an invisible 44px touch band (same words, same place), as the reading-page links in English. */
@media (max-width:1023px), (hover:none) and (pointer:coarse) and (max-width:1366px){
  html:lang(ar) .langswitch a{position:relative}
  html:lang(ar) .langswitch a::after{content:'';position:absolute;left:-4px;right:-4px;top:-16px;bottom:-16px}
}
/* AR-010 · Arabic article lists of single links ("More answers", sources): the shared 36-44px touch band hung on the link
   itself; when an Arabic link wraps, WebKit stretched that band past the screen edge (the page could slide 2-52px
   sideways at 320px). In Arabic the band hangs on the row instead: same height, full row, nothing moves. */
@media (max-width:1023px), (hover:none) and (pointer:coarse) and (max-width:1366px){
  html:lang(ar) .more li > a,html:lang(ar) :is(article,main.article) ul > li > a:only-child{position:static!important}
  html:lang(ar) :is(article,main.article) ul > li:has(> a:only-child){position:relative}
}
/* AV1-07 · Arabic data tables on phones: Arabic words are short enough that a 4 or 5 column table always "fit" the
   phone width, so cells fell to one word per line. As in English, the table now keeps a readable width inside its
   sideways-scrolling box (.tw) and the box shows a soft gold edge on the side that still has columns to scroll to.
   The benchmarks and KAFD pages mark their 3-column data tables .tw-data for the same treatment. Latin names in the
   cells were already isolated (span.ltr, unicode-bidi:isolate); the Arabic comma after them sits on the reading side. */
@media (max-width:767px){
  html:lang(ar) .tw > table:has(tr > :nth-child(5)){min-width:600px}
  html:lang(ar) .tw > table:has(tr > :nth-child(4)):not(:has(tr > :nth-child(5))){min-width:500px}
  html:lang(ar) .tw.tw-data > table:not(:has(tr > :nth-child(4))){min-width:440px}
  html:lang(ar) .tw:is(.tw-data,:has(> table tr > :nth-child(4))){
    background:linear-gradient(to left,var(--navy,#0F1722) 35%,rgba(15,23,34,0)) right center/36px 100% no-repeat local,
      linear-gradient(to right,var(--navy,#0F1722) 35%,rgba(15,23,34,0)) left center/36px 100% no-repeat local,
      radial-gradient(farthest-side at 100% 50%,rgba(199,162,76,.5),rgba(199,162,76,0)) right center/14px 100% no-repeat scroll,
      radial-gradient(farthest-side at 0 50%,rgba(199,162,76,.5),rgba(199,162,76,0)) left center/14px 100% no-repeat scroll}
}
/* AV1-16 · Arabic footer link rows were 36px tall with an 8px gap; each link gets an invisible band of 4px above and
   below, so every row is a 44px target and neighbouring bands meet without overlapping. Nothing visible moves.
   (The checkout format chips already carry a 3px band: 38 + 6 = 44px.) */
@media (max-width:1023px), (hover:none) and (pointer:coarse) and (max-width:1366px){
  html:lang(ar) footer.uf li > a{position:relative}
  html:lang(ar) footer.uf li > a::after{content:'';position:absolute;left:0;right:0;top:-4px;bottom:-4px}
}
/* AV1-04/06 · Arabic web-font swap. While Tajawal (17 KB a weight) is still on its way, phones draw Arabic in the
   system face and re-flow when Tajawal lands (the .lead shift on the /ar/ articles). As the English 'Inter fb' /
   'Fraunces fb' faces above, local faces stand in for Tajawal with its width and line metrics, one per weight band
   (Tajawal's width against the phone's Regular and Bold files changes with weight), so the swap no longer moves the
   text. Android: Noto Naskh Arabic ('Tajawal fb'), else Noto Sans Arabic ('Tajawal fbs'); ratios measured on one
   Arabic paragraph per weight. Arabic range only, so Latin keeps its own faces. Phones and touch tablets only: the
   stacks name 'Tajawal fb' and 'Tajawal fbs', which do not exist on desktop, so desktop is unchanged. */
@media (max-width:1023px), (hover:none) and (pointer:coarse){
  @font-face{font-family:'Tajawal fb';src:local('Noto Naskh Arabic UI'),local('NotoNaskhArabicUI-Regular'),local('Noto Naskh Arabic'),local('NotoNaskhArabic-Regular');font-weight:100 349;size-adjust:111.8%;ascent-override:57.5%;descent-override:31.9%;line-gap-override:17.9%;unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF}
  @font-face{font-family:'Tajawal fb';src:local('Noto Naskh Arabic UI'),local('NotoNaskhArabicUI-Regular'),local('Noto Naskh Arabic'),local('NotoNaskhArabic-Regular');font-weight:350 449;size-adjust:115.6%;ascent-override:55.6%;descent-override:30.9%;line-gap-override:17.3%;unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF}
  @font-face{font-family:'Tajawal fb';src:local('Noto Naskh Arabic UI'),local('NotoNaskhArabicUI-Regular'),local('Noto Naskh Arabic'),local('NotoNaskhArabic-Regular');font-weight:450 599;size-adjust:118.1%;ascent-override:54.4%;descent-override:30.2%;line-gap-override:16.9%;unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF}
  @font-face{font-family:'Tajawal fb';src:local('Noto Naskh Arabic UI Bold'),local('NotoNaskhArabicUI-Bold'),local('Noto Naskh Arabic Bold'),local('NotoNaskhArabic-Bold'),local('Noto Naskh Arabic UI'),local('NotoNaskhArabicUI-Regular'),local('Noto Naskh Arabic'),local('NotoNaskhArabic-Regular');font-weight:600 900;size-adjust:118.9%;ascent-override:54.1%;descent-override:30.0%;line-gap-override:16.8%;unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF}
  @font-face{font-family:'Tajawal fbs';src:local('Noto Sans Arabic UI'),local('NotoSansArabicUI-Regular'),local('Noto Sans Arabic'),local('NotoSansArabic-Regular');font-weight:100 349;size-adjust:100.8%;ascent-override:63.8%;descent-override:35.4%;line-gap-override:19.8%;unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF}
  @font-face{font-family:'Tajawal fbs';src:local('Noto Sans Arabic UI'),local('NotoSansArabicUI-Regular'),local('Noto Sans Arabic'),local('NotoSansArabic-Regular');font-weight:350 449;size-adjust:104.2%;ascent-override:61.7%;descent-override:34.3%;line-gap-override:19.2%;unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF}
  @font-face{font-family:'Tajawal fbs';src:local('Noto Sans Arabic UI'),local('NotoSansArabicUI-Regular'),local('Noto Sans Arabic'),local('NotoSansArabic-Regular');font-weight:450 599;size-adjust:106.4%;ascent-override:60.4%;descent-override:33.6%;line-gap-override:18.8%;unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF}
  @font-face{font-family:'Tajawal fbs';src:local('Noto Sans Arabic UI Bold'),local('NotoSansArabicUI-Bold'),local('Noto Sans Arabic Bold'),local('NotoSansArabic-Bold'),local('Noto Sans Arabic UI'),local('NotoSansArabicUI-Regular'),local('Noto Sans Arabic'),local('NotoSansArabic-Regular');font-weight:600 900;size-adjust:102.3%;ascent-override:62.9%;descent-override:34.9%;line-gap-override:19.6%;unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF}
}
/* AV2-15 · Arabic checkout, step III: the "bank transfer with a numbered invoice" link is 11px of text; its invisible
   band (above) is lifted from 43 to 45px tall so the tap target clears 44px. Nothing visible moves. */
@media (max-width:1023px), (hover:none) and (pointer:coarse) and (max-width:1366px){
  html:lang(ar) .gulfline a::after{top:-17px;bottom:-17px}
}
/* AV2-03 (AR verifier round 2) · Tajawal also draws the Latin letters and the digits inside Arabic text (dates, prices,
   'Praxis Model'), so before it lands those came from Inter at another width and the paragraph re-wrapped when Tajawal
   arrived. 'Tajawal fb' now also stands in for Tajawal's Latin range with the phone's Roboto, sized to Tajawal's Latin
   (Light 87.0%, Regular 89.5%, Medium 90.3%, Bold 88.4%). Phones and touch tablets only, as above. */
@media (max-width:1023px), (hover:none) and (pointer:coarse){
  @font-face{font-family:'Tajawal fb';src:local('Roboto'),local('Roboto-Regular'),local('Roboto Regular');font-weight:100 349;size-adjust:87.0%;ascent-override:73.9%;descent-override:41.0%;line-gap-override:23.0%;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212}
  @font-face{font-family:'Tajawal fb';src:local('Roboto'),local('Roboto-Regular'),local('Roboto Regular');font-weight:350 449;size-adjust:89.5%;ascent-override:71.8%;descent-override:39.9%;line-gap-override:22.3%;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212}
  @font-face{font-family:'Tajawal fb';src:local('Roboto'),local('Roboto-Regular'),local('Roboto Regular');font-weight:450 599;size-adjust:90.3%;ascent-override:71.2%;descent-override:39.5%;line-gap-override:22.1%;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212}
  @font-face{font-family:'Tajawal fb';src:local('Roboto Bold'),local('Roboto-Bold'),local('Roboto'),local('Roboto-Regular'),local('Roboto Regular');font-weight:600 900;size-adjust:88.4%;ascent-override:72.7%;descent-override:40.4%;line-gap-override:22.6%;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212}
}