/* Phone app shell (<=767px): slim top bar + bottom tab bar replacing the dock, active tab follows the scroll. Loaded after mobile.css. Phone only.
   Everything is under html.phone-app (set by phone-shell.js), so without JS the phone keeps the plain
   mobile layout from mobile.css. Concept: D:/myasser-phone-concepts/02-app.png, screens A and D. */
.tabbar { display: none; }

@media (max-width: 767px) {
  /* The bars' heights, safe areas included. phone-shell.js overwrites them with the measured values. */
  html.phone-app {
    --phone-top-h: calc(env(safe-area-inset-top) + 57px);
    --phone-tab-h: calc(env(safe-area-inset-bottom) + 61px);
  }
  html.phone-app main > section { scroll-margin-top: var(--phone-top-h); }
  /* the page end lands above the tab bar */
  html.phone-app .footer { padding-block-end: calc(var(--phone-tab-h) + 26px); }

  /* ---------- top bar: the header, restyled as a slim app bar ---------- */
  html.phone-app .nav { top: 0; padding-inline: 0; transition: transform 0.4s var(--ease-ui), visibility 0s linear 0s; }
  html.phone-app .nav__inner {
    height: auto; max-width: none; gap: 10px;
    padding: calc(env(safe-area-inset-top) + 6px) max(var(--gutter), env(safe-area-inset-right)) 6px max(var(--gutter), env(safe-area-inset-left));
    border: 0; border-block-end: 1px solid var(--bone-08); border-radius: 0;
    background: var(--glass); box-shadow: 0 14px 30px -24px var(--shadow-deep);
  }
  html.phone-app .nav.is-scrolled .nav__inner { background: var(--glass-92); border-color: var(--bone-10); }
  html.phone-app .nav__inner::after { inset-inline: 0; }
  html.phone-app :is(.nav__links, .nav__menu, .nav__cta) { display: none; }

  html.phone-app .nav__brand { flex: 1 1 auto; min-width: 0; min-height: 44px; gap: 10px; padding: 0; }
  html.phone-app .nav__brand .avatar { width: 36px; height: 36px; box-shadow: 0 0 12px var(--ember-22); }
  html.phone-app .nav__id { display: flex; min-width: 0; gap: 4px; }
  html.phone-app .nav__name { font-size: 15px; font-stretch: 90%; line-height: 1.05; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  html.phone-app .nav__role { display: block; font-size: 9px; letter-spacing: 0.1em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  html.phone-app:lang(ar) .nav__name { font-size: 15px; line-height: 1.3; }
  html.phone-app:lang(ar) .nav__role { font-size: 11px; letter-spacing: 0; line-height: 1.3; }
  html.phone-app .nav__actions { flex: none; gap: 2px; }

  /* Preferences, compact: one round theme button showing the current mode, and a small EN | ع
     segment. Each stays a 44px touch target; only the drawn capsule is small. */
  html.phone-app .prefs { gap: 2px; padding: 0; border: 0; background: none; }
  html.phone-app .prefs__sep { display: none; }
  html.phone-app .theme-toggle { width: 44px; grid-template-columns: 1fr; }
  html.phone-app .theme-toggle svg { grid-area: 1 / 1; transition: opacity 0.35s var(--ease-ui), transform 0.5s var(--ease-out), color 0.3s; }
  html.phone-app .theme-toggle .prefs__knob,
  html.phone-app[data-theme="light"] .theme-toggle .prefs__knob { inset: 6px; width: auto; border-radius: 50%; }
  html.phone-app .theme-toggle__sun { opacity: 0; transform: rotate(-90deg) scale(0.6); }
  html.phone-app[data-theme="light"] .theme-toggle__sun { opacity: 1; transform: none; }
  html.phone-app[data-theme="light"] .theme-toggle__moon { opacity: 0; transform: rotate(90deg) scale(0.6); }
  html.phone-app .lang { width: 62px; }
  html.phone-app .lang::before {
    content: ''; position: absolute; z-index: -2; inset: 7px 0; border-radius: var(--r-pill);
    background: var(--bone-04); box-shadow: inset 0 0 0 1px var(--bone-10);
  }
  html.phone-app .lang .prefs__knob { top: 10px; bottom: 10px; inset-inline-start: 3px; width: calc(50% - 3px); }
  html.phone-app[lang="ar"] .lang .prefs__knob { inset-inline-start: 50%; }

  /* The social funnel, moved into the bar by phone-shell.js: a round button that pours its four
     stages downward from the bar, wide reach first, WhatsApp at the narrow end. */
  html.phone-app .nav .funnel { position: static; inset: auto; z-index: auto; opacity: 1; transform: none; pointer-events: auto; transition: none; }
  html.phone-app .nav .funnel__btn { width: 44px; height: 44px; background: none; border: 0; box-shadow: none; }
  html.phone-app .nav .funnel__btn::before {
    content: ''; position: absolute; inset: 6px; border-radius: 50%;
    background: var(--bone-04); box-shadow: inset 0 0 0 1px var(--bone-10); transition: box-shadow 0.3s var(--ease-ui);
  }
  html.phone-app .nav .funnel[data-open] .funnel__btn::before { box-shadow: inset 0 0 0 1px var(--ember-50), 0 0 18px var(--ember-22); }
  html.phone-app .nav .funnel__glyph { transform: scale(0.72); }
  html.phone-app .nav .funnel__list {
    inset-inline: auto; left: 50%; top: calc(100% + 14px); bottom: auto; width: min(300px, calc(100vw - 40px));
    transform: translateX(-50%) translateY(-8px); transform-origin: top;
  }
  html.phone-app .nav .funnel[data-open] .funnel__list { transform: translateX(-50%); }
  html.phone-app .nav .funnel__row a { height: 48px; }

  /* ---------- the old floating dock is gone on phones ---------- */
  /* WhatsApp lives in the Contact tab and the hero; back to top is the Home tab; the funnel is in the bar. */
  html.phone-app .mobile-dock { display: none; }

  /* ---------- bottom tab bar ---------- */
  html.phone-app .tabbar {
    position: fixed; z-index: 50; left: 0; right: 0; bottom: 0;
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: start;
    padding: 4px max(6px, env(safe-area-inset-right)) calc(4px + env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left));
    border-block-start: 1px solid var(--bone-08);
    background: var(--glass); backdrop-filter: blur(22px) saturate(1.4); -webkit-backdrop-filter: blur(22px) saturate(1.4);
    box-shadow: inset 0 1px 0 var(--rim), 0 -14px 34px -22px var(--shadow-deep);
    transition: transform 0.4s var(--ease-ui), visibility 0s linear 0s;
  }
  .tabbar__tab {
    position: relative; isolation: isolate; min-width: 0; min-height: 52px; padding-block-start: 7px;
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    color: var(--steel); font-size: 10.5px; font-weight: 600; line-height: 1.2; letter-spacing: 0.01em;
    -webkit-tap-highlight-color: transparent; touch-action: manipulation; transition: color 0.3s var(--ease-ui);
  }
  .tabbar__icon { display: block; flex: none; width: 24px; height: 24px; }
  .tabbar__label { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  :lang(ar) .tabbar__label { font-family: var(--font-ar); font-size: 11px; line-height: 1.25; }
  /* the active tab: ember, with a soft pill under its icon */
  .tabbar__tab::before {
    content: ''; position: absolute; z-index: -1; top: 4px; left: 50%; width: 54px; height: 30px; margin-left: -27px;
    border-radius: var(--r-pill); background: var(--ember-12); box-shadow: inset 0 0 0 1px var(--ember-22);
    opacity: 0; transform: scaleX(0.55); transition: opacity 0.3s var(--ease-ui), transform 0.45s var(--ease-out);
  }
  .tabbar__tab[aria-current="page"] { color: var(--ember); }
  .tabbar__tab[aria-current="page"]::before { opacity: 1; transform: none; }
  /* Contact: the conversion, always an ember pill (like the concept); its label lights when active. */
  .tabbar__tab--contact { padding-block-start: 4px; color: var(--bone); }
  .tabbar__tab--contact::before { display: none; }
  .tabbar__fab {
    display: grid; place-items: center; width: 50px; height: 30px; border-radius: var(--r-pill);
    background: var(--ember-fill); color: var(--on-ember); box-shadow: 0 6px 18px -6px var(--ember-70);
    transition: box-shadow 0.3s var(--ease-ui), transform 0.3s var(--ease-ui);
  }
  .tabbar__fab .tabbar__icon { width: 19px; height: 19px; }
  [dir="rtl"] .tabbar__fab .tabbar__icon { transform: scaleX(-1); }
  .tabbar__tab--contact[aria-current="page"] .tabbar__fab { box-shadow: 0 0 0 3px var(--ember-22), 0 8px 22px -6px var(--ember-70); }
  .tabbar__tab:active .tabbar__fab { transform: scale(0.94); }
  .tabbar__tab:focus-visible { outline-offset: -4px; border-radius: 14px; }

  /* ---------- a full-screen story is open (phone-stories.js): both bars step aside ---------- */
  html.phone-app.phone-story-open .nav { transform: translateY(-110%); visibility: hidden; transition: transform 0.35s var(--ease-ui), visibility 0s linear 0.35s; }
  html.phone-app.phone-story-open .tabbar { transform: translateY(110%); visibility: hidden; transition: transform 0.35s var(--ease-ui), visibility 0s linear 0.35s; }

  /* ---------- hero: the app's Home (concept screen A) ---------- */
  /* The photo is a card under the bar with BUSINESS. / MARKETING. inked into its foot; then the lead,
     the two buttons side by side and the moving logos, so the numbers strip starts in the first screen. */
  html.phone-app .hero {
    --hero-photo-h: clamp(300px, calc(100svh - 470px), 420px);
    padding-block: calc(var(--phone-top-h) + 10px) 22px;
  }
  html.phone-app .hero__media { width: 100%; margin-inline: 0; border-radius: 28px; overflow: hidden; isolation: isolate; box-shadow: 0 0 0 1px var(--rim), 0 24px 50px -20px var(--shadow-deep); }
  html.phone-app .hero__media::after { background: linear-gradient(180deg, var(--ink-00) 30%, var(--ink-72) 66%, var(--ink) 100%); }
  html.phone-app .hero__img { height: var(--hero-photo-h); border-radius: 28px; object-position: 50% 12%; box-shadow: none; }
  /* the lower-third (main, 2026-10-05) rides the card's top corner, like a live tag; the name is in the bar */
  html.phone-app .hero__badge { top: 14px; bottom: auto; inset-inline-start: 14px; padding: 6px 12px 6px 10px; gap: 8px; border-radius: 11px; }
  html.phone-app[dir="rtl"] .hero__badge { padding: 6px 10px 6px 12px; }
  html.phone-app .lockup { margin: 0; padding: 0 18px 18px; gap: 6px; }
  html.phone-app .lockup__line--think .lockup__big { font-size: 19vw; }
  html.phone-app .lockup__line--manage .lockup__big { font-size: 11vw; }
  /* Arabic: one edge from the right, the reading start (flex-end is the LEFT in an RTL column) */
  html.phone-app:lang(ar) .lockup, html.phone-app:lang(ar) .lockup__line { align-items: flex-start; }
  html.phone-app .hero__sub { margin-block-start: 16px; font-size: 14.5px; line-height: 1.5; }
  html.phone-app:lang(ar) .hero__sub { line-height: 1.75; }
  html.phone-app .hero__ctas { flex-wrap: nowrap; margin-block-start: 14px; gap: 8px; }
  html.phone-app .hero__ctas .btn { flex: 1 1 0; height: 50px; padding-inline: 12px; justify-content: center; font-size: 15px; }
  html.phone-app .hero__ctas .btn__arrow { display: none; }
  html.phone-app .hero__trust { margin-block-start: 18px; gap: 8px; }

  /* Light theme: the photo card is an ink island, so the words stay white on the photo as in dark. */
  html.phone-app[data-theme="light"] :is(.hero__media, .lockup) {
    --ink: var(--night-ink);
    --ink-72: var(--night-ink-72);
    --ink-00: var(--night-ink-00);
    --bone: var(--night-bone);
    --steel: var(--night-steel);
    --ember-display: var(--night-ember);
    --rim: var(--night-bone-06);
  }
  /* (colour inherits as a computed value from the light page, so the island restates it) */
  html.phone-app[data-theme="light"] .lockup { color: var(--bone); }
}

@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  html.phone-app .nav, html.phone-app .tabbar, .tabbar__tab, .tabbar__tab::before, .tabbar__fab { transition: none; }
}

/* Speed on phones (owner 2026-10-05: "the phone version is slow"). A backdrop blur re-blurs everything that
   scrolls under it, every frame - on the two fixed bars that is the whole page. Phones get near-opaque
   bars instead, and no blur anywhere (the hero lower-third, ghost buttons and chips get a solid tint). */
@media (max-width: 767px) {
  *, *::before, *::after { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  .nav__inner, html.phone-app .nav__inner, html.phone-app .nav.is-scrolled .nav__inner, html.phone-app .tabbar, .mobile-dock { background: var(--ink-92); }
  .hero__badge { background: color-mix(in srgb, var(--night-ink) 84%, transparent); }
}