/* ===========================================================================
   ca-marketing.css — the shared stylesheet for CyberAware's PUBLIC pages:
   index.php (home), products.php, privacypolicy.php.

   WHY A SECOND FILE, NEXT TO assets/css/ca-ui.css
   ca-ui.css dresses the logged-in application (Bootstrap 4 + DataTables + the
   new admin shell) and carries the prototype's auth/doc looks as body.ca-auth /
   body.ca-doc. The marketing pages are a different animal: no Bootstrap, no
   jQuery, no theme CSS — a self-contained landing look (hero, service grid,
   product journey, legal document) that ca-ui.css never had. Those three pages
   each carried their OWN inline copy of it, ~630 duplicated lines. This file is
   that copy, once.

   OPT-IN CONTRACT — the whole API
     <body class="ca-pub ca-home">      index.php
     <body class="ca-pub ca-products">  products.php
     <body class="ca-pub ca-legal">     privacypolicy.php
   and link this file in <head>. EVERY rule below is scoped to body.ca-pub (or
   to one of the three page classes), so a page that does not opt in is
   unaffected, and a page that never links the file is untouched by
   construction. Nothing here is loaded by the admin shell and nothing here
   touches dist/ or ca-ui.css.

   LAYOUT OF THE FILE
     0  tokens                      the marketing palette (--red, --ink, …)
     1  base + reset                typography, box model
     2  accessibility               focus rings, skip link
     3  RTL / Arabic                the mirroring and the Arabic font switch
     4  site chrome                 nav bar, logo mark, flag strip, footer logo
     5  motion                      the three keyframes
     6  shared page rules           rules that two or three pages agree on
     7  body.ca-home                index.php only
     8  body.ca-products            products.php only
     9  body.ca-legal               privacypolicy.php only

   Sections 7-9 were transcribed from the three pages' inline <style> blocks,
   the selectors gaining a page scope. Sections 4-6 are the site, not a page:
   the nav bar and the footer are emitted by dist/php/public-chrome.php as ONE
   markup definition for every public page, so their rules are shared too, and
   the classes the pages used to disagree about (.nav-cta, .lang-switch, .pill,
   .eyebrow, .btn-red, h2, .sec-top, .pad) are converged there onto
   products.php's treatment — the newer page. What stays in a page layer is
   what only that page has: index's hero dashboard, the product journey spine,
   the legal document's table of contents.

   RTL: no bare left/right anywhere in sections 0-5. Sections 6-9 keep the
   logical properties and explicit [dir="rtl"] rules the pages already had.
   =========================================================================== */

/* ---- 0. TOKENS ---------------------------------------------------------- */
:root{
  --red:#D0202A; --red-dark:#a5161e; --red-light:#ffeaea;
  --ink:#0d0d0d; --ink2:#1a1a1a;
  --muted:#5f5f5f;              /* 6.1:1 on white — passes AA */
  --border:#e0e0e0; --white:#fff; --off:#f7f7f7;
  --nav-h:70px;
  /* The display face. The fallback after Orbitron is what every glyph Orbitron
     does not carry renders in — and Orbitron carries no Arabic at all. In LTR
     the stack stays exactly what the three pages shipped, monospace included,
     so English is untouched down to the pixel; section 3 re-points the fallback
     at the Arabic body face for RTL, which is where it matters. */
  --font-display:'Orbitron',monospace;
}

/* ---- 1. BASE + RESET --------------------------------------------------- */
html{scroll-behavior:smooth}
body.ca-pub{background:var(--white);color:var(--ink);
  font-family:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Tahoma,sans-serif;
  font-weight:300;line-height:1.5;overflow-x:hidden;margin:0;padding:0;box-sizing:border-box}
body.ca-pub *,body.ca-pub *::before,body.ca-pub *::after{box-sizing:border-box;margin:0;padding:0}
body.ca-pub img{max-width:100%;display:block}
body.ca-pub a{color:inherit}

/* ---- 2. ACCESSIBILITY -------------------------------------------------- */
body.ca-pub :focus-visible{outline:3px solid var(--red);outline-offset:3px}
/* The skip link hides ABOVE the viewport rather than 9999px to the side: an
   off-canvas horizontal offset is the one form of hiding that flips to the
   wrong edge under RTL and can add a horizontal scrollbar. */
body.ca-pub .skip{position:absolute;top:0;inset-inline-start:0;transform:translateY(-200%);
  z-index:999;background:var(--ink);color:#fff;padding:12px 20px;font-size:.85rem}
body.ca-pub .skip:focus{transform:none;margin:8px}

/* ---- 3. RTL / ARABIC --------------------------------------------------- */
html[dir="rtl"] body.ca-pub{font-family:'DM Sans','Segoe UI',Tahoma,Arial,sans-serif;
  /* THE Arabic fix, in one declaration: every display-face element on these
     pages reads --font-display, so re-pointing its fallback from monospace to
     the body face repairs every button, eyebrow, badge and label at once.
     Monospaced Arabic renders with even advance widths that pull the cursive
     joins apart, so the script reads as disconnected letters. Latin is
     unaffected: this variable is only redefined under [dir="rtl"]. */
  --font-display:'Orbitron','DM Sans','Segoe UI',Tahoma,Arial,sans-serif}
/* Headings go further than the fallback above: they drop to the body face
   outright, and letter-spacing resets to 0, because tracking does the same
   damage to a joined script that monospacing does. Latin-only furniture (the
   CYBER AWARE wordmark, the big statistic numerals, the card numbers) keeps
   Orbitron through --font-display — it still looks right. products.php shipped
   this rule; it now covers all three pages, at a specificity the page layers
   cannot accidentally outrank. */
html[dir="rtl"] body.ca-pub h1,
html[dir="rtl"] body.ca-pub h2,
html[dir="rtl"] body.ca-pub h3,
html[dir="rtl"] body.ca-pub .pil-badge,
html[dir="rtl"] body.ca-pub .jr-time{
  font-family:'DM Sans','Segoe UI',Tahoma,Arial,sans-serif;
  letter-spacing:0;
}
html[dir="rtl"] body.ca-pub h1{font-weight:500;line-height:1.25}
html[dir="rtl"] body.ca-pub h2{font-weight:500;line-height:1.3}
/* The same reasoning for the small caps furniture that carries TRANSLATED text.
   The latin wordmarks (.f-logo, .db-brand, the CYBER AWARE lockup) and the
   numerals keep their tracking — they are never Arabic. */
html[dir="rtl"] body.ca-pub .btn-red,
html[dir="rtl"] body.ca-pub .btn-outline,
html[dir="rtl"] body.ca-pub .nav-cta,
html[dir="rtl"] body.ca-pub .hero-tag,
html[dir="rtl"] body.ca-pub .eyebrow,
html[dir="rtl"] body.ca-pub .typed-line,
html[dir="rtl"] body.ca-pub .b-lbl,
html[dir="rtl"] body.ca-pub .made-t strong,
html[dir="rtl"] body.ca-pub .made-t span,
html[dir="rtl"] body.ca-pub .svc-num,
html[dir="rtl"] body.ca-pub .mod-t,
html[dir="rtl"] body.ca-pub .pill,
html[dir="rtl"] body.ca-pub .uae-card span,
html[dir="rtl"] body.ca-pub .db-status,
html[dir="rtl"] body.ca-pub .db-metric-label,
html[dir="rtl"] body.ca-pub .hs-l,
html[dir="rtl"] body.ca-pub .feat-tag,
html[dir="rtl"] body.ca-pub .jr-time,
html[dir="rtl"] body.ca-pub .eff,
html[dir="rtl"] body.ca-pub .toc h2,
html[dir="rtl"] body.ca-pub .contact-card p,
html[dir="rtl"] body.ca-pub .f-links a{letter-spacing:0}

/* ---- 4. SITE CHROME (identical on all three pages) -------------------- */
/* The chrome sets its own line-height. body.ca-products and body.ca-clients raise the page to
   1.55 for their body copy, which leaked into the shared header and footer and made the "one
   chrome" a pixel taller on those two pages than on the other three. */
body.ca-pub nav,body.ca-pub footer{line-height:1.5}
body.ca-pub nav{position:fixed;top:0;inset-inline:0;z-index:200;display:flex;align-items:center;
  justify-content:space-between;gap:20px;padding:0 60px;height:var(--nav-h);
  background:rgba(255,255,255,.94);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border)}
body.ca-pub .nav-logo{display:flex;align-items:center;gap:12px;font-family:var(--font-display);
  font-size:1rem;font-weight:700;letter-spacing:.18em;color:var(--ink);text-decoration:none;white-space:nowrap}
body.ca-pub .logo-badge{width:38px;height:38px;background:var(--ink);display:flex;align-items:center;
  justify-content:center;font-size:.75rem;font-weight:900;color:#fff;position:relative;flex-shrink:0;
  clip-path:polygon(0 0,86% 0,100% 14%,100% 100%,14% 100%,0 86%)}
/* inset-inline-start replaces the old left:3px + [dir=rtl]{left:auto;right:3px} pair. */
body.ca-pub .logo-badge::after{content:'';position:absolute;top:3px;inset-inline-start:3px;
  width:8px;height:8px;background:var(--red)}
body.ca-pub .nav-right{display:flex;align-items:center;gap:16px}
body.ca-pub .strip{display:flex;height:5px}
body.ca-pub .strip i{flex:1;display:block}
body.ca-pub .strip .a{background:var(--red)}
body.ca-pub .strip .b{background:var(--border)}
body.ca-pub .strip .c{background:#000}
body.ca-pub .f-logo{font-family:var(--font-display);font-size:.85rem;font-weight:700;letter-spacing:.18em;
  color:#fff;display:flex;align-items:center;gap:10px}

/* ---- 5. MOTION -------------------------------------------------------- */
@keyframes rise{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
@keyframes caret{50%{opacity:0}}
@keyframes blink{50%{opacity:.3}}

/* Reduced motion. The kill switch is shared; each page layer adds its own
   extras below (the home page's custom cursor, the product page's reveal). */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  body.ca-pub *,body.ca-pub *::before,body.ca-pub *::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}

/* Both pages navigate to their own sections from the nav bar, and the nav bar is
   FIXED: without this the heading an anchor lands on sits underneath it. The
   legal page already did this on .doc h2. Affects nothing but anchor scrolling. */
body.ca-home section[id],body.ca-products section[id]{scroll-margin-top:calc(var(--nav-h) + 20px)}

/* ---- 6. SHARED PAGE RULES --------------------------------------------- */
/* NAV — one markup definition (dist/php/public-chrome.php), one set of rules. */
body.ca-pub .nav-links{display:flex;gap:30px;list-style:none;font-size:.85rem;letter-spacing:.03em}
body.ca-pub .nav-links a{position:relative;padding:6px 0;color:var(--ink2);text-decoration:none}
body.ca-pub .nav-links a::after{content:'';position:absolute;bottom:0;inset-inline-start:0;width:0;height:2px;
  background:var(--red);transition:width .25s}
body.ca-pub .nav-links a:hover::after,body.ca-pub .nav-links a.on::after{width:100%}
body.ca-pub .nav-links a.on{color:var(--red)}
body.ca-pub .lang-switch{display:flex;gap:6px;font-size:.75rem;border:1px solid var(--border);border-radius:20px;padding:3px}
body.ca-pub .lang-switch a{padding:4px 11px;border-radius:14px;color:var(--muted);text-decoration:none}
body.ca-pub .lang-switch a.on{background:var(--red);color:#fff}
body.ca-pub .nav-cta{background:var(--ink);color:#fff;padding:10px 22px;border-radius:24px;font-size:.8rem;
  letter-spacing:.04em;text-decoration:none;white-space:nowrap;transition:background .2s}
body.ca-pub .nav-cta:hover{background:var(--red)}
body.ca-pub .nav-burger{display:none;background:none;border:0;font-size:1.4rem;color:var(--ink);padding:6px;cursor:pointer}

/* BUTTONS — one geometry for every public call to action. The page layers set
   only the colours, which have to differ because the backgrounds do. */
body.ca-pub .btn,body.ca-pub .btn-red,body.ca-pub .btn-outline{display:inline-block;padding:14px 30px;
  border-radius:26px;font-size:.85rem;letter-spacing:.04em;text-decoration:none;border:none;transition:all .2s}
body.ca-home .btn-red:hover,body.ca-legal .btn-red:hover{background:var(--red-dark);transform:translateY(-2px);box-shadow:0 8px 24px rgba(208,32,42,.25)}

/* SECTION RHYTHM — products.php's scale, on the pages built out of sections. */
body.ca-pub .eyebrow{display:flex;align-items:center;gap:10px;font-size:.72rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--red);font-weight:500;margin-bottom:16px}
body.ca-pub .eyebrow i{width:26px;height:2px;background:var(--red);display:block}
body.ca-home section.pad,body.ca-products .pad{padding:100px 60px}
body.ca-home .sec-top,body.ca-products .sec-top{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:end;margin-bottom:60px}
body.ca-home .sec-top p,body.ca-products .sec-top p{color:var(--muted);font-size:1.02rem;max-width:56ch}
body.ca-home h2,body.ca-products h2{font-family:var(--font-display);font-weight:900;font-size:clamp(1.8rem,4vw,3rem);
  line-height:1.12;letter-spacing:-.01em}
body.ca-home .pill,body.ca-products .pill{border:1px solid rgba(255,255,255,.26);border-radius:18px;padding:7px 16px;
  font-size:.76rem;letter-spacing:.04em;color:rgba(255,255,255,.85)}

/* FOOTER */
body.ca-pub footer{background:var(--ink);color:rgba(255,255,255,.62);padding:46px 60px;display:flex;flex-wrap:wrap;
  gap:18px;align-items:center;justify-content:space-between;font-size:.82rem;border-top:3px solid transparent;
  border-image:linear-gradient(90deg,#000 33.3%,#fff 33.3% 66.6%,var(--red) 66.6%) 1}
body.ca-pub .f-copy{font-size:.75rem;color:rgba(255,255,255,.45)}
body.ca-pub .f-copy a{color:rgba(255,255,255,.75)}
body.ca-pub .f-links{display:flex;gap:22px;flex-wrap:wrap}
body.ca-pub .f-links a{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.45);
  text-decoration:none;transition:color .2s;background:none;border:none;font-family:inherit}
body.ca-pub .f-links a:hover{color:#fff}

/* The nav collapses EARLIER than the rest of the layout. Five links plus the
   language switch, the login button and the burger overflow the row at around
   900px — well above the mobile breakpoint — so they fold into the burger at
   980px and the bar stays on one line at every width. */
@media (max-width:980px){
body.ca-pub .nav-links{display:none}
body.ca-pub .nav-links.open{display:flex;position:absolute;top:var(--nav-h);inset-inline:0;flex-direction:column;
    gap:0;background:#fff;border-bottom:1px solid var(--border);padding:8px 22px 16px}
body.ca-pub .nav-links.open li a{display:block;padding:12px 0;border-bottom:1px solid var(--border)}
body.ca-pub .nav-burger{display:block}
}
/* 340px of track plus 22px of padding each side does not fit a 360px phone, and the overflow
   escaped the viewport - the only public page that scrolled sideways. */
@media (max-width:820px){
  body.ca-products .feat-grid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:760px){
body.ca-pub nav{padding:0 22px}
body.ca-pub footer{padding:34px 22px}
}
/* Phones. The full lockup is 221px wide (badge, 12px gap, then "CYBER AWARE" at
   1rem with .18em tracking), which together with the language switch, the login
   button and the burger pushes the bar past the viewport below roughly 520px.
   The mark itself is untouched: the lockup collapses to the badge, which is the
   logo's own standalone form. */
@media (max-width:520px){
body.ca-pub nav{padding:0 14px;gap:10px}
body.ca-pub .nav-logo span:not(.logo-badge){display:none}
body.ca-pub .lang-switch{padding:2px}
body.ca-pub .lang-switch a{padding:4px 9px;font-size:.7rem}
body.ca-pub .nav-cta{padding:9px 16px;font-size:.75rem}
}

/* =======================================================================
   7. body.ca-home — index.php. From its own <style> block, verbatim.
   ======================================================================= */
/* Accessibility: real focus rings, and a skip link that is only visible on focus. */

/* Custom cursor: pointer devices only, and never when reduced motion is requested. */
body.ca-home .cursor,body.ca-home .cursor-ring{display:none}
@media (hover:hover) and (pointer:fine){
body.ca-home.ca-cursor{cursor:none}
body.ca-home.ca-cursor a,body.ca-home.ca-cursor button{cursor:none}
body.ca-home.ca-cursor .cursor{display:block;width:10px;height:10px;background:var(--red);border-radius:50%;
    position:fixed;top:0;left:0;pointer-events:none;z-index:9999}
body.ca-home.ca-cursor .cursor-ring{display:block;width:32px;height:32px;border:1.5px solid rgba(208,32,42,.35);
    border-radius:50%;position:fixed;top:0;left:0;pointer-events:none;z-index:9998}
}
@media (prefers-reduced-motion:reduce){
body.ca-home.ca-cursor{cursor:auto}
body.ca-home.ca-cursor .cursor,body.ca-home.ca-cursor .cursor-ring{display:none}
}

/* HERO */
body.ca-home .hero{min-height:100vh;display:grid;grid-template-columns:1fr 1fr;align-items:center;
  padding:var(--nav-h) 60px 0;position:relative;overflow:hidden;background:var(--white)}
body.ca-home .hero-geo{position:absolute;inset-inline-end:0;top:0;width:50%;height:100%;background:var(--off);
  clip-path:polygon(8% 0,100% 0,100% 100%,0 100%);z-index:0}
html[dir="rtl"] body.ca-home .hero-geo{clip-path:polygon(0 0,92% 0,100% 100%,0 100%)}
body.ca-home .hero-geo::before{content:'';position:absolute;inset:0;
  background-image:linear-gradient(rgba(208,32,42,.04) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(208,32,42,.04) 1px,transparent 1px);
  background-size:40px 40px}
body.ca-home .hero-left{position:relative;z-index:2;padding-inline-end:48px;padding-block:120px 60px}
body.ca-home .hero-tag{display:inline-flex;align-items:center;gap:8px;background:var(--red-light);
  border:1px solid rgba(208,32,42,.18);padding:6px 14px;font-size:.68rem;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:var(--red-dark);margin-bottom:26px;animation:rise .7s ease both}
body.ca-home h1{font-family:var(--font-display);font-size:clamp(2.2rem,4.5vw,4.2rem);font-weight:900;
  line-height:1.05;color:var(--ink);animation:rise .7s .1s ease both}
body.ca-home h1 span{display:block}
body.ca-home h1 .l-outline{color:transparent;-webkit-text-stroke:2px var(--ink)}
body.ca-home h1 .l-red{color:var(--red)}
body.ca-home .typed-line{margin-top:18px;font-family:var(--font-display);font-size:clamp(.8rem,1.4vw,1rem);
  letter-spacing:.1em;color:var(--red);min-height:1.6em;animation:rise .7s .15s ease both}
body.ca-home .typed-caret{display:inline-block;width:2px;background:var(--red);margin-inline-start:3px;
  animation:caret 1s step-end infinite;vertical-align:-2px;height:1em}
body.ca-home .hero-desc{margin-top:20px;font-size:1.02rem;line-height:1.75;color:var(--muted);max-width:480px;
  animation:rise .7s .2s ease both}
body.ca-home .hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:38px;animation:rise .7s .3s ease both}
body.ca-home .btn-red{background:var(--red);color:#fff}
body.ca-home .btn-outline{background:transparent;color:var(--ink);border:1.5px solid var(--ink)}
body.ca-home .btn-outline:hover{background:var(--ink);color:#fff;transform:translateY(-2px)}

/* HERO VISUAL */
body.ca-home .hero-right{position:relative;z-index:2;padding:60px 0 60px 48px;animation:rise .8s .5s ease both}
/* A flex column with no height collapses to its own minimum; 430px is the budget
   the widget was designed and measured against. */
body.ca-home .hero-right .cam{height:430px}
html[dir="rtl"] body.ca-home .hero-right{padding:60px 48px 60px 0}
body.ca-home .dash{background:#fff;border:1px solid var(--border);border-radius:6px;overflow:hidden;
  box-shadow:0 4px 40px rgba(208,32,42,.08),0 1px 4px rgba(0,0,0,.06)}
body.ca-home .db-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 20px;
  background:var(--ink);border-bottom:2px solid var(--red)}
body.ca-home .db-brand{font-family:var(--font-display);font-size:.65rem;font-weight:700;letter-spacing:.2em;color:#fff}
body.ca-home .db-brand small{display:block;font-size:.5rem;color:rgba(255,255,255,.45);letter-spacing:.15em;margin-top:2px}
body.ca-home .db-status{display:flex;align-items:center;gap:6px;font-size:.6rem;letter-spacing:.12em;color:#4ade80;white-space:nowrap}
body.ca-home .dot{width:6px;height:6px;background:#4ade80;border-radius:50%;animation:blink 1.5s infinite}
body.ca-home .db-body{padding:20px;background:#fafbfd}
body.ca-home .db-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:16px}
body.ca-home .db-metric{background:#fff;border:1px solid var(--border);border-radius:4px;padding:14px;position:relative;overflow:hidden}
body.ca-home .db-metric::before{content:'';position:absolute;top:0;left:0;right:0;height:2px}
body.ca-home .db-metric.r::before{background:var(--red)}
body.ca-home .db-metric.g::before{background:#10b981}
body.ca-home .db-metric.b::before{background:var(--ink)}
body.ca-home .db-metric-val{font-family:var(--font-display);font-size:.85rem;font-weight:700;line-height:1}
body.ca-home .db-metric.r .db-metric-val{color:var(--red)}
body.ca-home .db-metric.g .db-metric-val{color:#0f8f68}
body.ca-home .db-metric.b .db-metric-val{color:var(--ink)}
body.ca-home .db-metric-label{font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-top:4px}
body.ca-home .db-scan{background:var(--ink);border-radius:4px;padding:18px;display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:center}
body.ca-home .ring{width:80px;height:80px;position:relative;flex-shrink:0}
body.ca-home .ring svg{width:100%;height:100%;transform:rotate(-90deg)}
body.ca-home .ring .lbl{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  font-family:var(--font-display);font-size:1rem;font-weight:700;color:#fff}
body.ca-home .ring .lbl small{font-size:.45rem;color:rgba(255,255,255,.45);letter-spacing:.12em}
body.ca-home .log{font-family:'Courier New',monospace;font-size:.62rem;padding:4px 0;
  border-bottom:1px solid rgba(255,255,255,.05);color:rgba(255,255,255,.42);display:flex;gap:8px}
body.ca-home .log.hi{color:#60d0ff}
body.ca-home .log .ok{color:#4ade80}
body.ca-home .log .warn{color:#fbbf24}
body.ca-home .log .ts{color:rgba(255,255,255,.28)}

/* STRIPS + BANNER */
body.ca-home .banner{background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;
  flex-wrap:wrap;gap:40px;padding:28px 60px;position:relative}
body.ca-home .banner::before{content:'';position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,#000 33.3%,#fff 33.3% 66.6%,var(--red) 66.6%)}
body.ca-home .made{display:flex;align-items:center;gap:12px;padding:14px 22px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04)}
body.ca-home .flag{display:flex;width:32px;height:21px;overflow:hidden;border-radius:2px;flex-shrink:0}
body.ca-home .flag .r{width:10px;background:#D0202A}
body.ca-home .flag .s{display:flex;flex-direction:column;flex:1}
body.ca-home .flag .g{flex:1;background:#00732F}
body.ca-home .flag .w{flex:1;background:#fff}
body.ca-home .flag .k{flex:1;background:#000}
body.ca-home .made-t strong{display:block;color:#fff;font-weight:500;font-size:.8rem;letter-spacing:.1em}
body.ca-home .made-t span{color:rgba(255,255,255,.45);font-size:.62rem;letter-spacing:.08em}
body.ca-home .b-item{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center}
body.ca-home .b-val{font-size:1.5rem;line-height:1}
body.ca-home .b-lbl{font-size:.66rem;letter-spacing:.15em;text-transform:uppercase;color:rgba(255,255,255,.5)}
body.ca-home .b-div{width:1px;height:40px;background:rgba(255,255,255,.12)}

/* SECTIONS */
body.ca-home .svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border)}
body.ca-home .svc{background:#fff;padding:42px 34px;position:relative;overflow:hidden;transition:background .25s}
body.ca-home .svc:hover{background:var(--off)}
body.ca-home .svc::after{content:'';position:absolute;bottom:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--red),#000);transform:scaleX(0);transform-origin:left;transition:transform .35s}
html[dir="rtl"] body.ca-home .svc::after{transform-origin:right}
body.ca-home .svc:hover::after{transform:scaleX(1)}
body.ca-home .svc-num{font-family:var(--font-display);font-size:.6rem;letter-spacing:.2em;color:var(--red-dark);margin-bottom:18px}
body.ca-home .svc-ico{width:52px;height:52px;background:var(--off);border:1px solid var(--border);display:flex;
  align-items:center;justify-content:center;font-size:1.4rem;margin-bottom:22px;position:relative}
body.ca-home .svc-ico::before{content:'';position:absolute;bottom:-5px;inset-inline-end:-5px;width:100%;height:100%;border:1px solid var(--red);opacity:.2}
body.ca-home .svc h3{font-family:var(--font-display);font-size:.88rem;font-weight:700;letter-spacing:.08em;margin-bottom:12px}
body.ca-home .svc p{font-size:.88rem;line-height:1.7;color:var(--muted)}
body.ca-home .mod-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border)}
body.ca-home .mod{background:#fff;padding:32px 26px;position:relative;transition:background .2s}
body.ca-home .mod:hover{background:#111}
body.ca-home .mod:hover .mod-t{color:#fff}
body.ca-home .mod:hover li{color:rgba(255,255,255,.75);border-bottom-color:rgba(255,255,255,.1)}
body.ca-home .mod:hover .mod-n{color:rgba(255,255,255,.07)}
body.ca-home .mod:hover .mod-ico{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.2)}
body.ca-home .mod-n{font-family:var(--font-display);font-size:3.6rem;font-weight:900;color:rgba(208,32,42,.07);
  position:absolute;top:12px;inset-inline-end:16px;line-height:1;transition:color .2s}
body.ca-home .mod-ico{width:48px;height:48px;background:var(--red-light);border:1px solid rgba(208,32,42,.15);
  display:flex;align-items:center;justify-content:center;font-size:1.3rem;margin-bottom:18px;transition:all .2s}
body.ca-home .mod-t{font-family:var(--font-display);font-size:.78rem;font-weight:700;letter-spacing:.08em;margin-bottom:14px;transition:color .2s}
body.ca-home .mod ul{list-style:none;display:flex;flex-direction:column;gap:6px}
body.ca-home .mod li{font-size:.78rem;color:var(--muted);padding:5px 0;border-bottom:1px solid var(--border);
  display:flex;align-items:center;gap:8px;transition:color .2s,border-color .2s}
body.ca-home .mod li::before{content:'›';color:var(--red);font-weight:700}
html[dir="rtl"] body.ca-home .mod li::before{content:'‹'}

/* UAE */
body.ca-home .uae{padding:100px 60px;background:var(--ink);position:relative;overflow:hidden}
body.ca-home .uae::before{content:'UAE';position:absolute;inset-inline-end:-40px;top:-40px;font-family:var(--font-display);
  font-size:18rem;font-weight:900;color:rgba(255,255,255,.025);line-height:1;pointer-events:none}
body.ca-home .uae-in{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center;position:relative;z-index:1}
body.ca-home .uae .eyebrow{color:#fff}
body.ca-home .uae .eyebrow i{background:#fff}
body.ca-home .uae h2{color:#fff;margin-bottom:18px}
body.ca-home .uae p{font-size:.98rem;line-height:1.78;color:rgba(255,255,255,.62);max-width:440px;margin-bottom:32px}
body.ca-home .pills{display:flex;flex-wrap:wrap;gap:10px}
body.ca-home .pill{display:inline-flex;align-items:center;gap:8px}
body.ca-home .pill i{width:6px;height:6px;border-radius:50%;display:block;flex-shrink:0}
body.ca-home .pill:nth-child(1) i{background:var(--red)}
body.ca-home .pill:nth-child(2) i{background:#fff}
body.ca-home .pill:nth-child(3) i{background:#00732F}
body.ca-home .pill:nth-child(4) i{background:var(--red)}
body.ca-home .uae-cards{display:grid;grid-template-columns:1fr 1fr;gap:16px}
body.ca-home .uae-card{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);padding:26px 22px;position:relative}
body.ca-home .uae-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px}
body.ca-home .uae-card:nth-child(1)::before{background:var(--red)}
body.ca-home .uae-card:nth-child(2)::before{background:#fff}
body.ca-home .uae-card:nth-child(3)::before{background:#00732F}
body.ca-home .uae-card:nth-child(4)::before{background:var(--red)}
body.ca-home .uae-card b{display:block;font-family:var(--font-display);font-size:1.7rem;font-weight:700;color:#fff;line-height:1;margin-bottom:6px}
body.ca-home .uae-card span{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.5)}

/* CTA */
body.ca-home .end{padding:100px 60px;background:var(--off);text-align:center;position:relative;overflow:hidden}
body.ca-home .end::before,body.ca-home .end::after{content:'';position:absolute;border-radius:50%;border:1px solid var(--border);
  top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none}
body.ca-home .end::before{width:600px;height:600px}
body.ca-home .end::after{width:900px;height:900px}
body.ca-home .end .eyebrow{justify-content:center}
body.ca-home .end h2{margin-bottom:18px;position:relative;z-index:1}
body.ca-home .end p{font-size:1rem;color:var(--muted);max-width:480px;margin:0 auto 40px;line-height:1.7;position:relative;z-index:1}
body.ca-home .end-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;position:relative;z-index:1}

/* REVEAL */
body.ca-home .reveal{opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s ease}
body.ca-home .reveal.on{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
body.ca-home .reveal{opacity:1;transform:none}
}
@media (max-width:1000px){
body.ca-home .hero{grid-template-columns:1fr;padding:var(--nav-h) 24px 40px;min-height:auto}
body.ca-home .hero-left{padding-inline-end:0;padding-block:80px 20px}
body.ca-home .hero-right,body.ca-home .hero-geo{display:none}
body.ca-home section.pad,body.ca-home .uae,body.ca-home .end{padding:70px 24px}
body.ca-home .svc-grid,body.ca-home .mod-grid,body.ca-home .uae-in,body.ca-home .uae-cards{grid-template-columns:1fr}
body.ca-home .banner{gap:20px;padding:26px 24px}
body.ca-home .b-div{display:none}
body.ca-home .uae::before{font-size:9rem}
}

/* The hero console miniature, index.php only. Scoped under body.ca-pub so the reset in
   section 1 does not strip its padding; logical properties throughout, so it mirrors. */
/* The widget switches modules with the `hidden` ATTRIBUTE, and its panels declare
   display:flex. An author rule beats the user-agent [hidden]{display:none} whatever the
   specificity, so without this every panel renders at once, stacked: the sidebar and the
   caption advanced while the content underneath never changed. The demo page carried
   [hidden]{display:none!important} in its own reset; this stylesheet has no such rule, so
   the widget brings its own, scoped to itself. */
body.ca-pub .cam [hidden]{display:none}

/* =====================================================================
   THE WIDGET.  Everything below is scoped to .cam and is what would move
   into ca-marketing.css section 7 (body.ca-home).  The tokens read the
   marketing palette when it is present and fall back to the same literal
   values, so the block also stands alone in this demo.
   ===================================================================== */
body.ca-pub .cam{
  --cam-red:var(--red,#D0202A);
  --cam-red-soft:#fef2f2;
  --cam-red-tint:#fee2e2;
  --cam-ink:var(--ink,#0d0d0d);
  --cam-muted:var(--muted,#5f5f5f);
  --cam-border:var(--border,#e0e0e0);
  --cam-off:var(--off,#f7f7f7);
  --cam-rule:#f0f0f0;
  --cam-green:#16a34a;  --cam-green-tint:#dcfce7;
  --cam-orange:#ea580c; --cam-orange-tint:#ffedd5;
  --cam-blue:#0369a1;   --cam-blue-tint:#e0f2fe;
  --cam-disp:var(--font-display,'Orbitron','Bahnschrift','Eurostile',Consolas,monospace);
  --cam-mono:ui-monospace,'Cascadia Mono',Consolas,'Liberation Mono','Courier New',monospace;
  position:relative;display:flex;flex-direction:column;height:100%;min-width:0;
  background:#fff;border:1px solid var(--cam-border);border-radius:6px;overflow:hidden;
  box-shadow:0 4px 40px rgba(208,32,42,.08),0 1px 4px rgba(0,0,0,.06);
  color:var(--cam-ink);font-size:12px;line-height:1.45;font-weight:400}

body.ca-pub .cam-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
  clip-path:inset(50%);white-space:nowrap}

/* ---- topbar: dist/php/ui-shell.php .tb-* ---------------------------- */
body.ca-pub .cam-top{flex:0 0 auto;display:flex;align-items:center;gap:8px;height:34px;padding-inline:10px;
  background:#111;border-bottom:2px solid var(--cam-red)}
body.ca-pub .cam-badge{flex:0 0 18px;width:18px;height:18px;background:var(--cam-red);color:#fff;
  font-family:var(--cam-disp);font-size:8px;font-weight:700;display:flex;align-items:center;
  justify-content:center;clip-path:polygon(0 0,85% 0,100% 15%,100% 100%,15% 100%,0 85%)}
body.ca-pub .cam-word{font-family:var(--cam-disp);font-size:9.5px;font-weight:700;letter-spacing:.14em;
  color:#fff;white-space:nowrap}
body.ca-pub .cam-pg{flex:1 1 auto;min-width:0;font-family:var(--cam-disp);font-size:9px;letter-spacing:.08em;
  color:rgba(255,255,255,.44);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  padding-inline-start:9px;border-inline-start:1px solid rgba(255,255,255,.14)}
body.ca-pub .cam-pin{flex:0 0 auto;font-family:var(--cam-disp);font-size:7.5px;letter-spacing:.14em;
  color:#fff;background:var(--cam-red);padding:1px 5px;white-space:nowrap}
body.ca-pub .cam-sample{flex:0 0 auto;font-family:var(--cam-disp);font-size:7.5px;letter-spacing:.14em;
  color:rgba(255,255,255,.55);border:1px solid rgba(255,255,255,.22);padding:1px 5px;
  white-space:nowrap}

/* ---- shell ---------------------------------------------------------- */
body.ca-pub .cam-body{flex:1 1 auto;display:flex;min-height:0;min-width:0}
body.ca-pub .cam-side{flex:0 0 112px;min-width:0;background:#fff;padding-block:6px;
  border-inline-end:1px solid var(--cam-border);display:flex;flex-direction:column}

/* sidebar item: ca-ui.css .ni / .ni.active */
body.ca-pub .cam-ni{display:flex;align-items:center;gap:7px;width:100%;min-width:0;
  padding:7px 9px;font:inherit;font-size:10.5px;text-align:start;cursor:pointer;
  color:var(--cam-muted);background:transparent;border:0;
  border-inline-start:3px solid transparent;
  -webkit-appearance:none;appearance:none;transition:background .14s,color .14s}
body.ca-pub .cam-ni svg{flex:0 0 13px;width:13px;height:13px;fill:none;stroke:currentColor;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
body.ca-pub .cam-ni-t{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body.ca-pub .cam-ni:hover{background:var(--cam-off);color:var(--cam-ink)}
body.ca-pub .cam-ni[aria-selected="true"]{color:var(--cam-red);background:var(--cam-red-soft);
  border-inline-start-color:var(--cam-red);font-weight:500}
body.ca-pub .cam-ni:focus{outline:2px solid var(--cam-red);outline-offset:-3px}
body.ca-pub .cam-ni:focus:not(:focus-visible){outline:none}
body.ca-pub .cam-ni:focus-visible{outline:2px solid var(--cam-red);outline-offset:-3px}

body.ca-pub .cam-main{flex:1 1 auto;min-width:0;background:var(--cam-off);padding:9px;
  position:relative;overflow:hidden}
body.ca-pub .cam-prog{position:absolute;top:0;inset-inline-start:0;height:2px;width:0;
  background:var(--cam-red);opacity:.8}
body.ca-pub .cam-panel{display:flex;flex-direction:column;gap:8px;height:100%;min-height:0}
body.ca-pub .cam-panel:focus{outline:2px solid var(--cam-red);outline-offset:-4px}
body.ca-pub .cam-panel:focus:not(:focus-visible){outline:none}

/* ---- kpi row: ca-ui.css .krow / .kpi -------------------------------- */
body.ca-pub .cam-krow{flex:0 0 auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
body.ca-pub .cam-kpi{min-width:0;overflow:hidden;background:#fff;border:1px solid var(--cam-border);
  border-top:3px solid var(--cam-border);padding:6px 8px}
body.ca-pub .cam-kpi.r{border-top-color:var(--cam-red)}
body.ca-pub .cam-kpi.g{border-top-color:var(--cam-green)}
body.ca-pub .cam-kpi.o{border-top-color:var(--cam-orange)}
body.ca-pub .cam-kpi.k{border-top-color:var(--cam-ink)}
body.ca-pub .cam-kl{font-size:8px;letter-spacing:.1em;text-transform:uppercase;color:var(--cam-muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.ca-pub .cam-kv{font-family:var(--cam-disp);font-size:15px;font-weight:700;line-height:1.2;
  font-variant-numeric:tabular-nums;unicode-bidi:isolate}
body.ca-pub .cam-kpi.r .cam-kv{color:var(--cam-red)}
body.ca-pub .cam-kpi.g .cam-kv{color:var(--cam-green)}
body.ca-pub .cam-kpi.o .cam-kv{color:var(--cam-orange)}

/* ---- card: ca-ui.css .card / .ch / .ct / .cic ----------------------- */
body.ca-pub .cam-card{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;overflow:hidden;
  background:#fff;border:1px solid var(--cam-border);padding:8px 9px}
body.ca-pub .cam-ch{flex:0 0 auto;display:flex;align-items:center;gap:6px;padding-bottom:6px;
  margin-bottom:7px;border-bottom:1px solid var(--cam-rule)}
body.ca-pub .cam-cic{flex:0 0 16px;width:16px;height:16px;background:var(--cam-red-soft);color:var(--cam-red);
  display:flex;align-items:center;justify-content:center}
body.ca-pub .cam-cic svg{width:10px;height:10px;fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
body.ca-pub .cam-ct{flex:1 1 auto;min-width:0;font-size:11px;font-weight:500;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}

/* ---- badges: ca-ui.css .badge --------------------------------------- */
body.ca-pub .cam-b{display:inline-block;padding:1px 6px;border-radius:2px;font-size:9px;
  letter-spacing:.04em;white-space:nowrap;flex:0 0 auto}
body.ca-pub .cam-b.red{background:var(--cam-red-tint);color:var(--cam-red)}
body.ca-pub .cam-b.green{background:var(--cam-green-tint);color:var(--cam-green)}
body.ca-pub .cam-b.orange{background:var(--cam-orange-tint);color:var(--cam-orange)}
body.ca-pub .cam-b.blue{background:var(--cam-blue-tint);color:var(--cam-blue)}
body.ca-pub .cam-b.gray{background:var(--cam-off);color:var(--cam-muted)}

body.ca-pub .cam-mono{display:block;min-width:0;font-family:var(--cam-mono);font-size:9px;
  color:var(--cam-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.ca-pub .cam-scroll{flex:1 1 auto;min-height:0;overflow:hidden;display:flex;flex-direction:column}
body.ca-pub .cam-mt6{margin-top:6px}
body.ca-pub .cam-mono2{direction:ltr;unicode-bidi:isolate}

/* ---- browser security: the threat feed ------------------------------ */
body.ca-pub .cam-row{flex:0 0 auto;display:flex;align-items:flex-start;gap:7px;min-width:0;padding:4px 3px;
  border-bottom:1px solid var(--cam-rule);
  transition:opacity .34s ease,transform .34s ease,background .8s ease}
body.ca-pub .cam-js .cam-row{opacity:0;transform:translateY(-5px)}
body.ca-pub .cam-js .cam-row.on{opacity:1;transform:none}
body.ca-pub .cam-row.hot{background:var(--cam-red-soft);
  transition:opacity .34s ease,transform .34s ease,background 0s}
body.ca-pub .cam-ts{flex:0 0 auto;font-family:var(--cam-mono);font-size:9px;color:#a2a2a2;
  font-variant-numeric:tabular-nums;padding-top:1px}
body.ca-pub .cam-rc{flex:1 1 auto;min-width:0}
body.ca-pub .cam-rt{font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---- phishing defense: reported-phishing.php .rp-verdict ------------ */
body.ca-pub .cam-verdict{background:var(--cam-off);border:1px solid var(--cam-border);padding:7px 8px}
body.ca-pub .cam-vhead{display:flex;align-items:center;gap:7px;margin-bottom:6px;flex-wrap:wrap}
body.ca-pub .cam-vbadge{display:inline-block;padding:2px 8px;border-radius:2px;color:#fff;font-size:9.5px;
  letter-spacing:.06em;background:#9e9e9e}
body.ca-pub .cam-vscore{font-size:10px;color:var(--cam-muted);font-variant-numeric:tabular-nums}
body.ca-pub .cam-vscore b{font-family:var(--cam-disp);color:var(--cam-ink);font-size:11px;
  unicode-bidi:isolate}
body.ca-pub .cam-track{height:6px;background:#eceff1;border-radius:3px;overflow:hidden}
body.ca-pub .cam-fill{height:6px;width:2%;background:#9e9e9e;border-radius:3px}
body.ca-pub .cam-chips{margin-top:6px}
body.ca-pub .cam-chip{display:inline-block;font-family:var(--cam-mono);font-size:9px;background:#fff;
  border:1px solid var(--cam-border);padding:1px 5px;margin-inline-end:4px;margin-top:3px}
body.ca-pub .cam-chip b{color:var(--cam-red)}
body.ca-pub .cam-sig{flex:0 0 auto;display:flex;align-items:baseline;gap:6px;padding:3.5px 2px;min-width:0;
  border-bottom:1px solid var(--cam-rule);
  transition:opacity .3s ease,transform .3s ease}
body.ca-pub .cam-js .cam-sig{opacity:0;transform:translateY(-4px)}
body.ca-pub .cam-js .cam-sig.on{opacity:1;transform:none}
body.ca-pub .cam-sev{flex:0 0 auto;font-size:8px;letter-spacing:.08em;text-transform:uppercase;
  padding:0 4px;border-radius:2px;color:#fff}
body.ca-pub .cam-sev.c{background:#d32f2f}
body.ca-pub .cam-sev.h{background:#f4511e}
body.ca-pub .cam-sev.m{background:#ff9800}
body.ca-pub .cam-sev.i{background:#9e9e9e}
body.ca-pub .cam-st{flex:1 1 auto;min-width:0;font-size:9.5px;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
body.ca-pub .cam-foot{margin-block-start:auto;padding-top:6px;unicode-bidi:plaintext;font-size:8.5px;color:var(--cam-muted);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}

/* ---- usb security: kiosk-dashboard.php ------------------------------ */
body.ca-pub .cam-scan{display:flex;align-items:baseline;justify-content:space-between;gap:8px;
  margin-bottom:4px;font-size:9.5px;color:var(--cam-muted)}
body.ca-pub .cam-scan b{font-family:var(--cam-disp);color:var(--cam-ink);font-size:11px;
  font-variant-numeric:tabular-nums;unicode-bidi:isolate}
body.ca-pub .cam-ufill{background:var(--cam-green)}
body.ca-pub .cam-det{margin-top:7px}
body.ca-pub .cam-recent{margin-top:9px}
body.ca-pub .cam-sub{font-size:8px;letter-spacing:.1em;text-transform:uppercase;color:var(--cam-muted);margin-bottom:2px}

/* ---- human risk: human-risk.php .hr-gauge --------------------------- */
body.ca-pub .cam-gauge{display:flex;align-items:center;gap:11px;margin-bottom:7px}
body.ca-pub .cam-ring{position:relative;flex:0 0 62px;width:62px;height:62px}
body.ca-pub .cam-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
body.ca-pub .cam-rlab{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;line-height:1}
body.ca-pub .cam-rv{font-family:var(--cam-disp);font-size:16px;font-weight:700;
  font-variant-numeric:tabular-nums;unicode-bidi:isolate}
body.ca-pub .cam-rs{margin-top:1px;font-size:8px;color:var(--cam-muted);direction:ltr;unicode-bidi:isolate}
body.ca-pub .cam-glvl{font-size:12px;font-weight:500;color:var(--cam-orange);line-height:1.3}
body.ca-pub .cam-gsub{font-size:9px;color:var(--cam-muted);line-height:1.45;unicode-bidi:plaintext}
body.ca-pub .cam-prow{margin-top:5px}
body.ca-pub .cam-pmeta{display:flex;justify-content:space-between;gap:8px;margin-bottom:2px;font-size:9.5px}
body.ca-pub .cam-pmeta span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body.ca-pub .cam-ptrack{height:4px;background:var(--cam-rule)}
body.ca-pub .cam-pfill{height:4px;width:0}
body.ca-pub .cam-gd{display:flex;gap:5px;margin-block-start:auto;padding-top:8px}
body.ca-pub .cam-gp{flex:1 1 0;min-width:0;border:1px solid var(--cam-border);padding:2px 3px;
  text-align:center}
body.ca-pub .cam-gg{font-family:var(--cam-disp);font-size:12px;font-weight:700;line-height:1.2;
  font-variant-numeric:tabular-nums}
body.ca-pub .cam-gn{font-size:7.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--cam-muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---- narrow.  Set by JS from the widget's OWN width, so it is correct
        inside a narrow column as well as on a narrow screen. ---------- */
body.ca-pub .cam.is-narrow .cam-pg{display:none}
body.ca-pub .cam.is-narrow .cam-body{flex-direction:column}
body.ca-pub .cam.is-narrow .cam-side{flex:0 0 auto;flex-direction:row;padding-block:0;
  border-inline-end:0;border-bottom:1px solid var(--cam-border)}
body.ca-pub .cam.is-narrow .cam-ni{flex:1 1 0;flex-direction:column;align-items:center;
  justify-content:center;gap:3px;padding:6px 2px;font-size:8.5px;text-align:center;
  border-inline-start:0;border-bottom:3px solid transparent}
body.ca-pub .cam.is-narrow .cam-ni[aria-selected="true"]{border-bottom-color:var(--cam-red)}
body.ca-pub .cam.is-narrow .cam-krow{grid-template-columns:repeat(2,minmax(0,1fr))}
body.ca-pub .cam.is-narrow .opt{display:none}
body.ca-pub .cam.is-narrow .cam-ts{display:none}
body.ca-pub .cam.is-narrow .cam-ring{flex-basis:52px;width:52px;height:52px}
body.ca-pub .cam.is-narrow .cam-main{padding:7px}

/* ---- reduced motion.  No loop, no transitions; the script paints the
        COMPLETE final frame of the first module and never advances. --- */
@media (prefers-reduced-motion:reduce){
  body.ca-pub .cam *, body.ca-pub .cam *::before, body.ca-pub .cam *::after{
    animation-duration:1ms!important;animation-iteration-count:1!important;
    transition-duration:1ms!important}
  body.ca-pub .cam-prog{display:none}
  body.ca-pub .cam-js .cam-row, body.ca-pub .cam-js .cam-sig{opacity:1;transform:none}
  body.ca-pub .cam-row.hot{background:transparent}
}

/* =======================================================================
   8. body.ca-products — products.php. From its own <style> block, verbatim.
   ======================================================================= */
/* products.php set these two on the bare element selectors; they are the
   page's own choices, so they move into the page's own layer. */
body.ca-products{line-height:1.55}
body.ca-products a{text-decoration:none}
/* Arabic headings must NOT use Orbitron.
   Orbitron carries no Arabic glyphs, so `font-family:var(--font-display)` silently falls
   through to MONOSPACE — and monospaced Arabic renders with even advance widths that pull the
   cursive joins apart, so the script reads as disconnected letters. Headings therefore switch
   to the body stack in RTL, and letter-spacing resets to 0, since tracking does the same damage
   to a joined script. Latin-only furniture (the CYBER AWARE wordmark, the big statistic
   numerals, the card numbers) deliberately keeps Orbitron — it still looks right. */

/* LAYOUT */
body.ca-products main{padding-top:var(--nav-h)}
body.ca-products h3{font-family:var(--font-display);font-weight:700;font-size:1.15rem;letter-spacing:.01em}

/* HERO */
body.ca-products .hero{position:relative;padding:110px 60px 90px;overflow:hidden;background:var(--ink);color:#fff}
body.ca-products .hero::before{content:'';position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:52px 52px;mask-image:radial-gradient(ellipse 80% 70% at 50% 40%,#000 40%,transparent 100%);
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 40%,#000 40%,transparent 100%)}
body.ca-products .hero::after{content:'';position:absolute;width:520px;height:520px;border-radius:50%;
  background:radial-gradient(circle,rgba(208,32,42,.42),transparent 68%);
  top:-170px;inset-inline-end:-130px;filter:blur(28px)}
body.ca-products .hero-in{position:relative;z-index:2;max-width:980px}
body.ca-products .hero-tag{display:inline-flex;align-items:center;gap:9px;border:1px solid rgba(255,255,255,.26);
  border-radius:20px;padding:7px 17px;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;margin-bottom:28px}
body.ca-products .hero-tag i{width:7px;height:7px;border-radius:50%;background:var(--red);display:block}
body.ca-products .hero h1{font-family:var(--font-display);font-weight:900;font-size:clamp(2.1rem,6.4vw,4.4rem);
  line-height:1.04;letter-spacing:-.02em}
body.ca-products .hero h1 .accent{color:var(--red)}
body.ca-products .hero p.lead{color:rgba(255,255,255,.76);font-size:clamp(1rem,1.7vw,1.2rem);max-width:64ch;margin-top:26px}
body.ca-products .hero-btns{display:flex;flex-wrap:wrap;gap:14px;margin-top:38px}
body.ca-products .btn-primary{background:var(--red);color:#fff}
body.ca-products .btn-primary:hover{background:#fff;color:var(--ink)}
body.ca-products .btn-ghost{border:1px solid rgba(255,255,255,.38);color:#fff}
body.ca-products .btn-ghost:hover{background:#fff;color:var(--ink);border-color:#fff}
body.ca-products .hero-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:64px;
  border-top:1px solid rgba(255,255,255,.14);padding-top:30px;position:relative;z-index:2}
body.ca-products .hs-n{font-family:var(--font-display);font-weight:900;font-size:2rem;color:var(--red);line-height:1}
body.ca-products .hs-l{color:rgba(255,255,255,.62);font-size:.78rem;margin-top:8px;letter-spacing:.02em}

/* JOURNEY */
body.ca-products .jr-wrap{position:relative;margin-top:16px}

/* The spine sits behind the markers; inset-inline keeps it on the correct side under RTL. */
body.ca-products .jr-wrap::before{content:'';position:absolute;top:8px;bottom:8px;inset-inline-start:23px;
  width:2px;background:var(--border)}
body.ca-products .jr-fill{position:absolute;top:8px;inset-inline-start:23px;width:2px;background:var(--red);
  height:0;transition:height .18s linear}
body.ca-products .jr{position:relative;display:grid;grid-template-columns:70px 1fr;gap:26px;padding-bottom:46px}
body.ca-products .jr-dot{position:relative;z-index:2;width:48px;height:48px;border-radius:50%;background:#fff;
  border:2px solid var(--border);display:grid;place-items:center;font-size:1.25rem;transition:all .3s}
body.ca-products .jr.on .jr-dot{border-color:var(--red);box-shadow:0 0 0 6px var(--red-light)}
body.ca-products .jr-time{font-family:var(--font-display);font-weight:700;font-size:.8rem;color:var(--red);letter-spacing:.08em}
body.ca-products .jr-body h3{margin:8px 0 10px}
body.ca-products .jr-body p{color:var(--muted);max-width:66ch}
body.ca-products .jr-link{display:inline-flex;align-items:center;gap:8px;margin-top:14px;font-size:.82rem;
  color:var(--red);border-bottom:1px solid transparent;padding-bottom:2px;transition:border-color .2s}
body.ca-products .jr-link:hover{border-bottom-color:var(--red)}
html[dir="rtl"] body.ca-products .jr-link .arr{transform:scaleX(-1)}

/* PILLAR */
body.ca-products .pil-head{display:grid;grid-template-columns:auto 1fr;gap:26px;align-items:start;margin-bottom:54px}
body.ca-products .pil-badge{font-family:var(--font-display);font-weight:900;font-size:.72rem;letter-spacing:.18em;
  background:var(--red);color:#fff;padding:9px 16px;border-radius:6px;white-space:nowrap}
body.ca-products .pil-head h2{margin-bottom:16px}
body.ca-products .pil-head p{color:var(--muted);font-size:1.02rem;max-width:72ch}
body.ca-products .feat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:22px}
body.ca-products .feat{display:grid;grid-template-columns:auto 1fr;gap:18px;background:#fff;border:1px solid var(--border);
  border-radius:14px;padding:26px;transition:transform .25s,box-shadow .25s,border-color .25s}
body.ca-products .feat:hover{transform:translateY(-4px);box-shadow:0 14px 38px rgba(13,13,13,.09);border-color:#c9c9c9}
body.ca-products .feat-n{font-family:var(--font-display);font-weight:900;font-size:1.5rem;color:var(--red-light);
  -webkit-text-stroke:1px var(--red);line-height:1}
html[dir="rtl"] body.ca-products .feat-n{direction:ltr}
body.ca-products .feat-body h4{font-size:1.02rem;font-weight:500;margin-bottom:9px;line-height:1.35}
body.ca-products .feat-body p{color:var(--muted);font-size:.92rem}
body.ca-products .feat-tag{display:inline-block;margin-top:14px;font-size:.7rem;letter-spacing:.09em;text-transform:uppercase;
  background:var(--off);border:1px solid var(--border);color:var(--muted);padding:5px 11px;border-radius:12px}
body.ca-products .on-dark{background:var(--ink);color:#fff}
body.ca-products .on-dark h2,body.ca-products .on-dark h3{color:#fff}
body.ca-products .on-dark .pil-head p,body.ca-products .on-dark .sec-top p{color:rgba(255,255,255,.7)}
body.ca-products .on-dark .feat{background:var(--ink2);border-color:rgba(255,255,255,.12)}
body.ca-products .on-dark .feat:hover{border-color:rgba(255,255,255,.3);box-shadow:0 14px 38px rgba(0,0,0,.4)}
body.ca-products .on-dark .feat-body p{color:rgba(255,255,255,.66)}
body.ca-products .on-dark .feat-tag{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16);color:rgba(255,255,255,.72)}
body.ca-products .on-dark .feat-n{color:rgba(208,32,42,.22)}

/* HUMAN LAYER */

/* Exactly three across, because there are six cards: auto-fit gave four columns at desktop
   width and left two empty cells showing the grid's own background. */
body.ca-products .hl-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--border);border:1px solid var(--border);border-radius:14px;overflow:hidden}
@media (max-width:1100px){
body.ca-products .hl-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:660px){
body.ca-products .hl-grid{grid-template-columns:1fr}
}
body.ca-products .hl{background:#fff;padding:32px 28px;transition:background .25s}
body.ca-products .hl:hover{background:var(--red-light)}
body.ca-products .hl-ico{font-size:1.6rem;margin-bottom:14px}
body.ca-products .hl h4{font-size:1rem;font-weight:500;margin-bottom:9px}
body.ca-products .hl p{color:var(--muted);font-size:.9rem}

/* TOGETHER */
body.ca-products .tg{background:var(--ink);color:#fff;padding:96px 60px;text-align:center;position:relative;overflow:hidden}
body.ca-products .tg::before{content:'';position:absolute;width:640px;height:640px;border-radius:50%;
  background:radial-gradient(circle,rgba(208,32,42,.3),transparent 70%);
  bottom:-330px;inset-inline-start:-160px;filter:blur(30px)}
body.ca-products .tg-in{position:relative;z-index:2;max-width:880px;margin:0 auto}
body.ca-products .tg h2{margin-bottom:22px}
body.ca-products .tg p{color:rgba(255,255,255,.74);font-size:1.02rem;margin-bottom:38px}
body.ca-products .tg .hero-btns{justify-content:center}
body.ca-products .pill-row{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:34px}

/* Reveal-on-scroll. The no-js / reduced-motion default is VISIBLE, so content can never be
   hidden by a script that did not run. */
body.ca-products .reveal{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s ease}
body.ca-products .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
body.ca-products .reveal{opacity:1!important;transform:none!important;transition:none}
}
@media (max-width:1000px){
body.ca-products .sec-top{grid-template-columns:1fr}
body.ca-products .hero-stats{grid-template-columns:repeat(2,1fr);gap:28px}
body.ca-products .pil-head{grid-template-columns:1fr;gap:16px}
body.ca-products .pil-badge{justify-self:start}
}

@media (max-width:760px){
body.ca-products .pad,body.ca-products .hero,body.ca-products .tg{padding-inline:22px}
body.ca-products .pad{padding-top:64px;padding-bottom:64px}
body.ca-products .hero{padding-top:70px;padding-bottom:60px}
body.ca-products .jr{grid-template-columns:52px 1fr;gap:16px}
body.ca-products .jr-dot{width:40px;height:40px;font-size:1.05rem}
body.ca-products .jr-wrap::before,body.ca-products .jr-fill{inset-inline-start:19px}
body.ca-products .feat{padding:22px}
}

/* =======================================================================
   9. body.ca-legal — privacypolicy.php. From its own <style> block, verbatim.
   ======================================================================= */
/* HEADER */
body.ca-legal .doc-head{background:var(--ink);color:#fff;padding:calc(var(--nav-h) + 62px) 60px 56px;position:relative;overflow:hidden}
body.ca-legal .doc-head-in{max-width:1180px;margin:0 auto;position:relative;z-index:1}
/* The document header is dark, so the eyebrow inverts. */
body.ca-legal .eyebrow{color:#fff}

body.ca-legal h1{font-family:var(--font-display);font-size:clamp(1.9rem,4vw,3rem);font-weight:900;line-height:1.08;color:#fff}
body.ca-legal .eff{margin-top:18px;display:inline-flex;align-items:center;gap:10px;font-size:.76rem;letter-spacing:.1em;
  text-transform:uppercase;color:rgba(255,255,255,.55);border:1px solid rgba(255,255,255,.14);padding:8px 16px}
body.ca-legal .eff b{color:#fff;font-weight:500}

/* LAYOUT */
body.ca-legal .wrap{max-width:1180px;margin:0 auto;padding:56px 60px 100px;display:grid;
  grid-template-columns:230px 1fr;gap:56px;align-items:start}

/* TOC */
body.ca-legal .toc{position:sticky;top:calc(var(--nav-h) + 24px)}
body.ca-legal .toc h2{font-family:var(--font-display);font-size:.68rem;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink);padding-bottom:10px;border-bottom:1px solid var(--border);margin-bottom:12px}
body.ca-legal .toc ol{list-style:none;counter-reset:toc}
body.ca-legal .toc li{counter-increment:toc}
body.ca-legal .toc a{display:flex;gap:10px;padding:7px 0;font-size:.8rem;color:var(--muted);text-decoration:none;
  border-inline-start:2px solid transparent;padding-inline-start:10px;transition:color .18s,border-color .18s}
body.ca-legal .toc a::before{content:counter(toc,decimal-leading-zero);font-family:var(--font-display);
  font-size:.62rem;color:var(--red);flex-shrink:0}
body.ca-legal .toc a:hover{color:var(--ink);border-inline-start-color:var(--red)}

/* BODY */
body.ca-legal .doc{min-width:0}
body.ca-legal .note{background:var(--red-light);border:1px solid rgba(208,32,42,.2);border-inline-start:3px solid var(--red);
  padding:14px 18px;font-size:.82rem;line-height:1.65;color:#7d1119;margin-bottom:36px}
body.ca-legal .doc > p{font-size:.95rem;line-height:1.8;color:var(--muted);margin-bottom:16px}
body.ca-legal .doc h2{font-family:var(--font-display);font-size:1.02rem;font-weight:700;letter-spacing:.06em;color:var(--ink);
  margin:44px 0 16px;padding-bottom:10px;border-bottom:1px solid var(--border);scroll-margin-top:calc(var(--nav-h) + 20px)}
body.ca-legal .doc h2:first-of-type{margin-top:0}
body.ca-legal .doc h3{font-family:var(--font-display);font-size:.82rem;font-weight:700;letter-spacing:.06em;
  color:var(--ink);margin:28px 0 12px}
body.ca-legal .doc h4{font-size:.88rem;font-weight:500;color:var(--ink);margin:22px 0 8px;
  padding-inline-start:12px;border-inline-start:3px solid var(--red)}
body.ca-legal .doc ul{list-style:none;margin:0 0 18px}
/* Logical, and keyed to the LIST's own direction rather than the page's: the
   clause text is English even on the Arabic page, where <main class="doc"> is
   marked dir="ltr" so sentence punctuation lands at the right end of the line.
   The old html[dir="rtl"] pair would have flipped the marker to the far side of
   a list that is now laid out left-to-right. */
body.ca-legal .doc li{position:relative;font-size:.9rem;line-height:1.75;color:var(--muted);
  padding-block:6px;padding-inline:20px 0;border-bottom:1px solid var(--off)}
body.ca-legal .doc li::before{content:'›';position:absolute;inset-inline-start:2px;color:var(--red);font-weight:700}
body.ca-legal .doc strong{color:var(--ink);font-weight:500}
body.ca-legal .contact-card{margin-top:48px;background:var(--off);border:1px solid var(--border);
  border-inline-start:3px solid var(--red);padding:26px 28px;display:flex;flex-wrap:wrap;
  align-items:center;justify-content:space-between;gap:18px}
body.ca-legal .contact-card p{font-family:var(--font-display);font-size:.8rem;font-weight:700;letter-spacing:.05em;color:var(--ink)}
body.ca-legal .btn-red{background:var(--red);color:#fff}

@media (max-width:1000px){
body.ca-legal .doc-head{padding:calc(var(--nav-h) + 40px) 24px 40px}
body.ca-legal .wrap{grid-template-columns:1fr;gap:32px;padding:36px 24px 70px}
body.ca-legal .toc{position:static;border:1px solid var(--border);padding:18px 20px;background:var(--off)}
}