/* ==========================================================================
   Odontofusion Growth Systems — public site design system
   Shared by index.html, pilot.html, ye-almaz-overview.html.
   Authenticated pages (login, portal, admin) use their own styles.
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root{
  /* colour */
  --ink:#101B24;
  --ink-2:#2A3842;
  --navy:#102837;
  --navy-2:#173446;
  --canvas:#F5F5F1;
  --canvas-2:#ECECE6;
  --white:#FFFFFF;
  --slate:#5F6B77;          /* body-muted; darkened from #74808C for AA on canvas */
  --slate-2:#5B6671;        /* metadata: 4.9:1+ on every surface we use */
  --line:#DCE2E5;
  --line-2:#C8D0D4;
  --blue:#315CF5;
  --blue-ink:#2142C4;
  --blue-wash:#EAEFFE;
  --signal:#F2B705;         /* brand yellow, used only as a small marker */
  --ok:#146346;
  --ok-wash:#E4F2EC;
  --warn:#7A5200;
  --warn-wash:#FBF1D6;
  --err:#A11F14;
  --err-wash:#FDECEA;

  /* type */
  --f-display:"Instrument Sans",ui-sans-serif,system-ui,sans-serif;
  --f-body:"IBM Plex Sans",ui-sans-serif,system-ui,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --t-display:clamp(2.5rem,1.4rem + 4.4vw,5rem);
  --t-h2:clamp(2rem,1.35rem + 2.6vw,3.25rem);
  --t-h3:clamp(1.375rem,1.15rem + .9vw,1.875rem);
  --t-h4:1.1875rem;
  --t-lead:clamp(1.0625rem,1rem + .3vw,1.25rem);
  --t-body:1rem;
  --t-small:.875rem;
  --t-meta:.75rem;

  /* space (4px base) */
  --s-1:4px;--s-2:8px;--s-3:12px;--s-4:16px;--s-5:24px;--s-6:32px;--s-7:48px;--s-8:64px;--s-9:96px;--s-10:128px;
  --section:clamp(80px,6rem + 4vw,160px);
  --gutter:clamp(16px,1rem + 2vw,40px);
  --max:1280px;

  /* shape + motion */
  --r-1:4px;--r-2:8px;--r-3:12px;
  --ease:cubic-bezier(.2,.7,.2,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --dur:180ms;
  --header-h:68px;
  --shadow-1:0 1px 2px rgba(16,27,36,.06),0 2px 8px rgba(16,27,36,.04);
  --shadow-2:0 2px 4px rgba(16,27,36,.05),0 18px 40px -12px rgba(16,27,36,.18);
  --shadow-3:0 4px 8px rgba(16,27,36,.06),0 40px 80px -24px rgba(16,27,36,.30);
}

/* ---------- 2. Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 16px)}
body{margin:0;background:var(--canvas);color:var(--ink);font-family:var(--f-body);font-size:var(--t-body);line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit}
h1,h2,h3,h4,p,ul,ol,figure,dl,dd{margin:0}
ul,ol{padding:0;list-style:none}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:2px}
::selection{background:var(--ink);color:var(--canvas)}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:16px;top:-60px;z-index:200;background:var(--ink);color:var(--white);padding:10px 16px;border-radius:var(--r-2);text-decoration:none;font-weight:500;transition:top var(--dur) var(--ease)}
.skip-link:focus{top:12px}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* ---------- 3. Layout ---------- */
.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--s-5)}
.section{padding-block:var(--section);position:relative}
.section--white{background:var(--white)}
.section--navy{background:var(--navy);color:#E7ECEF}
.section--tight{padding-block:clamp(56px,4rem + 2vw,96px)}
.rule{border:0;border-top:1px solid var(--line);margin:0}

/* ---------- 4. Typography ---------- */
.display{font-family:var(--f-display);font-weight:500;font-size:var(--t-display);line-height:1.02;letter-spacing:-.035em;text-wrap:balance}
.h2{font-family:var(--f-display);font-weight:500;font-size:var(--t-h2);line-height:1.06;letter-spacing:-.03em;text-wrap:balance}
.h3{font-family:var(--f-display);font-weight:500;font-size:var(--t-h3);line-height:1.15;letter-spacing:-.02em;text-wrap:balance}
.h4{font-family:var(--f-display);font-weight:600;font-size:var(--t-h4);line-height:1.3;letter-spacing:-.01em}
.lead{font-size:var(--t-lead);line-height:1.55;color:var(--slate);max-width:38em}
.body-muted{color:var(--slate)}
.mono,.label{font-family:var(--f-mono);font-size:var(--t-meta);font-weight:500;letter-spacing:.06em;text-transform:uppercase}
.label{display:inline-flex;align-items:center;gap:10px;color:var(--slate)}
.label--plain::before{display:none}
.section--navy .label{color:#9FB0BB}
.section--navy .lead,.section--navy .body-muted{color:#A9B7C0}
.num{font-family:var(--f-mono);font-size:var(--t-meta);color:var(--slate-2);letter-spacing:.04em}
.text-link{display:inline-flex;align-items:center;gap:8px;font-weight:500;text-decoration:none;color:var(--ink);border-bottom:1px solid var(--line-2);padding-bottom:2px;transition:border-color var(--dur) var(--ease),color var(--dur) var(--ease)}
.text-link:hover{border-color:var(--ink)}
.text-link .arr{transition:transform var(--dur) var(--ease)}
.text-link:hover .arr{transform:translateX(3px)}

/* Section heading pattern: label on its own column, headline spanning the rest */
.sec-head{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--s-5);row-gap:var(--s-5);margin-bottom:clamp(40px,3rem + 2vw,88px)}
.sec-head .label{grid-column:1 / span 3;align-self:start;padding-top:.6em}
.sec-head .sec-title{grid-column:4 / span 8}
.sec-head .sec-intro{grid-column:4 / span 6}
@media (max-width:900px){
  .sec-head .label,.sec-head .sec-title,.sec-head .sec-intro{grid-column:1 / -1}
  .sec-head .label{padding-top:0}
}

/* ---------- 5. Buttons ---------- */
.btn{--bg:var(--ink);--fg:var(--white);--bd:var(--ink);
  display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 20px;border-radius:var(--r-2);border:1px solid var(--bd);background:var(--bg);color:var(--fg);font-family:var(--f-body);font-size:.9375rem;font-weight:500;line-height:1;text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:background-color var(--dur) var(--ease),border-color var(--dur) var(--ease),color var(--dur) var(--ease),transform 120ms var(--ease)}
.btn:hover{--bg:var(--ink-2);--bd:var(--ink-2)}
.btn:active{transform:translateY(1px)}
.btn .arr{transition:transform var(--dur) var(--ease)}
.btn:hover .arr{transform:translateX(3px)}
.btn--blue{--bg:var(--blue);--bd:var(--blue)}
.btn--blue:hover{--bg:var(--blue-ink);--bd:var(--blue-ink)}
.btn--ghost{--bg:transparent;--fg:var(--ink);--bd:var(--line-2)}
.btn--ghost:hover{--bg:var(--white);--bd:var(--ink)}
.btn--light{--bg:var(--canvas);--fg:var(--ink);--bd:var(--canvas)}
.btn--light:hover{--bg:var(--white);--bd:var(--white)}
.btn--ghost-light{--bg:transparent;--fg:var(--white);--bd:rgba(255,255,255,.28)}
.btn--ghost-light:hover{--bg:rgba(255,255,255,.08);--bd:rgba(255,255,255,.6)}
.btn--sm{min-height:38px;padding:0 14px;font-size:.875rem}
.btn[disabled],.btn[aria-busy="true"]{opacity:.7;cursor:progress}

/* ---------- 6. Header ---------- */
.site-header{position:sticky;top:0;z-index:100;height:var(--header-h);background:rgba(245,245,241,.86);backdrop-filter:saturate(140%) blur(14px);-webkit-backdrop-filter:saturate(140%) blur(14px);border-bottom:1px solid transparent;transition:border-color 240ms var(--ease),background-color 240ms var(--ease)}
.site-header.is-scrolled{border-bottom-color:var(--line);background:rgba(245,245,241,.94)}
.site-header .wrap{height:100%;display:flex;align-items:center;gap:var(--s-6)}
.brand{display:flex;align-items:center;flex:none;text-decoration:none}
.brand img{height:30px;width:auto;mix-blend-mode:multiply}
.nav{display:flex;align-items:center;gap:2px;margin-left:auto}
.nav a{position:relative;display:block;padding:8px 12px;font-size:.875rem;font-weight:500;color:var(--ink-2);text-decoration:none;border-radius:var(--r-1);transition:color var(--dur) var(--ease),background-color var(--dur) var(--ease)}
.nav a:hover{color:var(--ink);background:rgba(16,27,36,.05)}
.nav a::after{content:"";position:absolute;left:12px;right:12px;bottom:2px;height:1.5px;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform 260ms var(--ease-out)}
.nav a[aria-current="true"],.nav a[aria-current="page"]{color:var(--ink)}
.nav a[aria-current="true"]::after,.nav a[aria-current="page"]::after{transform:scaleX(1)}
.header-actions{display:flex;align-items:center;gap:var(--s-2);flex:none}
.header-login{font-size:.875rem;font-weight:500;color:var(--ink-2);text-decoration:none;padding:8px 12px;border-radius:var(--r-1)}
.header-login:hover{color:var(--ink);background:rgba(16,27,36,.05)}
.menu-btn{display:none;align-items:center;gap:10px;height:40px;padding:0 12px 0 14px;margin-left:auto;border:1px solid var(--line-2);border-radius:var(--r-2);background:transparent;cursor:pointer;font-family:var(--f-mono);font-size:.75rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase}
.menu-btn .bars{position:relative;width:16px;height:10px}
.menu-btn .bars::before,.menu-btn .bars::after{content:"";position:absolute;left:0;right:0;height:1.5px;background:var(--ink);transition:transform 240ms var(--ease-out),top 240ms var(--ease-out)}
.menu-btn .bars::before{top:1px}
.menu-btn .bars::after{top:7px}
.menu-btn[aria-expanded="true"] .bars::before{top:4px;transform:rotate(45deg)}
.menu-btn[aria-expanded="true"] .bars::after{top:4px;transform:rotate(-45deg)}
@media (max-width:1240px){
  .nav,.header-actions{display:none}
  .menu-btn{display:inline-flex}
}

/* Mobile menu sheet */
.mnav{position:fixed;inset:var(--header-h) 0 0 0;z-index:99;background:var(--canvas);display:flex;flex-direction:column;padding:var(--s-5) var(--gutter) calc(var(--s-5) + env(safe-area-inset-bottom));overflow-y:auto;
  visibility:hidden;opacity:0;transform:translateY(-8px);transition:opacity 220ms var(--ease),transform 280ms var(--ease-out),visibility 0s linear 280ms}
.mnav.is-open{visibility:visible;opacity:1;transform:none;transition:opacity 220ms var(--ease),transform 280ms var(--ease-out),visibility 0s}
.mnav-list{border-top:1px solid var(--line)}
.mnav-list li{border-bottom:1px solid var(--line)}
.mnav-list a{display:flex;align-items:baseline;gap:var(--s-4);padding:18px 2px;min-height:56px;text-decoration:none;font-family:var(--f-display);font-size:1.625rem;font-weight:500;letter-spacing:-.02em;color:var(--ink)}
.mnav-list a .num{width:28px;flex:none}
.mnav-list a[aria-current="true"]{color:var(--blue)}
.mnav.is-open .mnav-list li{animation:mnavIn 360ms var(--ease-out) both}
.mnav.is-open .mnav-list li:nth-child(2){animation-delay:30ms}
.mnav.is-open .mnav-list li:nth-child(3){animation-delay:60ms}
.mnav.is-open .mnav-list li:nth-child(4){animation-delay:90ms}
.mnav.is-open .mnav-list li:nth-child(5){animation-delay:120ms}
.mnav.is-open .mnav-list li:nth-child(6){animation-delay:150ms}
@keyframes mnavIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.mnav-foot{margin-top:auto;padding-top:var(--s-6);display:grid;gap:var(--s-3)}
.mnav-foot .btn{width:100%;min-height:52px}
.mnav-meta{display:flex;justify-content:space-between;gap:var(--s-4);padding-top:var(--s-4);color:var(--slate);font-size:var(--t-small)}
.mnav-meta a{text-decoration:none}
body.menu-open{overflow:hidden}
@media (min-width:1241px){.mnav{display:none}}

/* ---------- 7. Footer ---------- */
.site-footer{background:var(--ink);color:#B9C4CB;padding-top:clamp(64px,5rem + 2vw,120px);font-size:var(--t-small)}
.site-footer a{text-decoration:none;color:#DCE3E7;transition:color var(--dur) var(--ease)}
.site-footer a:hover{color:var(--white)}
.site-footer .btn,.site-footer .btn:hover{color:var(--fg)}
.footer-top{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--s-5);row-gap:var(--s-7)}
.footer-lede{grid-column:1 / span 5}
.footer-lede p{font-family:var(--f-display);font-size:clamp(1.5rem,1.2rem + 1vw,2rem);line-height:1.2;letter-spacing:-.02em;color:var(--white);max-width:16em}
.footer-lede .btn{margin-top:var(--s-6)}
.footer-col{grid-column:span 2}
.footer-col:first-of-type{grid-column:7 / span 2}
.footer-col h2{font-family:var(--f-mono);font-size:var(--t-meta);font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:#7F8E98;margin-bottom:var(--s-4)}
.footer-col li+li{margin-top:10px}
.footer-legal{margin-top:clamp(64px,5rem + 2vw,120px);padding-top:var(--s-5);border-top:1px solid rgba(255,255,255,.1);display:flex;flex-wrap:wrap;gap:6px var(--s-6);font-size:.8125rem;color:#9AA8B1}
.footer-legal p,.footer-legal address{margin:0;font-style:normal}
.footer-legal strong{color:#DCE3E7;font-weight:500}
.footer-mark{margin-top:var(--s-5);border-top:1px solid rgba(255,255,255,.1);padding-block:var(--s-5);display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--s-3);color:#7F8E98;font-size:.8125rem}
.footer-mark address{font-style:normal}
@media (max-width:900px){
  .footer-lede{grid-column:1 / -1}
  .footer-col,.footer-col:first-of-type{grid-column:span 6}
}

/* ---------- 8. Forms ---------- */
.field{display:grid;gap:8px}
.field label,.field .field-label{font-size:.8125rem;font-weight:500;color:var(--ink-2)}
.field .opt{font-weight:400;color:var(--slate-2)}
.input,.select,.textarea{width:100%;min-height:48px;padding:12px 14px;background:var(--white);border:1px solid var(--line-2);border-radius:var(--r-2);font-size:1rem;color:var(--ink);transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.textarea{min-height:140px;resize:vertical;line-height:1.5}
.select{appearance:none;-webkit-appearance:none;padding-right:40px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23101B24' stroke-width='1.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center}
.input::placeholder,.textarea::placeholder{color:#8A959F}
.input:hover,.select:hover,.textarea:hover{border-color:var(--slate-2)}
.input:focus,.select:focus,.textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(49,92,245,.18)}
.field.has-error .input,.field.has-error .select,.field.has-error .textarea{border-color:var(--err);box-shadow:0 0 0 3px rgba(180,35,24,.12)}
.field-error{display:none;font-size:.8125rem;color:var(--err)}
.field.has-error .field-error{display:block}
.check{display:flex;gap:12px;align-items:flex-start;font-size:.875rem;color:var(--slate);line-height:1.5}
.field .check{font-weight:400;color:var(--slate);font-size:.875rem}
.check input{width:18px;height:18px;margin:2px 0 0;accent-color:var(--blue);flex:none}
.form-alert{display:none;padding:12px 14px;border-radius:var(--r-2);background:var(--err-wash);color:var(--err);font-size:.875rem;border:1px solid rgba(180,35,24,.2)}
.form-alert.is-visible{display:block}
.hp{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.spinner{width:14px;height:14px;border:1.5px solid currentColor;border-right-color:transparent;border-radius:50%;animation:spin .7s linear infinite;display:none}
.btn[aria-busy="true"] .spinner{display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- 9. Product window chrome (shared by mock UIs) ---------- */
.win{background:var(--white);border:1px solid var(--line);border-radius:var(--r-3);box-shadow:var(--shadow-2);overflow:hidden;font-family:var(--f-body)}
.win-bar{display:flex;align-items:center;gap:var(--s-3);height:36px;padding:0 12px;border-bottom:1px solid var(--line);background:#FAFAF8}
.win-bar .dots{display:flex;gap:5px}
.win-bar .dots i{width:8px;height:8px;border-radius:50%;background:var(--line-2)}
.win-bar .win-title{font-family:var(--f-mono);font-size:.6875rem;color:var(--slate);letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.win-bar .win-tag{margin-left:auto;font-family:var(--f-mono);font-size:.625rem;letter-spacing:.06em;text-transform:uppercase;color:var(--slate-2);white-space:nowrap}
.pill{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 8px;border-radius:var(--r-1);font-family:var(--f-mono);font-size:.6875rem;font-weight:500;letter-spacing:.02em;white-space:nowrap;background:var(--canvas);color:var(--ink-2)}
.pill--ok{background:var(--ok-wash);color:var(--ok)}
.pill--warn{background:var(--warn-wash);color:var(--warn)}
.pill--blue{background:var(--blue-wash);color:var(--blue-ink)}
.pill--dark{background:var(--ink);color:var(--white)}
.pill .dot{width:6px;height:6px;border-radius:50%;background:currentColor}
.caption{font-family:var(--f-mono);font-size:.6875rem;letter-spacing:.04em;color:var(--slate-2);margin-top:var(--s-3)}

/* ---------- 10. Reveal motion (opt-in, subtle) ---------- */
.js [data-reveal]{opacity:0;transform:translateY(14px);transition:opacity 600ms var(--ease-out),transform 700ms var(--ease-out)}
.js [data-reveal="fade"]{transform:none}
.js [data-reveal].is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js [data-reveal]{opacity:1;transform:none}}

/* ---------- 11. Chat assistant ---------- */
.chat-launch{position:fixed;right:max(16px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));z-index:120;display:inline-flex;align-items:center;gap:10px;height:48px;padding:0 18px 0 16px;border:0;border-radius:24px;background:var(--ink);color:var(--white);font-family:var(--f-body);font-size:.9375rem;font-weight:500;cursor:pointer;box-shadow:var(--shadow-2);transition:transform 160ms var(--ease),background-color var(--dur) var(--ease)}
.chat-launch:hover{background:var(--ink-2)}
.chat-launch:active{transform:translateY(1px)}
.chat-launch[aria-expanded="true"]{display:none}
body.menu-open .chat-launch{display:none}
.chat-panel{position:fixed;right:max(16px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));z-index:121;width:380px;height:min(600px,calc(100vh - 32px));display:flex;flex-direction:column;background:var(--white);border:1px solid var(--line);border-radius:var(--r-3);box-shadow:var(--shadow-3);overflow:hidden;opacity:0;transform:translateY(10px);transition:opacity 200ms var(--ease),transform 260ms var(--ease-out)}
.chat-panel.is-open{opacity:1;transform:none}
.chat-panel[hidden]{display:none}
.chat-head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 14px 14px 18px;border-bottom:1px solid var(--line)}
.chat-title{display:block;font-family:var(--f-display);font-weight:600;font-size:1rem}
.chat-sub{display:block;font-family:var(--f-mono);font-size:.6875rem;letter-spacing:.03em;color:var(--slate-2);margin-top:2px}
.chat-close{width:36px;height:36px;display:flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:var(--r-2);background:transparent;color:var(--ink);cursor:pointer}
.chat-close:hover{border-color:var(--ink)}
.chat-log{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px;background:var(--canvas);overscroll-behavior:contain}
.chat-msg{max-width:88%;padding:10px 12px;border-radius:12px;font-size:.9375rem;line-height:1.5;display:grid;gap:6px}
.chat-msg p{margin:0}
.chat-msg ul{display:grid;gap:3px}
.chat-msg li{position:relative;padding-left:14px}
.chat-msg li::before{content:"";position:absolute;left:0;top:.7em;width:7px;height:1.5px;background:var(--slate-2)}
.chat-msg--assistant{align-self:flex-start;background:var(--white);border:1px solid var(--line);border-bottom-left-radius:4px;color:var(--ink-2)}
.chat-msg--user{align-self:flex-end;background:var(--ink);color:var(--white);border-bottom-right-radius:4px}
.chat-msg.is-typing p{letter-spacing:.2em;animation:chatPulse 1s ease-in-out infinite}
.chat-msg.is-error{border-color:rgba(180,35,24,.25);background:var(--err-wash);color:var(--err)}
@keyframes chatPulse{50%{opacity:.35}}
.chat-chips{display:flex;flex-wrap:wrap;gap:6px;padding:0 16px 12px;background:var(--canvas)}
.chat-chips[hidden]{display:none}
.chat-chips button{border:1px solid var(--line-2);background:var(--white);border-radius:16px;padding:6px 12px;font-size:.8125rem;color:var(--ink-2);cursor:pointer;text-align:left}
.chat-chips button:hover{border-color:var(--ink);color:var(--ink)}
.chat-form{display:flex;align-items:flex-end;gap:8px;padding:12px;border-top:1px solid var(--line)}
.chat-form textarea{flex:1;resize:none;min-height:44px;max-height:120px;padding:11px 12px;border:1px solid var(--line-2);border-radius:var(--r-2);font-size:1rem;line-height:1.4;background:var(--white)}
.chat-form textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(49,92,245,.18)}
.chat-send{width:44px;height:44px;flex:none;display:flex;align-items:center;justify-content:center;border:0;border-radius:var(--r-2);background:var(--blue);color:var(--white);cursor:pointer}
.chat-send:hover{background:var(--blue-ink)}
.chat-send[disabled]{opacity:.6;cursor:progress}
.chat-foot{padding:0 14px 12px;font-size:.75rem;color:var(--slate)}
.chat-foot a{color:var(--ink)}
@media (max-width:560px){
  .chat-panel{inset:0;width:auto;height:auto;border-radius:0;border:0;padding-bottom:env(safe-area-inset-bottom)}
  body.chat-open{overflow:hidden}
  .chat-launch span{display:none}
  .chat-launch{width:52px;height:52px;padding:0;justify-content:center;border-radius:50%}
}

/* ---------- 12. Arabic / RTL ---------- */
.lang-switch{font-size:.875rem;font-weight:500;color:var(--ink-2);text-decoration:none;padding:8px 12px;border-radius:var(--r-1);border:1px solid var(--line-2)}
.lang-switch:hover{color:var(--ink);border-color:var(--ink)}
html[lang="ar"]{--f-display:"IBM Plex Sans Arabic","Instrument Sans",system-ui,sans-serif;--f-body:"IBM Plex Sans Arabic","IBM Plex Sans",system-ui,sans-serif}
html[lang="ar"] body{line-height:1.75}
html[lang="ar"] .display,html[lang="ar"] .h2,html[lang="ar"] .h3,html[lang="ar"] .doc-title{letter-spacing:0;line-height:1.3;font-weight:600}
html[lang="ar"] .label,html[lang="ar"] .mono,html[lang="ar"] .num,html[lang="ar"] .caption,html[lang="ar"] .footer-col h2,html[lang="ar"] .hero-cred dt,html[lang="ar"] .facts dt,html[lang="ar"] .feat-dl dt,html[lang="ar"] .contact-list dt,html[lang="ar"] .platform-list li span:last-child{font-family:var(--f-body);letter-spacing:0;text-transform:none;font-size:.8125rem}
[dir="rtl"] .win,[dir="rtl"] .flow,[dir="rtl"] .pipeline{direction:ltr;text-align:left}
[dir="rtl"] .hero-visual{margin-right:0;margin-left:calc(var(--gutter) * -1 - max(0px,(100vw - var(--max)) / 2) + 24px)}
[dir="rtl"] .hv-board{left:0;right:6%}
[dir="rtl"] .hv-shot{left:auto;right:-4%}
[dir="rtl"] .hv-caption{left:0;right:44%;text-align:left}
[dir="rtl"] .nav a::after{transform-origin:right}
[dir="rtl"] .xp-row li::before{content:"— "}
[dir="rtl"] .doc-body ul li,[dir="rtl"] .ai-body li,[dir="rtl"] .chat-msg li{padding-left:0;padding-right:18px}
[dir="rtl"] .doc-body ul li::before,[dir="rtl"] .ai-body li::before,[dir="rtl"] .chat-msg li::before{left:auto;right:2px}
[dir="rtl"] .select{padding-right:14px;padding-left:40px;background-position:left 14px center}
[dir="rtl"] .chat-launch,[dir="rtl"] .chat-panel{right:auto;left:max(16px,env(safe-area-inset-left))}
[dir="rtl"] .pcard-media .pill,[dir="rtl"] .feat-media .pill{left:auto;right:14px}
[dir="rtl"] .text-link .arr,[dir="rtl"] .btn .arr{display:inline-block}
[dir="rtl"] .text-link:hover .arr,[dir="rtl"] .btn:hover .arr{transform:translateX(-3px)}
[dir="rtl"] input[type="email"],[dir="rtl"] input[type="tel"]{direction:ltr;text-align:right}
@media (max-width:1024px){
  [dir="rtl"] .hero-visual{margin-left:0}
  [dir="rtl"] .hv-board{right:auto}
  [dir="rtl"] .hv-shot{right:auto;left:-12px}
  [dir="rtl"] .hv-note--a{left:auto;right:16px}
  [dir="rtl"] .hv-caption{text-align:right}
}
@media (max-width:760px){[dir="rtl"] .hv-shot{left:-6px}}
@media (max-width:1180px){[dir="rtl"] .hv-caption{right:0}}
html[lang="ar"] .hv-note,html[lang="ar"] .pill,html[lang="ar"] .chat-sub,html[lang="ar"] .menu-btn,html[lang="ar"] .form-head .mono,html[lang="ar"] .ai-head .mono{font-family:var(--f-body);letter-spacing:0;text-transform:none}
html[lang="ar"] .win .pill{font-family:var(--f-mono)}
[dir="rtl"] .hv-note--b{display:none}
[dir="rtl"] a[href^="tel:"],[dir="rtl"] a[href^="mailto:"]{direction:ltr;unicode-bidi:isolate}

/* ---------- 13. Nav dropdown + mobile sub-list ---------- */
.nav-item{position:relative}
.nav-dd-btn{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border:0;background:transparent;font:inherit;font-size:.875rem;font-weight:500;color:var(--ink-2);border-radius:var(--r-1);cursor:pointer;transition:color var(--dur) var(--ease),background-color var(--dur) var(--ease)}
.nav-dd-btn:hover,.nav-dd-btn[aria-expanded="true"]{color:var(--ink);background:rgba(16,27,36,.05)}
.nav-dd-btn svg{transition:transform 200ms var(--ease)}
.nav-dd-btn[aria-expanded="true"] svg{transform:rotate(180deg)}
.nav-dd-btn.is-current{color:var(--ink);box-shadow:inset 0 -1.5px 0 var(--ink)}
.nav-dd{position:absolute;top:calc(100% + 10px);left:-8px;z-index:110;width:340px;padding:8px;background:var(--white);border:1px solid var(--line);border-radius:var(--r-3);box-shadow:var(--shadow-3);animation:ddIn 160ms var(--ease-out)}
.nav-dd[hidden]{display:none}
.nav .nav-dd a{display:block;padding:10px 12px;border-radius:var(--r-2)}
.nav .nav-dd a::after{display:none}
.nav .nav-dd a:hover{background:var(--canvas)}
.nav-dd a strong{display:block;font-weight:600;color:var(--ink);font-size:.875rem}
.nav-dd a span{display:block;margin-top:2px;font-size:.8125rem;font-weight:400;color:var(--slate);line-height:1.4}
.nav-dd a[aria-current="page"]{background:var(--canvas)}
@keyframes ddIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
[dir="rtl"] .nav-dd{left:auto;right:-8px}
.mnav-sub{display:grid;gap:0;padding:0 0 14px 44px}
.mnav-sub a{display:block;padding:8px 2px;min-height:44px;font-family:var(--f-body);font-size:1rem;font-weight:400;color:var(--slate)}
.mnav-list li li{border:0}
[dir="rtl"] .mnav-sub{padding:0 44px 14px 0}

/* ---------- 14. Consent banner ---------- */
.consent{position:fixed;left:16px;right:16px;bottom:16px;z-index:130;max-width:560px;margin:0 auto;background:var(--ink);color:#E7ECEF;border-radius:var(--r-3);padding:var(--s-4) var(--s-5);display:flex;flex-wrap:wrap;gap:var(--s-3) var(--s-5);align-items:center;box-shadow:var(--shadow-3);font-size:.875rem}
.consent p{margin:0;flex:1 1 260px}
.consent div{display:flex;gap:8px}
.consent .btn--ghost{--fg:#fff;--bd:rgba(255,255,255,.35)}
.consent .btn:not(.btn--ghost){--bg:#fff;--fg:var(--ink);--bd:#fff}

.nav-dd--wide{width:min(680px,92vw);display:grid;grid-template-columns:1fr 1fr;gap:4px 12px}
.nav-dd-col{display:grid;align-content:start;gap:2px}
.nav-dd-h{margin:4px 12px 4px;font-family:var(--f-mono);font-size:.6875rem;letter-spacing:.06em;text-transform:uppercase;color:var(--slate-2)}
.nav-dd-btn--ai{font-weight:600;color:var(--blue-ink)}
.nav-dd-btn--ai:hover,.nav-dd-btn--ai[aria-expanded="true"]{color:var(--blue-ink);background:var(--blue-wash)}
.nav-dd-btn--ai::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--blue)}
@media (max-width:1320px){.nav a,.nav-dd-btn{padding-inline:9px}}

.nav a,.nav-dd-btn{white-space:nowrap}
.nav .nav-dd a{white-space:normal}

/* ---------- 15. Accessibility refinements ---------- */
.check input{width:24px;height:24px;margin:0}
.site-footer address a,.site-footer p a,.footer-mark a{text-decoration:underline;text-underline-offset:3px}
.sr-only-th{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}

/* chat: lead capture */
.chat-lead{padding:var(--s-3) var(--s-4);border-top:1px solid var(--line);background:var(--blue-wash);display:grid;gap:8px;max-height:46%;overflow-y:auto}
.chat-lead[hidden]{display:none}
.chat-lead strong{font-size:.9375rem}
.chat-lead p{margin:0;font-size:.8125rem;color:var(--ink-2);line-height:1.45}
.chat-lead .btn{justify-self:start}
.chat-lead-form{display:grid;gap:8px}
.chat-lead-f{display:grid;gap:3px;font-size:.75rem;font-weight:500;color:var(--ink-2)}
.chat-lead-f .input{min-height:40px;padding:8px 10px;font-size:.9375rem}
.chat-lead .check{font-size:.75rem}
.chat-lead-err{color:var(--err)!important;font-weight:500}
.chat-lead-ok{font-weight:500;color:var(--ok)!important}
.chat-launch span{white-space:nowrap}