/* =====================================================================
   Bithrah · ui.css — one button language for the homepage (22/10)
   Owner: «الازرار وشكلها مفروض نستفيد من الديمو الي سويناها».

   Taken from the showcase demos (MASRA is the bar; SADEEM, ANBARA, AFNIYA and NAWWAR repeat the same grammar):
   · pill shape for every action, chip and tag (ANBARA, AFNIYA, NAWWAR; the page already chose pills on 22/10)
   · three heights: 52 action · 46 card action · 40 compact; 28 for tags; never under 44 to a finger
   · hairline ring drawn as an inset box-shadow, never a border (MASRA .btn.ghost, SADEEM, NAWWAR --edge)
   · primary = one solid fill + a tight tinted drop shadow + a 1px top highlight (MASRA, SADEEM, NAWWAR)
   · hover changes tone and shadow, it never lifts the button (MASRA, SADEEM, NAWWAR)
   · press = scale .97 in .18s (MASRA, SADEEM, ANBARA); done with the `scale` property so it never fights
     a transform the page already uses to place the button (pod-play, st-close, GSAP reveals)
   · focus-visible = a 2px solid ring 3px out, the theme's accent (all five demos)
   · pressed filter chip = ink inversion (ANBARA, AFNIYA, NAWWAR, SADEEM .issue-chip)
   · status tag = tinted fill + inset ring, a live dot where the thing is live (MASRA .sdot, SADEEM .pill)
   · "try it" carries the product colour as a live dot, never as a fill under text (day.css lab-go, Bithrah pill)
   · disabled .45 and no pointer; busy = label hidden + ring spinner (ANBARA .btn.busy, MASRA .going)
   · one easing everywhere: cubic-bezier(.22,1,.36,1)

   Brand: teal fills the one primary action; seed green and product colours mark, they do not fill under text;
   gold stays on proof (company profile, numbers, proof links); the teal→grape gradient stays on the headline.

   Loading: link this file after day.css. Every rule starts with html:not(#ui), which lifts it one id level so it
   wins over the page's inline <style> and over day.css without !important (no element on the site has id="ui").
   !important appears only where the page itself uses it: #contact .startbtn (its inline <style> is !important) and the busy
   label colour (so it also hides that button's label).
   ===================================================================== */

/* ---------- 1. tokens ---------- */
:root{
  --u-ease:cubic-bezier(.22,1,.36,1);
  --u-r:999px;
  --u-h-lg:52px; --u-h-md:46px; --u-h-sm:40px; --u-h-tag:28px; --u-hit:44px;
  --u-fs-lg:15px; --u-fs-md:14.5px; --u-fs-sm:14px; --u-fs-tag:12px;
  --u-press:.97; --u-press-icon:.94;
  --u-tr:background-color .25s var(--u-ease),box-shadow .3s var(--u-ease),color .25s var(--u-ease),scale .18s var(--u-ease);
  /* night (brand default) */
  --u-pri:#00ccb4; --u-pri-hover:#1fd2bd; --u-pri-press:#00bba5; --u-pri-ink:#04100e;
  --u-pri-sh:inset 0 1px 0 rgba(255,255,255,.3),0 1px 2px rgba(0,0,0,.4),0 10px 26px -12px rgba(0,204,180,.7);
  --u-pri-sh-hover:inset 0 1px 0 rgba(255,255,255,.34),0 1px 2px rgba(0,0,0,.4),0 18px 40px -14px rgba(0,204,180,.78);
  --u-pri-sh-press:inset 0 1px 0 rgba(255,255,255,.2),0 1px 1px rgba(0,0,0,.4),0 6px 14px -10px rgba(0,204,180,.6);
  --u-glass:rgba(238,242,238,.045); --u-glass-hover:rgba(238,242,238,.085); --u-glass-press:rgba(238,242,238,.12);
  --u-ring:rgba(238,242,238,.16); --u-ring-hover:rgba(0,245,224,.5); --u-ring-teal:rgba(0,204,180,.45);
  --u-edge:inset 0 1px 0 rgba(255,255,255,.07);
  --u-ink:#eef2ee; --u-soft:#c3cbc5;
  --u-inv:#eef2ee; --u-inv-hover:#ffffff; --u-inv-ink:#0a0d0c;
  --u-focus:#00f5e0; --u-seed:#35d9a0; --u-line:#00f5e0;
  --u-gold:#e7c185; --u-gold-ring:rgba(231,193,133,.5);
  /* item colours (client, product) as text: pulled toward white on night, toward ink on paper */
  --u-lift:#ffffff; --u-lift-p:70%; --u-tag-base:transparent; --u-tag-p:12%; --u-tag-ring-p:34%;
  --u-tag-bg:rgba(var(--inkrgb),.04); --u-tag-ring:rgba(var(--inkrgb),.12); --u-menu-press:rgba(var(--inkrgb),.1);
  --u-inv-sh:inset 0 1px 0 rgba(255,255,255,.2),0 1px 2px rgba(0,0,0,.28);
  --u-on-sh:inset 0 1px 0 #ffffff,0 1px 2px rgba(0,0,0,.4),0 10px 24px -12px rgba(0,0,0,.7);
  /* on a photo, a film or the live demo: always dark glass */
  --u-media:rgba(10,13,12,.8); --u-media-hover:rgba(10,13,12,.9); --u-media-press:rgba(10,13,12,.94); --u-media-ink:#f4f6f2;
  --u-media-sh:inset 0 0 0 1px rgba(238,242,238,.2),inset 0 1px 0 rgba(255,255,255,.08),0 14px 40px -12px rgba(0,0,0,.55);
  --u-media-sh-hover:inset 0 0 0 1px rgba(0,245,224,.55),inset 0 1px 0 rgba(255,255,255,.08),0 18px 46px -12px rgba(0,0,0,.6);
  /* proof chips inside the dark services overlay */
  --u-proof-ink:#efd8b0; --u-proof-bg:rgba(7,10,9,.5); --u-proof-hover:rgba(231,193,133,.14); --u-proof-ring:rgba(231,193,133,.35); --u-proof-ring-hover:rgba(231,193,133,.6);
}
:root[data-theme=light]{
  --u-pri:#00705f; --u-pri-hover:#005f52; --u-pri-press:#00564a; --u-pri-ink:#ffffff;
  --u-pri-sh:inset 0 1px 0 rgba(255,255,255,.16),0 1px 2px rgba(0,48,40,.24),0 10px 24px -12px rgba(0,112,95,.6);
  --u-pri-sh-hover:inset 0 1px 0 rgba(255,255,255,.16),0 1px 2px rgba(0,48,40,.24),0 16px 34px -14px rgba(0,112,95,.62);
  --u-pri-sh-press:inset 0 1px 0 rgba(255,255,255,.12),0 1px 1px rgba(0,48,40,.24),0 6px 14px -10px rgba(0,112,95,.5);
  --u-glass:rgba(255,255,255,.72); --u-glass-hover:#ffffff; --u-glass-press:#f6f7f4;
  --u-ring:rgba(16,22,20,.13); --u-ring-hover:rgba(0,112,95,.45); --u-ring-teal:rgba(0,112,95,.32);
  --u-edge:inset 0 1px 0 #ffffff,0 1px 2px rgba(16,22,20,.05);
  --u-ink:#0f1513; --u-soft:#2b3430;
  --u-inv:#0f1513; --u-inv-hover:#1d2724; --u-inv-ink:#ffffff;
  --u-focus:#00705f; --u-seed:#00705f; --u-line:#00705f;
  --u-gold:#8a5a12; --u-gold-ring:rgba(138,90,18,.45);
  --u-lift:#04120e; --u-lift-p:50%; --u-tag-base:#ffffff; --u-tag-p:9%; --u-tag-ring-p:42%;
  --u-tag-bg:rgba(255,255,255,.72); --u-tag-ring:rgba(16,22,20,.1);
  --u-inv-sh:inset 0 1px 0 rgba(255,255,255,.1),0 1px 2px rgba(16,22,20,.22);
}
/* surfaces that stay dark in both themes: the services overlay, the try layer, anything sitting on a photo or film */
html:not(#ui) :is(#svc,#tryLayer){
  --u-glass:rgba(7,10,9,.55); --u-glass-hover:rgba(238,242,238,.08); --u-glass-press:rgba(238,242,238,.12);
  --u-ring:rgba(238,242,238,.18); --u-ring-hover:rgba(0,245,224,.55); --u-edge:inset 0 1px 0 rgba(255,255,255,.06);
  --u-ink:#eef2ee; --u-soft:#cfd6d1; --u-inv:#eef2ee; --u-inv-hover:#ffffff; --u-inv-ink:#070a09;
  --u-focus:#00f5e0; --u-gold:#e7c185; --u-gold-ring:rgba(231,193,133,.5);
}

/* ---------- 2. primary: the one filled action of a view ---------- */
html:not(#ui) :is(#hero .hcta,#contact .startbtn){
  box-sizing:border-box;align-items:center;justify-content:center;gap:10px;
  min-height:var(--u-h-lg);padding:0 28px;border:0;border-radius:var(--u-r);
  font-size:var(--u-fs-lg);font-weight:600;line-height:1.4;letter-spacing:0;white-space:nowrap;text-decoration:none;
  background:var(--u-pri);color:var(--u-pri-ink);box-shadow:var(--u-pri-sh);filter:none;
  transition:var(--u-tr);-webkit-tap-highlight-color:transparent}
html:not(#ui) :is(#hero .hcta,#contact .startbtn):hover{background:var(--u-pri-hover);box-shadow:var(--u-pri-sh-hover);filter:none;transform:none}
html:not(#ui) :is(#hero .hcta,#contact .startbtn):active{scale:var(--u-press);background:var(--u-pri-press);box-shadow:var(--u-pri-sh-press);transform:none}
html:not(#ui) :is(#hero .hcta,#contact .startbtn) svg{width:18px;height:18px;flex:none}
/* the try action keeps its live dot, drawn in the label colour so it reads on teal and on deep teal */
@keyframes uLive{0%{box-shadow:0 0 0 0 color-mix(in srgb,currentColor 45%,transparent)}80%,100%{box-shadow:0 0 0 9px transparent}}
/* the booking button's inline <style> is !important (remove it: see the hand-off note); until then, match it here */
html:not(#ui) #contact a.startbtn{background:var(--u-pri)!important;color:var(--u-pri-ink)!important;border-color:transparent!important}
html:not(#ui) #contact a.startbtn:hover{background:var(--u-pri-hover)!important}
html:not(#ui) #contact a.startbtn:active{background:var(--u-pri-press)!important}
html:not(#ui) #contact a.startbtn svg{fill:none;stroke:currentColor}

/* ---------- 3. secondary: glass with a hairline ring ---------- */
html:not(#ui) :is(#hero .st-try,#contact .wabtn:not(:where(.startbtn)),#contact .mailbtn,#philosophy .phmore,#profile .pfbtn,#products .prod-toggle,.prod-toggle){
  box-sizing:border-box;align-items:center;justify-content:center;gap:10px;
  min-height:var(--u-h-lg);padding:0 26px;border:0;border-radius:var(--u-r);
  font-size:var(--u-fs-lg);font-weight:500;line-height:1.4;letter-spacing:0;white-space:nowrap;text-decoration:none;
  color:var(--u-ink);background:var(--u-glass);box-shadow:inset 0 0 0 1px var(--u-ring),var(--u-edge);filter:none;
  -webkit-backdrop-filter:blur(10px) saturate(1.2);backdrop-filter:blur(10px) saturate(1.2);
  transition:var(--u-tr);-webkit-tap-highlight-color:transparent}
html:not(#ui) :is(#hero .st-try,#contact .wabtn:not(:where(.startbtn)),#contact .mailbtn,#philosophy .phmore,#profile .pfbtn,#products .prod-toggle,.prod-toggle):hover{
  color:var(--u-ink);background:var(--u-glass-hover);box-shadow:inset 0 0 0 1px var(--u-ring-hover),var(--u-edge);filter:none;transform:none}
html:not(#ui) :is(#hero .st-try,#contact .wabtn:not(:where(.startbtn)),#contact .mailbtn,#philosophy .phmore,#profile .pfbtn,#products .prod-toggle,.prod-toggle):active{
  scale:var(--u-press);background:var(--u-glass-press)}
/* buttons and links that reveal on scroll keep the page's own fade ([data-rv].in) next to their state transitions */
html:not(#ui) #philosophy .phmore[data-rv]{transition:var(--u-tr),opacity .9s var(--u-ease),transform .9s var(--u-ease),filter .9s var(--u-ease)}
/* WhatsApp: a second way to reach us, so it steps down to secondary; its mark keeps the seed colour */
html:not(#ui) #contact .wabtn:not(:where(.startbtn)) svg{width:18px;height:18px;flex:none;fill:var(--u-seed)}
html:not(#ui) #contact .mailbtn{font-variant-numeric:tabular-nums}
/* company profile is proof: its ring turns gold, the label stays ink */
html:not(#ui) #profile .pfbtn:hover{box-shadow:inset 0 0 0 1px var(--u-gold-ring),var(--u-edge)}
/* the PDF is the quiet alternative: ring only, soft label */
html:not(#ui) #profile .pfbtn.alt{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;color:var(--u-soft);font-weight:500}
html:not(#ui) #profile .pfbtn.alt:hover{color:var(--u-ink);background:var(--u-glass)}
/* products disclosure: the plus mark carries the teal, the label stays ink */
html:not(#ui) :is(#products .prod-toggle,.prod-toggle){gap:14px;padding-inline:24px 28px;box-shadow:inset 0 0 0 1px var(--u-ring-teal),var(--u-edge)}
html:not(#ui) :is(#products .prod-toggle,.prod-toggle):hover{box-shadow:inset 0 0 0 1px var(--u-ring-hover),var(--u-edge)}
html:not(#ui) .prod-toggle .pt-ico{width:14px;height:14px;color:var(--u-line)}
html:not(#ui) .prod-toggle .pt-ico::before,html:not(#ui) .prod-toggle .pt-ico::after{top:6.25px;width:14px;height:1.5px;border-radius:1px}

/* ---------- 4. try: an ink pill (paper pill at night) carrying the product colour as a live dot ---------- */
html:not(#ui) #lab .lab-meta .lab-go{
  box-sizing:border-box;align-items:center;gap:10px;align-self:flex-start;
  min-height:var(--u-h-md);padding:0 22px 0 20px;margin-top:12px;border:0;border-radius:var(--u-r);
  font-style:normal;font-size:var(--u-fs-md);font-weight:600;line-height:1.4;letter-spacing:0;white-space:nowrap;
  background:var(--u-inv);color:var(--u-inv-ink);filter:none;transform:none;
  box-shadow:var(--u-inv-sh),0 12px 26px -14px rgba(var(--lr),var(--lg),var(--lb),.6);
  transition:var(--u-tr)}
html:not(#ui) #lab .lab-go::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;
  background:rgb(var(--lr),var(--lg),var(--lb));box-shadow:0 0 0 3px rgba(var(--lr),var(--lg),var(--lb),.26)}
html:not(#ui) #lab .lab-item:hover .lab-go{background:var(--u-inv-hover);filter:none;transform:none;
  box-shadow:var(--u-inv-sh),0 18px 36px -14px rgba(var(--lr),var(--lg),var(--lb),.7)}
html:not(#ui) #lab .lab-item:active .lab-go{scale:var(--u-press)}
html:not(#ui) #lab .lab-item:focus-visible .lab-go{outline:2px solid var(--u-focus);outline-offset:3px;text-decoration:none}

/* ---------- 5. on a photo, a film or the live demo: dark glass in both themes ---------- */
html:not(#ui) :is(#podcast .pod-play,#hero .pod-sound,#tryLayer .st-close,.st-close){
  box-sizing:border-box;align-items:center;justify-content:center;gap:10px;
  border:0;border-radius:var(--u-r);font-weight:600;line-height:1.4;letter-spacing:0;white-space:nowrap;
  color:var(--u-media-ink);background:var(--u-media);filter:none;
  -webkit-backdrop-filter:blur(12px) saturate(1.4);backdrop-filter:blur(12px) saturate(1.4);
  box-shadow:var(--u-media-sh);
  transition:var(--u-tr)}
html:not(#ui) #podcast .pod-play{min-height:var(--u-h-lg);padding:0 26px 0 24px;font-size:var(--u-fs-lg)}
html:not(#ui) #hero .pod-sound{min-height:var(--u-h-md);padding:0 20px 0 18px;font-size:var(--u-fs-sm)}
html:not(#ui) :is(#tryLayer .st-close,.st-close){min-height:var(--u-hit);padding:0 20px 0 18px;font-size:var(--u-fs-sm)}
html:not(#ui) :is(#podcast .pod-play,#hero .pod-sound,#tryLayer .st-close,.st-close):hover{background:var(--u-media-hover);filter:none;box-shadow:var(--u-media-sh-hover)}
html:not(#ui) #podcast .pod-play:hover{transform:translateX(-50%)}
html:not(#ui) #hero .pod-sound:hover,html:not(#ui) #hero .pod-sound:active{transform:none}
html:not(#ui) :is(#podcast .pod-play,#hero .pod-sound,#tryLayer .st-close,.st-close):active{scale:var(--u-press);background:var(--u-media-press)}
html:not(#ui) #podcast .pod-play .pod-tri{border-top-width:6px;border-bottom-width:6px;border-left-width:10px}

/* ---------- 6. icon buttons: round glass, 40 to the eye, 44 to a finger ---------- */
html:not(#ui) :is(#themeTg,#langTg,#nav .snd-tg,.snd-tg,#svc .svc-x){
  box-sizing:border-box;position:relative;width:var(--u-h-sm);height:var(--u-h-sm);border:0;border-radius:50%;
  color:var(--u-ink);background:var(--u-glass);box-shadow:inset 0 0 0 1px var(--u-ring),var(--u-edge);
  transform:none;
  transition:var(--u-tr);-webkit-tap-highlight-color:transparent}
html:not(#ui) :is(#themeTg,#langTg,#nav .snd-tg,.snd-tg,#svc .svc-x):is(:hover,[aria-expanded=true]){
  background:var(--u-glass-hover);box-shadow:inset 0 0 0 1px var(--u-ring-hover),var(--u-edge);transform:none}
html:not(#ui) :is(#themeTg,#langTg,#nav .snd-tg,.snd-tg,#svc .svc-x):active{scale:var(--u-press-icon);background:var(--u-glass-press)}
html:not(#ui) :is(#themeTg,#langTg,#nav .snd-tg,.snd-tg,#svc .svc-x)::after{content:"";position:absolute;inset:-2px;border-radius:50%}
html:not(#ui) #themeTg svg{width:18px;height:18px}
html:not(#ui) #langTg{font-size:13.5px;font-weight:600;line-height:1.4}
/* the language control is a pill (globe + language name), not a round icon */
html:not(#ui) #nav #langTg{width:auto;min-width:0;padding:0 14px 0 12px;gap:8px;border-radius:999px;white-space:nowrap}
html:not(#ui) #nav #langTg::after{border-radius:999px}
@media (max-width:520px){html:not(#ui) #nav #langTg{padding:0 10px 0 9px;gap:6px}}
html:not(#ui) #svc .svc-x{width:var(--u-hit);height:var(--u-hit)}
html:not(#ui) #svc .svc-x i{left:13px;top:21.25px;width:18px}
/* the language list: menu rows, nested radius under the 16px panel */
html:not(#ui) .lang-dd .langs a{min-height:var(--u-hit);box-sizing:border-box;letter-spacing:0;line-height:1.4}
html:not(#ui) .lang-dd .langs a:active{background:var(--u-menu-press)}

/* ---------- 7. nav: the services entry is a compact secondary with its live dot; contact is a link ---------- */
html:not(#ui) #nav #svcTg{
  box-sizing:border-box;position:relative;align-items:center;gap:9px;
  min-height:var(--u-h-sm);padding:0 16px;border:0;border-radius:var(--u-r);
  font-size:var(--u-fs-sm);font-weight:600;line-height:1.4;letter-spacing:0;white-space:nowrap;
  color:var(--u-ink);background:var(--u-glass);box-shadow:inset 0 0 0 1px var(--u-ring-teal),var(--u-edge);
  transition:var(--u-tr)}
html:not(#ui) #nav #svcTg:hover{background:var(--u-glass-hover);box-shadow:inset 0 0 0 1px var(--u-ring-hover),var(--u-edge)}
html:not(#ui) #nav #svcTg:active{scale:var(--u-press);background:var(--u-glass-press)}
html:not(#ui) #nav #svcTg::after{content:"";position:absolute;inset:-2px 0}

/* ---------- 8. chips ---------- */
/* services overlay paths: glass chips; the chosen path inverts to ink (the demos' pressed filter) */
html:not(#ui) #svc .svc-path{
  box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;
  min-height:var(--u-h-sm);padding:0 18px;border:0;border-radius:var(--u-r);
  font-size:var(--u-fs-sm);font-weight:500;line-height:1.4;letter-spacing:0;white-space:nowrap;
  color:var(--u-soft);background:var(--u-glass);box-shadow:inset 0 0 0 1px var(--u-ring),var(--u-edge);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:var(--u-tr);-webkit-tap-highlight-color:transparent}
html:not(#ui) #svc .svc-path:hover{color:var(--u-ink);background:var(--u-glass-hover);box-shadow:inset 0 0 0 1px var(--u-ring-hover),var(--u-edge)}
html:not(#ui) #svc .svc-path:active{scale:var(--u-press)}
html:not(#ui) #svc .svc-path[aria-pressed=true]{color:var(--u-inv-ink);background:var(--u-inv);font-weight:600;
  box-shadow:var(--u-on-sh)}
html:not(#ui) #svc .svc-path[aria-pressed=true]:hover{background:var(--u-inv-hover)}
/* proof links inside the overlay: gold chips (gold = proof) */
html:not(#ui) #svc .svc-proof a{display:inline-flex;align-items:center;min-height:36px;padding:0 14px;border-radius:var(--u-r);
  font-size:13px;line-height:1.4;letter-spacing:0;color:var(--u-proof-ink);background:var(--u-proof-bg);box-shadow:inset 0 0 0 1px var(--u-proof-ring);transition:var(--u-tr)}
html:not(#ui) #svc .svc-proof a:hover{background:var(--u-proof-hover);box-shadow:inset 0 0 0 1px var(--u-proof-ring-hover)}
html:not(#ui) #svc .svc-proof a:active{scale:var(--u-press)}
/* footer accounts: compact glass chips */
html:not(#ui) :is(#contact,footer,body) .fsoc a{
  box-sizing:border-box;align-items:center;gap:8px;min-height:var(--u-h-sm);padding:0 16px 0 14px;border:0;border-radius:var(--u-r);
  font-size:13.5px;font-weight:500;line-height:1.4;letter-spacing:0;color:var(--u-soft);
  background:var(--u-glass);box-shadow:inset 0 0 0 1px var(--u-ring),var(--u-edge);transition:var(--u-tr)}
html:not(#ui) :is(#contact,footer,body) .fsoc a:hover{color:var(--u-ink);background:var(--u-glass-hover);box-shadow:inset 0 0 0 1px var(--u-ring-hover),var(--u-edge)}
html:not(#ui) :is(#contact,footer,body) .fsoc a:active{scale:var(--u-press)}

/* ---------- 9. tags: not pressable; tinted fill, inset ring, the item's own colour pulled to a readable tone ---------- */
html:not(#ui) :is(.ch .cinfo .cbadge,#products .pi-badge,.pi-badge,#lab .lab-tags i,#hero .st-id i){
  box-sizing:border-box;height:var(--u-h-tag);padding:0 11px;border:0;border-radius:var(--u-r);
  font-style:normal;font-size:var(--u-fs-tag);font-weight:500;line-height:var(--u-h-tag);letter-spacing:0;white-space:nowrap;
  color:color-mix(in srgb,rgb(var(--u-c)) var(--u-lift-p),var(--u-lift));
  background:color-mix(in srgb,rgb(var(--u-c)) var(--u-tag-p),var(--u-tag-base));
  box-shadow:inset 0 0 0 1px color-mix(in srgb,rgb(var(--u-c)) var(--u-tag-ring-p),transparent)}
html:not(#ui) .ch .cinfo .cbadge{--u-c:var(--chac,53,217,160)}
html:not(#ui) .pi-badge{--u-c:var(--pac,53,217,160)}
html:not(#ui) #hero .st-id i{--u-c:0,204,180}
/* lab tags: neutral facts, the first one is the live status with its dot */
html:not(#ui) #lab .lab-tags{gap:6px}
html:not(#ui) #lab .lab-tags i:first-child{--u-c:var(--lr),var(--lg),var(--lb)}
html:not(#ui) #lab .lab-tags i{color:var(--u-soft);background:var(--u-tag-bg);box-shadow:inset 0 0 0 1px var(--u-tag-ring)}
html:not(#ui) #lab .lab-tags i:first-child{display:inline-flex;align-items:center;gap:6px;line-height:1.4;
  color:color-mix(in srgb,rgb(var(--u-c)) var(--u-lift-p),var(--u-lift));
  background:color-mix(in srgb,rgb(var(--u-c)) var(--u-tag-p),var(--u-tag-base));
  box-shadow:inset 0 0 0 1px color-mix(in srgb,rgb(var(--u-c)) var(--u-tag-ring-p),transparent)}
html:not(#ui) #lab .lab-tags i:first-child::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;
  box-shadow:0 0 0 3px color-mix(in srgb,currentColor 22%,transparent)}

/* ---------- 10. text links: a hairline under the words, never a box ---------- */
html:not(#ui) :is(#hero .hcta2,#hero .st-open,#podcast .pod-yt,.ch .cinfo .clink,#products .pi-link,.pi-link,#numbers .numpf,.rat .rcap a){
  position:relative;display:inline-flex;align-items:center;gap:8px;padding:0 0 4px;border:0;border-radius:0;
  border-bottom:1px solid color-mix(in srgb,currentColor 34%,transparent);
  line-height:1.6;letter-spacing:0;text-decoration:none;background:none;box-shadow:none;
  transition:color .25s var(--u-ease),border-color .25s var(--u-ease)}
/* neutral links read soft and turn ink, their line turns the accent */
html:not(#ui) :is(#hero .hcta2,#hero .st-open,#podcast .pod-yt){font-size:var(--u-fs-md);font-weight:500;color:var(--u-soft)}
html:not(#ui) :is(#hero .hcta2,#hero .st-open,#podcast .pod-yt):hover{color:var(--u-ink);border-bottom-color:var(--u-line)}
html:not(#ui) #podcast .pod-yt[data-rv]{transition:color .25s var(--u-ease),border-color .25s var(--u-ease),opacity .9s var(--u-ease),transform .9s var(--u-ease),filter .9s var(--u-ease)}
/* item links keep their item's colour, pulled to a readable tone; the line fills on hover */
html:not(#ui) .ch .cinfo .clink{font-size:var(--u-fs-md);font-weight:600;color:color-mix(in srgb,rgb(var(--chac,53,217,160)) var(--u-lift-p),var(--u-lift))}
html:not(#ui) :is(#products .pi-link,.pi-link){font-size:var(--u-fs-md);font-weight:600;color:color-mix(in srgb,rgb(var(--pac,53,217,160)) var(--u-lift-p),var(--u-lift))}
html:not(#ui) :is(.ch .cinfo .clink,#products .pi-link,.pi-link):hover{border-bottom-color:currentColor}
/* proof links stay gold */
html:not(#ui) :is(#numbers .numpf,.rat .rcap a){color:var(--u-gold);border-bottom-color:color-mix(in srgb,var(--u-gold) 40%,transparent)}
html:not(#ui) :is(#numbers .numpf,.rat .rcap a):hover{border-bottom-color:var(--u-gold)}
/* the nav contact link draws its line in from the reading edge (kept from the page), in the accent */
html:not(#ui) #nav .cta{position:relative;font-size:var(--u-fs-sm);font-weight:600;letter-spacing:0;line-height:1.6}
html:not(#ui) #nav .cta::after{background:var(--u-line);transition:transform .35s var(--u-ease)}

/* ---------- 11. focus: one ring for every control ---------- */
html:not(#ui) :is(#hero .hcta,#hero .st-try,#contact .startbtn,#contact .wabtn,#contact .mailbtn,#philosophy .phmore,#profile .pfbtn,.prod-toggle,
  #podcast .pod-play,#hero .pod-sound,.st-close,#themeTg,#langTg,.snd-tg,#svc .svc-x,#nav #svcTg,#svc .svc-path,#svc .svc-proof a,.fsoc a,.lang-dd .langs a):focus-visible{
  outline:2px solid var(--u-focus);outline-offset:3px}
html:not(#ui) :is(#hero .hcta2,#hero .st-open,#podcast .pod-yt,.ch .cinfo .clink,.pi-link,#numbers .numpf,.rat .rcap a,#nav .cta):focus-visible{
  outline:2px solid var(--u-focus);outline-offset:4px;border-radius:4px}
html:not(#ui) :is(#hero .hcta,#hero .st-try,#contact .wabtn,#contact .mailbtn,#philosophy .phmore,#profile .pfbtn,.prod-toggle,#podcast .pod-play,#hero .pod-sound,
  .st-close,#themeTg,#langTg,.snd-tg,#svc .svc-x,#nav #svcTg,#svc .svc-path,.fsoc a):focus:not(:focus-visible){outline:none}

/* ---------- 12. disabled and busy (id-weighted like the families, so they win over each family's rest state) ---------- */
html:not(#ui) :is(#hero .hcta,#hero .st-try,#contact .wabtn,#contact .mailbtn,#philosophy .phmore,#profile .pfbtn,.prod-toggle,#podcast .pod-play,#hero .pod-sound,
  .st-close,#themeTg,#langTg,.snd-tg,#svc .svc-x,#nav #svcTg,#svc .svc-path,#lab .lab-go):is([disabled],[aria-disabled=true]){
  opacity:.45;pointer-events:none;cursor:not-allowed;scale:none;filter:saturate(.4)}
html:not(#ui) :is(#hero .hcta,#hero .st-try,#contact .wabtn,#contact .mailbtn,#philosophy .phmore,#profile .pfbtn,.prod-toggle,#podcast .pod-play,#svc .svc-path,#lab .lab-go)[aria-busy=true]{
  position:relative;color:transparent!important;pointer-events:none;cursor:progress}
html:not(#ui) :is(#hero .hcta,#hero .st-try,#contact .wabtn,#contact .mailbtn,#philosophy .phmore,#profile .pfbtn,.prod-toggle,#podcast .pod-play,#svc .svc-path,#lab .lab-go)[aria-busy=true] > *{visibility:hidden}
html:not(#ui) :is(#hero .hcta,#hero .st-try,#contact .wabtn,#contact .mailbtn,#philosophy .phmore,#profile .pfbtn,.prod-toggle,#podcast .pod-play,#svc .svc-path,#lab .lab-go)[aria-busy=true]::after{
  content:"";position:absolute;inset:0;margin:auto;width:18px;height:18px;border-radius:50%;box-sizing:border-box;
  border:2px solid var(--u-busy,var(--u-ink));border-top-color:transparent;animation:uSpin .8s linear infinite}
html:not(#ui) :is(#hero .st-try,#lab .lab-go)[aria-busy=true]::before{visibility:hidden}
html:not(#ui) :is(#hero .hcta,#contact .startbtn){--u-busy:var(--u-pri-ink)}
html:not(#ui) #lab .lab-go{--u-busy:var(--u-inv-ink)}
html:not(#ui) #podcast .pod-play{--u-busy:var(--u-media-ink)}
@keyframes uSpin{to{transform:rotate(1turn)}}

/* ---------- 13. phones: every target reaches 44, actions keep their height and may wrap ---------- */
@media (max-width:760px){
  html:not(#ui) :is(#hero .hcta,#hero .st-try,#contact .startbtn,#contact .wabtn,#contact .mailbtn,#philosophy .phmore,#profile .pfbtn,.prod-toggle){
    padding-inline:22px;white-space:normal;text-align:center}
  html:not(#ui) :is(#products .prod-toggle,.prod-toggle){padding-inline:20px 24px}
  html:not(#ui) #contact .crow{gap:10px}
  html:not(#ui) #contact .crow > a{flex:1 1 100%}
  html:not(#ui) #svc .svc-path{min-height:var(--u-hit);padding:0 16px}
  html:not(#ui) :is(#contact,footer,body) .fsoc a{min-height:var(--u-hit)}
  html:not(#ui) #nav #svcTg{padding:0 14px;font-size:13.5px}
  html:not(#ui) #podcast .pod-play{min-height:var(--u-hit);padding:0 20px 0 18px;font-size:var(--u-fs-sm)}
  html:not(#ui) #hero .pod-sound{min-height:var(--u-hit);padding:0 16px 0 14px;font-size:13.5px}
  /* text links: the line stays where it is, the hit area grows around it */
  html:not(#ui) :is(#hero .hcta2,#hero .st-open,#podcast .pod-yt,.ch .cinfo .clink,.pi-link,#numbers .numpf,.rat .rcap a,#nav .cta)::before{
    content:"";position:absolute;inset:-10px -6px}
}

/* ---------- 14. reduced motion: tone changes stay, nothing moves ---------- */
@media (prefers-reduced-motion:reduce){
  :root:not(.full-motion){--u-press:1;--u-press-icon:1;
    --u-tr:background-color .15s linear,box-shadow .15s linear,color .15s linear}
  html:not(.full-motion):not(#ui) #hero .st-try::before{animation:none}
  html:not(.full-motion):not(#ui) :is(#hero .hcta,#hero .st-try,#contact .wabtn,#contact .mailbtn,#philosophy .phmore,#profile .pfbtn,.prod-toggle,#podcast .pod-play,#svc .svc-path,#lab .lab-go)[aria-busy=true]::after{animation-duration:1.6s}}