/* Taafi – Team page (/team). Presentation only: content lives in the sections.
   Motion only behind prefers-reduced-motion: no-preference. */

/* ============ Hero: compact, introduces the people ============ */
#team-hero {
  position: relative;
  isolation: isolate;
  padding-block: clamp(2.75rem, 6vw, 4.5rem) clamp(2rem, 4vw, 3rem) !important;
}
/* Soft edges (v13): the green tint sits on its own layer and fades out before the sides and the
   bottom of the hero, so the hero melts into the page instead of ending on the edge of a tinted
   box. The layer reaches 100px up into the hero's transparent top border (64-100px), as the
   tint did before, and the glow centres stay where they were. */
#team-hero::before {
  content: "";
  position: absolute;
  inset: -100px 0 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(60% 90% at 85% 100px, color-mix(in oklab, var(--primary) 9%, transparent) 0%, transparent 70%),
    radial-gradient(50% 80% at 10% 100%, color-mix(in oklab, var(--primary) 6%, transparent) 0%, transparent 70%);
  -webkit-mask-image: linear-gradient(to bottom, #000 45%, transparent 100%), linear-gradient(to right, transparent 0, #000 14%, #000 86%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to bottom, #000 45%, transparent 100%), linear-gradient(to right, transparent 0, #000 14%, #000 86%, transparent 100%);
  mask-composite: intersect;
}
#team-hero [data-marketing-rich-text] > p:first-child {
  display: table;
  margin-inline: auto;
  padding: 0.3rem 0.9rem;
  border-radius: 999px;
  background: color-mix(in oklab, var(--primary) 10%, transparent);
  color: var(--primary);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.6;
}
#team-hero h1 {
  margin-top: 1rem !important;
  font-size: clamp(1.875rem, 4.2vw, 3rem) !important;
  line-height: 1.2;
  font-weight: 700;
  color: var(--foreground);
  text-wrap: balance;
}
#team-hero h1 + p {
  max-width: 40rem;
  margin-inline: auto;
  font-size: 1.0625rem;
  line-height: 1.85 !important;
  color: var(--muted-foreground);
}
#team-hero [data-marketing-rich-text] > p:last-child {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  padding-top: 0.5rem;
}
#team-hero [data-marketing-rich-text] > p:last-child a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: 0.7rem 1.6rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.975rem;
  text-decoration: none !important;
  border: 1.5px solid var(--primary);
}
#team-hero [data-marketing-rich-text] > p:last-child a:first-child {
  background: var(--primary);
  color: var(--primary-foreground, #fff) !important;
}
#team-hero [data-marketing-rich-text] > p:last-child a:nth-child(2) {
  background: transparent;
  color: var(--primary) !important;
}
#team-hero a:focus-visible,
#professionals a:focus-visible,
#professionals button:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
}

/* ============ Professionals: editorial grid ============ */
#professionals .items-stretch {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.75rem 1.5rem !important;
  align-items: stretch;
}
@media (max-width: 1023.98px) {
  #professionals .items-stretch {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem !important;
  }
}
@media (max-width: 639.98px) {
  #professionals .items-stretch {
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem !important;
  }
}

#professionals article {
  position: relative;
  min-width: 0;
  gap: 0.75rem !important;
  padding: 1.375rem 1.375rem 5.25rem !important;
  background: var(--card) !important;
  border: 1px solid color-mix(in oklab, var(--primary) 12%, var(--border));
  box-shadow: 0 14px 34px -28px rgb(4 70 52 / 0.35) !important;
}

/* Photo: full-bleed at the top of the card, same 4:3 frame for everyone. */
#professionals article > img,
#professionals article > div[aria-hidden="true"]:first-child {
  display: block;
  width: calc(100% + 2.75rem) !important;
  max-width: none;
  height: auto !important;
  aspect-ratio: 4 / 3;
  margin: -1.375rem -1.375rem 0.5rem;
  border-radius: 1.25rem 1.25rem 0 0 !important;
  object-fit: cover;
}

/* No photo: a calm Taafi surface with the tree mark instead of a portrait.
   Decorative only; the platform already hides it from screen readers. */
#professionals article > div[aria-hidden="true"]:first-child {
  font-size: 0 !important;
  color: transparent !important;
  background:
    url("https://cdn.hakini.io/prod/t/e6c5ed72-7fed-4dae-8208-c1b227ef031f/pu/mk/im/39f14f78-7048-4c4b-bacb-a8025ef7df26.webp") center 46% / auto 46% no-repeat,
    radial-gradient(70% 80% at 50% 45%, color-mix(in oklab, var(--primary) 11%, transparent) 0%, transparent 72%),
    color-mix(in oklab, var(--primary) 6%, var(--card)) !important;
  border-bottom: 1px solid color-mix(in oklab, var(--primary) 10%, transparent);
}

#professionals article h3 {
  font-size: 1.1875rem !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  color: var(--foreground);
}

/* Role line (first paragraph of each profile). */
#professionals article h3 + div p:first-child {
  margin-bottom: 0.4rem !important;
}
#professionals article h3 + div p:first-child strong {
  display: block;
  color: var(--primary);
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.6;
}

/* Collapsed profile: role + about three lines of bio. */
#professionals .line-clamp-4 {
  -webkit-line-clamp: 5 !important;
  line-clamp: 5;
}

/* Expanded profile: calm sub-headings and lists. */
#professionals article h3 + div h4 {
  margin-top: 0.9rem !important;
  margin-bottom: 0.25rem;
  color: var(--foreground) !important;
  font-weight: 700 !important;
  font-size: 0.875rem !important;
}
#professionals article h3 + div ul {
  margin: 0;
  padding-inline-start: 1.1rem;
  list-style: disc;
}
#professionals article h3 + div li {
  margin-block: 0.15rem;
}
#professionals article h3 + div li::marker {
  color: color-mix(in oklab, var(--primary) 60%, transparent);
}

/* "اقرأ المزيد / اقرأ أقل": a comfortable tap target. */
#professionals article button {
  min-height: 2.75rem;
  align-items: center;
  gap: 0.35rem;
  color: var(--primary) !important;
}

/* Specialty chips. */
#professionals article > div.flex-wrap {
  gap: 0.4rem !important;
}
#professionals article > div.flex-wrap > span {
  background: color-mix(in oklab, var(--primary) 7%, var(--card)) !important;
  color: color-mix(in oklab, var(--primary) 80%, var(--foreground)) !important;
  border: 1px solid color-mix(in oklab, var(--primary) 14%, transparent);
  padding: 0.3rem 0.75rem !important;
  font-size: 0.78rem !important;
  line-height: 1.5;
}

/* Per-profile booking button, pinned to the bottom of every card. */
#professionals article a[href="/ar/services"] {
  position: absolute;
  inset-inline: 1.375rem;
  bottom: 1.375rem;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 2.875rem;
  border-radius: 999px;
  background: var(--primary);
  color: var(--primary-foreground, #fff) !important;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none !important;
}

/* Phones: photo beside the name so eleven profiles stay short to scroll. */
@media (max-width: 639.98px) {
  #professionals article {
    display: grid !important;
    grid-template-columns: 5.25rem minmax(0, 1fr);
    align-items: center;
    column-gap: 0.95rem;
    row-gap: 0.65rem !important;
    padding: 1rem 1rem 4.5rem !important;
  }
  #professionals article > img,
  #professionals article > div[aria-hidden="true"]:first-child {
    grid-column: 1;
    grid-row: 1;
    width: 5.25rem !important;
    aspect-ratio: 1 / 1;
    margin: 0;
    border-radius: 1rem !important;
    border-bottom: 0;
  }
  #professionals article > div[aria-hidden="true"]:first-child {
    background-size: auto 62%, auto, auto !important;
    background-position: center, center, center !important;
  }
  #professionals article > h3 {
    grid-column: 2;
    grid-row: 1;
    font-size: 1.0625rem !important;
  }
  #professionals article > h3 + div,
  #professionals article > div.flex-wrap {
    grid-column: 1 / -1;
  }
  #professionals .line-clamp-4 {
    -webkit-line-clamp: 4 !important;
    line-clamp: 4;
  }
  #professionals article a[href="/ar/services"] {
    inset-inline: 1rem;
    bottom: 1rem;
    min-height: 2.75rem;
  }
}

/* ============ Micro-interactions ============ */
@media (prefers-reduced-motion: no-preference) {
  #professionals article {
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
  }
  #professionals article > img {
    transition: filter 0.3s ease;
  }
  #team-hero a,
  #professionals article a[href="/ar/services"] {
    transition: transform 0.18s ease, background-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
  }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  #professionals article:hover {
    box-shadow: 0 22px 48px -30px rgb(4 70 52 / 0.38) !important;
    border-color: color-mix(in oklab, var(--primary) 28%, var(--border));
  }
  #professionals article a[href="/ar/services"]:hover,
  #team-hero a:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 22px -14px rgb(4 70 52 / 0.6);
  }
}
@media (prefers-reduced-motion: reduce) {
  #professionals article,
  #professionals article:hover {
    transform: none !important;
    transition: none !important;
  }
}
#professionals article:focus-within {
  border-color: color-mix(in oklab, var(--primary) 34%, var(--border));
}

/* ============ v2 polish ============ */
/* When one profile is opened, the others keep their own height instead of
   stretching into empty space. */
#professionals .items-stretch:has(> article > .flex-1 > .space-y-1 > div:first-child:not(.line-clamp-4)) > article:has(.line-clamp-4) {
  align-self: start;
  height: auto !important;
}

/* "مش متأكد مين الأنسب إلك؟": a soft, calm guidance panel. */
[data-marketing-section="cta_banner"]:has(a[href*="help-me-choose"]) .isolate {
  background:
    radial-gradient(60% 120% at 100% 0%, color-mix(in oklab, var(--primary) 9%, transparent) 0%, transparent 70%),
    color-mix(in oklab, var(--primary) 4%, var(--card)) !important;
  border-color: color-mix(in oklab, var(--primary) 16%, var(--border)) !important;
}
[data-marketing-section="cta_banner"]:has(a[href*="help-me-choose"]) h2 {
  font-size: clamp(1.5rem, 3vw, 2.25rem) !important;
}

/* "جاهز تبدأ؟": the page's closing call to action, in Taafi green. */
[data-marketing-section="cta_banner"]:has(a[href$="/signup"]) .isolate {
  background:
    radial-gradient(55% 120% at 0% 100%, rgb(255 255 255 / 0.08) 0%, transparent 70%),
    var(--primary) !important;
  border-color: transparent !important;
  box-shadow: 0 24px 50px -32px rgb(4 70 52 / 0.7) !important;
}
[data-marketing-section="cta_banner"]:has(a[href$="/signup"]) h2 {
  color: #fff !important;
}
[data-marketing-section="cta_banner"]:has(a[href$="/signup"]) .space-y-2,
[data-marketing-section="cta_banner"]:has(a[href$="/signup"]) .space-y-2 * {
  color: rgb(255 255 255 / 0.88) !important;
}
[data-marketing-section="cta_banner"]:has(a[href$="/signup"]) a[href$="/services"] {
  background: #fff !important;
  color: var(--primary) !important;
  border-color: #fff !important;
}
[data-marketing-section="cta_banner"]:has(a[href$="/signup"]) a[href$="/signup"] {
  background: transparent !important;
  color: #fff !important;
  border: 1.5px solid rgb(255 255 255 / 0.75) !important;
  border-radius: 999px;
  min-height: 2.75rem;
  padding-inline: 1.25rem;
}
[data-marketing-section="cta_banner"] a:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

/* Phones: tighter specialty chips so profiles stay short. */
@media (max-width: 639.98px) {
  #professionals article > div.flex-wrap {
    gap: 0.3rem !important;
  }
  #professionals article > div.flex-wrap > span {
    padding: 0.2rem 0.6rem !important;
    font-size: 0.72rem !important;
  }
  #professionals article button {
    min-height: 2.5rem;
  }
  #team-hero [data-marketing-rich-text] > p:last-child a {
    flex: 1 1 9rem;
  }
}

/* Hero surface: soft rounded panel instead of a hard-edged box. */
#team-hero {
  border-color: transparent !important;
  border-radius: 0 0 2rem 2rem;
}

/* ============ v5: profiles ============ */
/* The whole card opens the profile (the name is the real link; its hit area
   covers the card). Booking and "اعرف أكثر" stay above it and clickable. */
#professionals article h3 a {
  color: inherit !important;
  text-decoration: none !important;
}
#professionals article h3 a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
}
#professionals article h3 a:focus-visible {
  outline: none;
  box-shadow: none;
}
#professionals article:has(h3 a:focus-visible) {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
}
#professionals article { cursor: pointer; }

/* The in-card "read more" duplicates "اعرف أكثر", so it is not shown. */
#professionals article h3 + div .space-y-1 > a {
  display: none !important;
}

/* Footer: احجز جلسة (primary) + اعرف أكثر (secondary), side by side. */
#professionals article {
  padding-bottom: 1.375rem !important;
}
#professionals article a[href="/ar/services"] {
  z-index: 2;
  inset-inline-end: auto !important;
  width: calc(50% - 1.375rem - 0.3rem);
}
#professionals article > div:last-child:has(> a) {
  position: relative;
  z-index: 2;
  margin-top: auto;
  min-height: 2.875rem;
}
#professionals article > div:last-child:has(> a) > a {
  width: calc(50% - 0.3rem);
  min-height: 2.875rem;
  justify-content: center;
  border-radius: 999px;
  border: 1.5px solid color-mix(in oklab, var(--primary) 45%, transparent) !important;
  color: var(--primary) !important;
  background: var(--card);
  font-weight: 600;
}
#professionals article > div:last-child:has(> a) > a:hover {
  background: color-mix(in oklab, var(--primary) 6%, var(--card)) !important;
}
#professionals article > div:last-child:has(> a) > a:focus-visible,
#professionals article a[href="/ar/services"]:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
}

@media (max-width: 639.98px) {
  #professionals article {
    padding-bottom: 1rem !important;
  }
  #professionals article > div:last-child:has(> a) {
    grid-column: 1 / -1;
  }
  #professionals article a[href="/ar/services"] {
    width: calc(50% - 1rem - 0.3rem);
  }
}

/* ===== Taafi floating actions: احجز جلسة + اختبر نفسك + واتساب (fab v9: follows the scroll, right edge) =====
   Markup: rich_text section with seo.anchorSlug "taafi-fab" (3 links: booking, self-assessment, then WhatsApp).
   Bottom-right on Arabic (RTL) pages, bottom-left on LTR pages.
   Every size: booking on top, then اختبر نفسك and a round logo-only WhatsApp side by side, so the
   group is exactly as tall as the two-button version and clears the hero headline as before.
   With only two links (booking, WhatsApp) every rule below still gives the v8 layout.
   The group travels down the right edge with the scroll position (see the end of this block). */
div:has(> #taafi-fab){display:contents}
#taafi-fab{
  position:fixed!important;z-index:40;top:auto;
  right:max(24px,env(safe-area-inset-right,0px));left:auto;
  bottom:calc(24px + env(safe-area-inset-bottom,0px));
  width:auto!important;max-width:none!important;margin:0!important;padding:0!important;
  border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;
  /* the group never takes part in section reveal animations, so it is always fully opaque */
  animation:none!important;opacity:1!important;transform:none!important;
  pointer-events:none;
}
:root[dir="ltr"] #taafi-fab{right:auto;left:max(24px,env(safe-area-inset-left,0px))}
#taafi-fab > div,#taafi-fab > div > div{display:contents}
#taafi-fab [data-marketing-rich-text]{
  display:flex!important;flex-direction:column;align-items:stretch;gap:10px;
  width:auto!important;max-width:none!important;margin:0!important;
}
#taafi-fab [data-marketing-rich-text] > p{display:flex;margin:0!important;line-height:1!important}
/* three links: booking on its own row, then اختبر نفسك and WhatsApp side by side, all on the outer edge */
#taafi-fab [data-marketing-rich-text]:has(> p:nth-child(3)){
  display:grid!important;grid-template-columns:auto auto;justify-content:start;justify-items:start;
}
#taafi-fab [data-marketing-rich-text]:has(> p:nth-child(3)) > p:first-child{grid-column:1 / -1}
#taafi-fab a{
  pointer-events:auto;box-sizing:border-box;flex:1 1 auto;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:48px;padding:0 22px;border:2px solid #fff;border-radius:999px;
  font-family:inherit;font-size:15px;font-weight:700;line-height:1.2;
  text-decoration:none!important;white-space:nowrap;
  box-shadow:0 12px 28px -12px rgba(4,49,33,.6),0 2px 6px rgba(4,49,33,.2);
  transition:background-color .15s ease,box-shadow .15s ease,transform .15s ease;
  -webkit-tap-highlight-color:transparent;
}
#taafi-fab a::before{
  content:"";flex:none;width:22px;height:22px;background-color:currentColor;
  -webkit-mask:var(--fab-icon) center/contain no-repeat;mask:var(--fab-icon) center/contain no-repeat;
}
/* primary: احجز جلسة (Taafi dark green, calendar) */
#taafi-fab p:first-child a{
  min-height:54px;font-size:16px;
  background:#044634;color:#fff!important;
  --fab-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18M8 14h.01M12 14h.01M16 14h.01M8 18h.01M12 18h.01M16 18h.01'/%3E%3C/svg%3E");
}
#taafi-fab p:first-child a:hover{background:#0b5c45}
/* self-assessment: اختبر نفسك (soft Taafi green, dark green label, clipboard with a tick) */
#taafi-fab p:nth-child(2):not(:last-child) a{
  background:#E7F0EB;color:#044634!important;
  --fab-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='8' y='2' width='8' height='4' rx='1'/%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'/%3E%3Cpath d='m9 14 2 2 4-4'/%3E%3C/svg%3E");
}
#taafi-fab p:nth-child(2):not(:last-child) a:hover{background:#D5E6DC}
/* secondary: واتساب (WhatsApp green, dark label for contrast) */
#taafi-fab p:last-child a{
  background:#25D366;color:#052E21!important;
  --fab-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.435 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z'/%3E%3C/svg%3E");
}
#taafi-fab p:last-child a:hover{background:#1EBE5A}
/* beside اختبر نفسك, WhatsApp is a round logo-only button; its name stays in the link for screen readers */
#taafi-fab p:nth-child(3):last-child a{flex:none;width:48px;height:48px;padding:0;gap:0;border-radius:50%}
#taafi-fab p:nth-child(3):last-child a::before{width:26px;height:26px}
#taafi-fab p:nth-child(3):last-child a > span:first-child{
  position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;
  overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important;border:0!important;
}
#taafi-fab a:hover{box-shadow:0 14px 30px -12px rgba(4,49,33,.7),0 3px 8px rgba(4,49,33,.22)}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  #taafi-fab a:hover{transform:translateY(-1px)}
}
/* keyboard focus: white + dark-green ring, visible on light and dark backgrounds */
#taafi-fab a:focus-visible{outline:3px solid transparent;box-shadow:0 0 0 2px #fff,0 0 0 5px #044634}
/* screen-reader-only hint, e.g. "(يفتح في نافذة جديدة)" */
#taafi-fab a > span + span{
  position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;
  overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important;border:0!important;
}
/* keep the last footer line (right-aligned in Arabic) clear of the stacked buttons */
body:has(#taafi-fab) footer{padding-bottom:calc(124px + env(safe-area-inset-bottom,0px))}
/* tablets */
@media (max-width:1023.98px){
  #taafi-fab{right:max(20px,env(safe-area-inset-right,0px));bottom:calc(20px + env(safe-area-inset-bottom,0px))}
  :root[dir="ltr"] #taafi-fab{right:auto;left:max(20px,env(safe-area-inset-left,0px))}
  #taafi-fab p:first-child a{min-height:52px}
}
/* phones: smaller buttons. WhatsApp is always round and logo-only here. */
@media (max-width:767.98px){
  #taafi-fab{right:max(12px,env(safe-area-inset-right,0px));bottom:calc(12px + env(safe-area-inset-bottom,0px))}
  :root[dir="ltr"] #taafi-fab{right:auto;left:max(12px,env(safe-area-inset-left,0px))}
  /* all buttons line up on the outer edge (right in Arabic, left in LTR) */
  #taafi-fab [data-marketing-rich-text]{align-items:flex-start;gap:8px}
  #taafi-fab a,#taafi-fab p:first-child a{min-height:48px;padding:0 16px;gap:8px;font-size:15px}
  #taafi-fab a::before{width:20px;height:20px}
  #taafi-fab p:last-child a{flex:none;width:48px;height:48px;padding:0;gap:0;border-radius:50%}
  #taafi-fab p:last-child a::before{width:26px;height:26px}
  #taafi-fab p:last-child a > span:first-child{
    position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;
    overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important;border:0!important;
  }
}
@media (max-width:359.98px){
  #taafi-fab a,#taafi-fab p:first-child a{padding:0 14px;font-size:14px}
  #taafi-fab p:nth-child(2):not(:last-child) a{padding:0 12px;gap:6px}
}
/* follow the page: the group travels down the edge with the scroll position, like the scrollbar
   thumb. Top of the page: just under the header. End of the page: the bottom corner.
   Browsers without scroll-driven animations, and visitors who prefer reduced motion,
   keep the group pinned in the bottom corner (the rules above). */
@supports (animation-timeline: scroll()){
  @media (prefers-reduced-motion:no-preference){
    #taafi-fab{
      --fab-start:118px;--fab-h:112px;--fab-gap:24px;
      animation:taafi-fab-follow linear both!important;
      animation-timeline:scroll(root block)!important;
    }
    @media (max-width:1279.98px){#taafi-fab{--fab-start:96px}}
    @media (max-width:1023.98px){#taafi-fab{--fab-h:110px;--fab-gap:20px}}
    @media (max-width:767.98px){#taafi-fab{--fab-h:104px;--fab-gap:12px}}
    @media (max-width:639.98px){#taafi-fab{--fab-start:80px}}
  }
}
@keyframes taafi-fab-follow{
  from{top:var(--fab-start);bottom:auto}
  to{top:calc(100% - var(--fab-h) - var(--fab-gap) - env(safe-area-inset-bottom,0px));bottom:auto}
}
/* step aside while a menu sheet or dialog is open */
body:has([role="dialog"][data-state="open"]) #taafi-fab{display:none!important}
@media (prefers-reduced-motion:reduce){#taafi-fab a{transition:none}}
@media print{#taafi-fab{display:none!important}}