/* ============================================================
   ROSH™ Company Labs — Site Design System (2026 rebuild)
   Single stylesheet for all root pages. No frameworks.
   ============================================================ */

:root {
  --bg: #0a0e1a;
  --bg-soft: #0e1424;
  --surface: #141b38;
  --surface-2: #1c2650;
  --border: rgba(233, 237, 246, 0.09);
  --border-strong: rgba(233, 237, 246, 0.18);
  --text: #e9edf6;
  --muted: #9aa3b8;
  --faint: #6b7285;
  --accent: #ff7a29;
  --accent-soft: rgba(255, 122, 41, 0.14);
  --accent-2: #ffb74a;
  --good: #34d399;
  --radius: 18px;
  --radius-sm: 12px;
  --font-display: "Outfit", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --shadow-card: 0 14px 40px rgba(2, 6, 18, 0.45);
  --maxw: 1180px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* overflow-x:clip at the ROOT stops any stray horizontal overflow from widening
   the mobile layout viewport (which, in RTL, shoved all content into a right-hand
   column with a dead band on the left). clip (not hidden) => no scroll container,
   so no RTL 1px scroll oscillation. Vertical scrolling is unaffected. */
html { scroll-behavior: smooth; overflow-x: clip; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
  max-width: 100%;
}

img { max-width: 100%; display: block; }

a { color: var(--accent-2); text-decoration: none; }
a:hover { color: var(--accent); }

::selection { background: var(--accent); color: #fff; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--text);
}

h1 { font-size: clamp(2.4rem, 6vw, 4.2rem); }
h2 { font-size: clamp(1.8rem, 4vw, 2.8rem); }
h3 { font-size: clamp(1.3rem, 2.5vw, 1.7rem); }
h4 { font-size: 1.2rem; }

.thin { font-weight: 300; color: var(--muted); }

.container {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- Header ---------- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  background: rgba(13, 18, 40, 0.72);
  -webkit-backdrop-filter: blur(16px) saturate(1.15);
  backdrop-filter: blur(16px) saturate(1.15);
  border-bottom: 1px solid rgba(129, 150, 245, 0.12);
}

.nav-bar {
  display: flex;
  align-items: center;
  gap: 28px;
  height: 72px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--text);
  white-space: nowrap;
}
.brand:hover { color: var(--text); }
.brand img { height: 38px; width: auto; }

.nav-links {
  display: flex;
  align-items: center;
  gap: 6px;
  list-style: none;
  margin-left: auto;
}

.nav-links a {
  display: block;
  padding: 8px 14px;
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.95rem;
  font-weight: 500;
  transition: color 0.2s, background 0.2s;
}

.nav-links a:hover { color: var(--text); background: rgba(255, 255, 255, 0.05); }
.nav-links a.active { color: var(--text); background: var(--accent-soft); }

.nav-cta { margin-left: 6px; }

.nav-toggle {
  display: none;
  margin-left: auto;
  width: 44px;
  height: 44px;
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  align-items: center;
  justify-content: center;
}
.nav-toggle svg { width: 22px; height: 22px; }

@media (max-width: 900px) {
  .nav-toggle { display: flex; }
  .nav-links {
    position: fixed;
    top: 72px;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    background: rgba(13, 18, 40, 0.97);
    border-bottom: 1px solid rgba(129, 150, 245, 0.12);
    padding: 16px 24px 24px;
    display: none;
  }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 12px 16px; border-radius: 12px; font-size: 1.05rem; }
  .nav-cta { margin: 8px 0 0; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 26px;
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.98rem;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s, background 0.2s, border-color 0.2s;
}

.btn-primary {
  background: linear-gradient(120deg, var(--accent), #ff9d3f);
  color: #14100b;
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(255, 122, 41, 0.35);
  color: #14100b;
}

.btn-ghost {
  background: transparent;
  border-color: var(--border-strong);
  color: var(--text);
}
.btn-ghost:hover { border-color: var(--accent); color: var(--text); background: var(--accent-soft); }

.btn svg { width: 18px; height: 18px; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  padding: 170px 0 110px;
  overflow: hidden;
}

.hero-orbs { position: absolute; inset: 0; pointer-events: none; }
.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.5;
}
.orb-1 { width: 480px; height: 480px; background: rgba(255, 122, 41, 0.22); top: -160px; right: -120px; }
.orb-2 { width: 380px; height: 380px; background: rgba(64, 98, 255, 0.2); bottom: -140px; left: -100px; }

.hero .container { position: relative; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 16px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-2);
  margin-bottom: 28px;
  background: rgba(255, 122, 41, 0.06);
}

.hero p.lead {
  max-width: 620px;
  margin: 26px 0 40px;
  color: var(--muted);
  font-size: 1.12rem;
}

.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; }

/* ---------- Sections ---------- */
.section { padding: 90px 0; }
.section-soft { background: var(--bg-soft); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }

.section-head { max-width: 720px; margin-bottom: 56px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head .eyebrow { margin-bottom: 18px; }
.section-head p { color: var(--muted); margin-top: 16px; font-size: 1.05rem; }

/* ---------- Cards ---------- */
.grid { display: grid; gap: 22px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 1000px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

.card {
  display: block;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 30px;
  color: var(--text);
  transition: transform 0.25s, border-color 0.25s, box-shadow 0.25s;
}

a.card:hover {
  transform: translateY(-5px);
  border-color: rgba(255, 122, 41, 0.45);
  box-shadow: var(--shadow-card);
  color: var(--text);
}

.card h3, .card h4 { margin-bottom: 12px; }
.card p { color: var(--muted); font-size: 0.97rem; }

.card-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  color: var(--accent-2);
  font-weight: 600;
  font-size: 0.92rem;
}
/* size the icon for EVERY .card-link, not only ones inside a .card (a stray "Visit the
   live site" link in a <p> was rendering the arrow at ~500px because no rule constrained it) */
.card-link svg { width: 16px; height: 16px; flex: none; transition: transform 0.2s; }
/* RTL: "read more / visit / order" arrows point LEFT (the reading direction). Hover keeps the
   flip and nudges left. Without this the → arrow points the wrong way in Arabic. */
[dir="rtl"] .card-link svg,
[dir="rtl"] .order-link svg { transform: scaleX(-1); transform-box: fill-box; transform-origin: center; }
[dir="rtl"] a.card:hover .card-link svg,
[dir="rtl"] a.product-card:hover .order-link svg { transform: scaleX(-1) translateX(4px); transform-box: fill-box; transform-origin: center; }
a.card:hover .card-link svg { transform: translateX(4px); }

.card-icon {
  width: 54px;
  height: 54px;
  border-radius: 15px;
  background: linear-gradient(150deg, rgba(255, 122, 41, 0.22), rgba(255, 122, 41, 0.05));
  border: 1px solid rgba(255, 122, 41, 0.22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 8px 18px rgba(255, 122, 41, 0.10);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
  color: var(--accent);
}
.card-icon svg { width: 26px; height: 26px; }

.card-img {
  border-radius: var(--radius-sm);
  overflow: hidden;
  margin-bottom: 22px;
  border: 1px solid var(--border);
  background: var(--surface-2);
}
.card-img img { width: 100%; height: 200px; object-fit: cover; }
/* Person/portrait photos (e.g. team): responsive square crop centered on the subject,
   instead of a fixed 200px landscape strip that slices the head off. Scales on phone + PC. */
.card-img.person img { height: auto; aspect-ratio: 1 / 1; object-position: center 42%; }
.card-img.contain img { object-fit: contain; padding: 18px; }

/* ---------- Feature / checklist ---------- */
.feature-list { list-style: none; display: grid; gap: 14px; }
.feature-list li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  color: var(--muted);
}
.feature-list li strong { color: var(--text); }
.feature-list .tick {
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: 3px;
  border-radius: 50%;
  background: rgba(52, 211, 153, 0.14);
  color: var(--good);
  display: flex;
  align-items: center;
  justify-content: center;
}
.feature-list .tick svg { width: 12px; height: 12px; }

/* ---------- Split (text + media) ---------- */
.split {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 60px;
  align-items: center;
}
@media (max-width: 900px) {
  .split { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  /* When a split stacks on mobile, keep the IMAGE above its text in every section.
     Otherwise alternating desktop layouts (text-then-image vs image-then-text) dump two
     images back-to-back and detach them from their copy. */
  .split .split-media { order: -1; }
}
/* Contact form controls fill their field and never force horizontal overflow on mobile
   (the fields are inline-styled with no width, so their intrinsic size — e.g. long <select>
   options — was blowing the grid track past the viewport under overflow-x: clip). */
#contact-form label { min-width: 0; max-width: 100%; }
#contact-form input:not([type=hidden]):not([type=checkbox]),
#contact-form select,
#contact-form textarea { width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; }

.split-media {
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}
.split-media img { width: 100%; height: auto; display: block; }

/* ---------- Stats ---------- */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 640px) { .stats { grid-template-columns: 1fr; } }
.stat {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 26px;
  text-align: center;
}
.stat .num {
  display: block;
  font-family: var(--font-display);
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--accent-2);
}
.stat .lbl { display: block; color: var(--muted); font-size: 0.92rem; margin-top: 8px; line-height: 1.45; }

/* ---------- Reviews carousel ---------- */
.reviews-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(420px, 85vw);
  gap: 22px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 6px 6px 22px;
  scrollbar-width: thin;
  scrollbar-color: var(--accent) transparent;
}
.reviews-track .card { scroll-snap-align: start; }
.review-meta { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.review-meta .avatar {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-2);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700;
}
.review-meta .who { line-height: 1.3; }
.review-meta .who span { display: block; color: var(--faint); font-size: 0.8rem; }
.stars { color: var(--accent-2); letter-spacing: 2px; margin-bottom: 10px; }

/* ---------- CTA band ---------- */
.cta-band {
  position: relative;
  border-radius: calc(var(--radius) + 6px);
  border: 1px solid rgba(255, 122, 41, 0.35);
  background:
    radial-gradient(600px 240px at 85% 0%, rgba(255, 122, 41, 0.22), transparent),
    var(--surface);
  padding: 60px 48px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  overflow: hidden;
}
.cta-band h2 { max-width: 560px; }
.cta-band p { color: var(--muted); margin-top: 10px; max-width: 520px; }
@media (max-width: 640px) { .cta-band { padding: 40px 26px; } }

/* ---------- Prose (policies, articles) ---------- */
.page-hero { padding: 150px 0 60px; }
.page-hero p.lead { color: var(--muted); max-width: 640px; margin-top: 20px; font-size: 1.08rem; }

.prose { max-width: 820px; }
.prose h2 { font-size: 1.6rem; margin: 48px 0 16px; }
.prose h3 { font-size: 1.2rem; margin: 34px 0 12px; }
.prose p { color: var(--muted); margin-bottom: 16px; }
.prose ul, .prose ol { color: var(--muted); margin: 0 0 16px 22px; }
.prose li { margin-bottom: 8px; }
.prose strong { color: var(--text); }
.prose .note {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
  padding: 18px 22px;
  margin: 26px 0;
}

.updated-tag { color: var(--faint); font-size: 0.88rem; }

/* ---------- FAQ ---------- */
.faq { max-width: 820px; margin-left: auto; margin-right: auto; display: grid; gap: 14px; }
.faq details {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 20px 24px;
}
.faq summary {
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 600;
  list-style: none;
  position: relative;                 /* text flows as ONE run; the marker is
                                         positioned, so inline <bdi> brand names
                                         don't become separate flex items and
                                         spread across the row. */
  padding-inline-end: 2.2rem;         /* room for the +/- marker on the end side */
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; color: var(--accent); font-size: 1.4rem; font-weight: 400;
  position: absolute; inset-inline-end: 0; top: 50%; transform: translateY(-50%);
}
.faq details[open] summary::after { content: "–"; }
.faq details p { color: var(--muted); margin-top: 12px; }

/* ---------- Blog cards ---------- */
.post-card .labels { display: flex; gap: 10px; margin-bottom: 14px; }
.label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  color: var(--muted);
}
.label.accent { color: var(--accent-2); border-color: rgba(255, 122, 41, 0.4); background: rgba(255, 122, 41, 0.08); }

/* ---------- Contact ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
}
@media (max-width: 620px) { .contact-grid { grid-template-columns: 1fr; } }
.contact-grid .card { transition: transform 0.25s, border-color 0.25s, box-shadow 0.25s; }
.contact-grid .card:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 122, 41, 0.4);
  box-shadow: var(--shadow-card);
}
.contact-tile { display: flex; gap: 18px; align-items: flex-start; }
.contact-tile .card-icon { margin-bottom: 0; flex: none; }
.contact-tile h4 { margin-bottom: 4px; }
.contact-tile p { color: var(--muted); font-size: 0.95rem; }
.contact-tile .big {
  display: inline-block;
  margin-top: 8px;
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--accent-2);
  word-break: break-word;
}
.contact-tile a.big:hover { color: var(--accent); }
.contact-tile .big.num { white-space: nowrap; }

/* ---------- Tables ---------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-sm); }
table.rosh-table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.rosh-table th, .rosh-table td { text-align: left; padding: 14px 18px; border-bottom: 1px solid var(--border); }
.rosh-table th { background: var(--surface-2); font-family: var(--font-display); font-weight: 600; }
.rosh-table td { color: var(--muted); }
.rosh-table tr:last-child td { border-bottom: none; }

/* ---------- Steps ---------- */
.steps { counter-reset: step; display: grid; gap: 18px; }
.step {
  counter-increment: step;
  display: flex;
  gap: 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px 28px;
}
.step::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.4rem;
  color: var(--accent);
  flex: none;
}
.step h4 { margin-bottom: 6px; }
.step p { color: var(--muted); font-size: 0.96rem; }

/* ---------- Partners strip ---------- */
.brands-label {
  text-align: center;
  color: var(--faint);
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 36px;
}
.partners {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 32px 52px;
}
.brand-logo {
  display: inline-flex;
  color: var(--muted);
  opacity: 0.72;
  transition: color 0.25s, opacity 0.25s, transform 0.25s;
}
.brand-logo:hover { color: var(--text); opacity: 1; transform: translateY(-2px); }
.brand-logo svg { height: 30px; width: 30px; display: block; fill: currentColor; }

/* ---------- Footer ---------- */
.site-footer {
  border-top: 1px solid var(--border);
  background: var(--bg-soft);
  padding: 70px 0 36px;
  margin-top: 90px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.1fr;
  gap: 44px;
  margin-bottom: 50px;
}
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }

.site-footer h5 {
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 18px;
}
.footer-links { list-style: none; display: grid; gap: 10px; }
.footer-links a { color: var(--muted); font-size: 0.95rem; }
.footer-links a:hover { color: var(--text); }

.footer-brand p { color: var(--muted); font-size: 0.9rem; margin-top: 16px; }
.footer-brand .brand { margin-bottom: 4px; }

.social-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.social-row a {
  width: 42px; height: 42px;
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.02);
  transition: color 0.2s, border-color 0.2s, background 0.2s, transform 0.2s, box-shadow 0.2s;
}
.social-row a:hover {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(140deg, var(--accent), #ff9d3f);
  transform: translateY(-3px);
  box-shadow: 0 10px 22px rgba(255, 122, 41, 0.28);
}
.social-row svg { width: 19px; height: 19px; }

.footer-bottom {
  border-top: 1px solid var(--border);
  padding-top: 26px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: space-between;
  color: var(--faint);
  font-size: 0.88rem;
}
.footer-bottom a { color: var(--muted); }

/* ---------- 404 ---------- */
.error-hero { min-height: 70vh; display: flex; align-items: center; text-align: center; padding-top: 100px; }
.error-hero .big-code {
  font-family: var(--font-display);
  font-size: clamp(6rem, 20vw, 12rem);
  font-weight: 700;
  background: linear-gradient(120deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  line-height: 1;
}

/* ---------- Reveal animations ---------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ---------- Utilities ---------- */
.mt-10 { margin-top: 10px; } .mt-20 { margin-top: 20px; } .mt-30 { margin-top: 30px; }
.mt-40 { margin-top: 40px; } .mt-60 { margin-top: 60px; }
.mb-10 { margin-bottom: 10px; } .mb-20 { margin-bottom: 20px; } .mb-30 { margin-bottom: 30px; }
.mb-40 { margin-bottom: 40px; } .mb-60 { margin-bottom: 60px; }
.center { text-align: center; }
.muted { color: var(--muted); }
.accent { color: var(--accent-2); }

/* ---------- Product boxes (digital products) ---------- */
.product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 1000px) { .product-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .product-grid { grid-template-columns: 1fr; } }
.product-card { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.product-card .product-shot { display: block; background: #050608; }
.product-card .product-shot img { width: 100%; height: auto; display: block; }
.product-card .product-meta { padding: 18px 22px 22px; display: flex; flex-direction: column; gap: 4px; }
.product-card .product-meta h3 { font-size: 1.12rem; }
.product-card .product-meta p { color: var(--muted); font-size: 0.88rem; margin: 0; }
.product-card .price { color: var(--accent-2); font-weight: 600; font-family: var(--font-display); font-size: 0.98rem; margin-top: 6px; }
/* RTL bidi fix: a Latin price amount + an Arabic duration that also starts with a digit
   (e.g. "400 MAD · 4 أشهر") let the browser merge the two numbers into "4 400". Force price
   strings to read left-to-right (how prices/phone numbers are shown in RTL UIs), kept right-aligned. */
[dir="rtl"] .price, [dir="rtl"] .rating-badge b { direction: ltr; unicode-bidi: isolate; text-align: right; }
.product-card .order-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; color: var(--accent-2); font-weight: 600; font-size: 0.9rem; }
.product-card .order-link svg { width: 16px; height: 16px; transition: transform 0.2s; }
a.product-card:hover .order-link svg { transform: translateX(4px); }

/* =========================================================================
   SITE-WIDE PREMIUM BACKDROP — "Aurora Plasma" (canvas)
   The living color field is painted on a <canvas id="rosh-aurora"> by
   js/rosh.js — canvas-only (no mix-blend-mode / SVG-filter / ctx.filter),
   so Chrome & Firefox render it identically and it can't flicker on reload.
   Layer stack (all fixed, pointer-events:none):
     html            deep-navy base color (back-most, opaque)
     html::before z:-2 STATIC fallback vignette — only shows if canvas no-ops
     #rosh-aurora z:-1 the animated plasma field (paints opaque over the base)
   body is transparent + isolate so real content stays above the backdrop.
   ========================================================================= */
html { position: relative; background: var(--bg); }

body {
  background: transparent;   /* base navy moved to <html> so html::* layers show */
  position: relative;
  isolation: isolate;        /* real content stays above the -1/-2 backdrop */
}

/* The animated backdrop is now rendered on a <canvas> by js/rosh.js
   (Aurora Plasma engine) — canvas-only, identical in Chrome & Firefox, no
   mix-blend-mode / SVG-filter / ctx.filter, so it can't flicker on reload.
   The canvas draws the color field, reading-zone vignette AND grain itself. */

/* Static fallback vignette — only visible if the canvas silently no-ops
   (sits one layer BELOW the canvas; the running canvas paints opaque over it). */
html::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(120% 100% at 50% 42%, rgba(6, 9, 18, 0) 40%, rgba(6, 9, 18, 0.45) 100%),
    linear-gradient(180deg, rgba(255, 183, 74, 0.03) 0%, transparent 22%, transparent 78%, rgba(60, 90, 255, 0.03) 100%),
    #0a0e1a;
}

/* The engine appends this fixed canvas; keep it behind all content. */
#rosh-aurora {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
  display: block;
}

/* De-band the sections so the fixed field reads as one continuous surface */
.section { background: transparent; position: relative; z-index: 0; }
.section-soft {
  background: linear-gradient(180deg,
    rgba(14, 20, 36, 0) 0%, rgba(14, 20, 36, 0.55) 14%,
    rgba(14, 20, 36, 0.55) 86%, rgba(14, 20, 36, 0) 100%);
  border-top: none;
  border-bottom: none;
  position: relative;
  z-index: 0;
}
.section-soft::before,
.section-soft::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(233, 237, 246, 0) 0%, rgba(233, 237, 246, 0.08) 50%, rgba(233, 237, 246, 0) 100%);
}
.section-soft::before { top: 0; }
.section-soft::after  { bottom: 0; }

/* Hero: transparent so the fixed aurora field carries through continuously.
   The old glow orbs are removed — being clipped at the hero's overflow edge
   created a visible background seam into the next section; the aurora already
   provides the depth. */
.hero { background: transparent; z-index: 0; overflow: visible; }   /* was hidden (for the old orbs) — it clipped the CTA glow at the section edge */
.hero-orbs { display: none; }

/* Footer translucent so the field carries through */
.site-footer {
  background: linear-gradient(180deg, rgba(14, 20, 36, 0) 0%, rgba(14, 20, 36, 0.6) 30%, rgba(14, 20, 36, 0.75) 100%);
  position: relative;
  z-index: 0;
}

/* Cards stay opaque + readable, above the field */
.card { position: relative; z-index: 0; }

/* (Reduced-motion + mobile handling for the backdrop now live in the canvas
   engine in js/rosh.js — it renders a single static frame under reduced-motion
   and uses a smaller buffer on phones.) */

/* ---------- Obscura vault showcase (login-card mockup) ---------- */
.ob-wrap { align-self: center; }
.ob-card {
  background: linear-gradient(180deg, rgba(20, 26, 44, 0.9), rgba(12, 16, 28, 0.92));
  border: 1px solid var(--border-strong);
  border-radius: 22px;
  padding: 34px 32px;
  box-shadow: var(--shadow-card);
}
.ob-tag {
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 0.72rem;
  color: var(--faint);
  margin-bottom: 22px;
}
.ob-brand { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.ob-lock {
  width: 46px; height: 46px; flex: none;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffd98a, #ff9d2f);
  color: #14100b;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 18px rgba(255, 122, 41, 0.35);
}
.ob-lock svg { width: 22px; height: 22px; }
.ob-title { font-family: Georgia, "Times New Roman", serif; font-size: 2rem; font-weight: 600; color: #fff; letter-spacing: 0.01em; }
.ob-sub { color: var(--muted); font-size: 1rem; line-height: 1.6; margin-bottom: 24px; }
.ob-rule { height: 1px; background: var(--border); margin-bottom: 24px; }
.ob-google {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  background: linear-gradient(120deg, #ffb74a, #ff9d3f);
  color: #14100b;
  font-family: var(--font-display); font-weight: 700; font-size: 1.02rem;
  padding: 15px; border-radius: 14px; margin-bottom: 26px;
  box-shadow: 0 10px 26px rgba(255, 122, 41, 0.28);
}
.ob-list { list-style: none; display: grid; gap: 16px; }
.ob-list li { display: flex; gap: 12px; align-items: flex-start; }
.ob-list li svg { width: 18px; height: 18px; flex: none; margin-top: 1px; color: var(--accent-2); }
.ob-list li span {
  font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--muted); line-height: 1.5;
}
.ob-powered {
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  text-transform: uppercase; letter-spacing: 0.18em; font-size: 0.72rem;
  color: var(--faint); text-align: center; margin-top: 22px;
}
.ob-powered::first-letter { color: var(--accent-2); }

/* ============================================================================
   ROSH™ Company Labs — CLEAN CARDS  (refactor: simple, calm, NO glow)
   Replaces the old "Solid Depth" ring/glow layer. Cards are quiet dark panels
   that sit on the aurora background: a thin border with a hair of top-light and
   a soft shadow. NO gradient hairline ring, NO amber corner-glow, NO hover wash.
   Only CLICKABLE cards react — a gentle lift + a slightly warmer border. Static,
   form and container cards never move. Transform / border / shadow only ->
   cross-browser + reduced-motion safe. (--ease-lift is re-declared here because
   the removed layer used to define it.)
   ============================================================================ */
:root{ --ease-lift: cubic-bezier(.22,.61,.36,1); }

/* one clean surface for cards + the standalone panels */
.card,
.stat,
.step,
.faq details{
  position: relative;
  background: var(--surface);
  border: 1px solid rgba(129,150,245,.15);
  border-radius: 16px;
  box-shadow: inset 0 1px 0 rgba(150,170,255,.07), 0 8px 26px rgba(4,8,26,.40);
}
.card{ transition: transform .2s var(--ease-lift), border-color .2s ease, box-shadow .2s ease; }

/* clickable cards ONLY: gentle lift + warm border — no glow, no wash */
a.card:hover,
.contact-grid .card:hover,
a.product-card:hover{
  transform: translateY(-4px);
  border-color: rgba(255,122,41,.40);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 14px 34px rgba(2,6,18,.5);
  color: var(--text);
}
a.card:hover .card-link{ color: var(--accent); }
a.card:hover .card-link svg,
a.product-card:hover .order-link svg{ transform: translateX(4px); }
.card .card-link svg,
.product-card .order-link svg{ transition: transform .2s var(--ease-lift); }
a.card:focus-visible,
a.product-card:focus-visible{ outline:none; box-shadow: 0 0 0 2px rgba(255,183,74,.6); }

/* static / testimonial / form / container cards never move on hover */
.reviews-track .card:hover{
  transform:none; border-color: rgba(255,255,255,.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.045), 0 6px 20px rgba(2,6,18,.32);
}

/* FAQ open: just a hair lighter + a warm border (no ring) */
.faq details[open]{ background:#151b2e; border-color: rgba(255,122,41,.26); }

/* icon tile: clean amber-tinted square, subtle (no bloom) */
.card-icon{
  border-radius: 14px;
  background: linear-gradient(160deg, rgba(255,183,74,.18), rgba(255,122,41,.05));
  border: 1px solid rgba(255,122,41,.20);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}

/* media frames: clean thin border + soft shadow */
.card-img{ border-color: rgba(255,255,255,.08); }
.split-media{
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  box-shadow: 0 12px 34px rgba(2,6,18,.45);
}

/* product shot: plain seam, not a glowing divider */
.product-card .product-shot{ border-bottom: 1px solid rgba(255,255,255,.06); }

/* CTA band: keep the calm warm focal wash from base; just soften the frame */
.cta-band{ border: 1px solid rgba(255,122,41,.28); box-shadow: 0 12px 40px rgba(2,6,18,.4); }

/* ============================================================================
   ROSH™ Company Labs — "KINETIC TECH" PREMIUM TYPE + MOTION LAYER  (FINAL)
   APPEND verbatim to the very END of css/rosh.css. Later source order wins, so
   this overrides the base type scale / buttons / reveal without edits above.
   Pairs with the JS that REPLACES the old reveal block (lines 25-42 of rosh.js)
   and the tiny inline <head> flag script (see integrationNotes).

   VERIFIED against the live markup (apps/main/public):
     - primary CTA uses an inline <svg> arrow  -> arrow-nudge works, no HTML edits
     - .eyebrow is display:inline-flex; gap:8px -> the pip is a valid flex child
     - --accent-soft (#ff7a29 @ .14) EXISTS     -> ghost hover fill is valid
     - hero uses .hero (index) AND .page-hero (19 interior pages) -> entrance both
   CROSS-ENGINE / FLICKER / CLS GUARDS (same discipline as the Solid-Depth layer):
     - Motion is transform/opacity ONLY. No mix-blend-mode, no will-change fan-out,
       no @property-animated gradient angles, no filter animation.
     - Text-gradient keyword: SOLID gold FIRST + @supports guard + forced-colors
       restore -> never invisible.
     - Hero hidden state is gated behind html.js (set synchronously in <head>), so
       if JS is absent/blocked/throws the hero is FULLY VISIBLE from first paint
       (no LCP/FOIT hole). Entrance is transform/opacity only -> no reflow.
     - Font swap tuned with metric-override @font-face fallbacks; NO text-wrap:balance
       on H1 -> no headline CLS.
     - Everything collapses to instant under prefers-reduced-motion.
   ============================================================================ */

/* ---- fonts re-declared here so this block is self-contained (last wins) ---- */
:root{
  --font-display: "Space Grotesk", "SpaceGrotesk-fallback", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --font-body:    "Inter", "Inter-fallback", "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
  --ease-out: cubic-bezier(.16,1,.3,1);      /* snappy settle for entrances */
  /* --ease-lift + --accent-soft already exist in the base :root */
}

/* ---- metric-matched fallback faces -> the swap is a repaint, not a reflow ----
   Space Grotesk runs WIDER than Segoe UI; these overrides pull the fallback's
   advance/ascent close so the H1 does not change width or line-count on swap. */
@font-face{
  font-family:"SpaceGrotesk-fallback";
  src:local("Segoe UI"), local("Arial");
  size-adjust:96%; ascent-override:95%; descent-override:24%; line-gap-override:0%;
}
@font-face{
  font-family:"Inter-fallback";
  src:local("Segoe UI"), local("Arial");
  size-adjust:100%; ascent-override:90%; descent-override:22%; line-gap-override:0%;
}

/* ---------------------------------------------------------------------------
   1. TYPE SCALE — confident fluid clamps, tighter optical tracking on big
   headings, refined line-heights. Body stays Inter @ 16/1.7 for reading.
   --------------------------------------------------------------------------- */
body{
  font-family: var(--font-body);
  letter-spacing: .002em;
  text-rendering: optimizeLegibility;
}
h1,h2,h3,h4,h5,h6{
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.022em;                  /* tighter than base -0.01em */
}
/* NOTE: no text-wrap:balance on h1 (avoids swap re-break CLS on the LCP line). */
h1{ font-size: clamp(2.5rem, 6vw, 4.4rem); line-height: 1.05; letter-spacing: -0.03em; }
h2{ font-size: clamp(1.9rem, 4.2vw, 2.9rem); letter-spacing: -0.025em; text-wrap: balance; }
h3{ font-size: clamp(1.35rem, 2.6vw, 1.78rem); letter-spacing: -0.018em; text-wrap: balance; }
h4{ font-size: 1.22rem; letter-spacing: -0.012em; }

/* hero weight-contrast keyword (existing markup: <span class="thin">) */
.thin{ font-weight: 400; color: var(--muted); letter-spacing: -0.02em; }

/* ONE gold-gradient hero keyword. Add class="grad-word" to a single word.
   Solid gold FIRST (paints even without background-clip); gradient only under
   @supports; forced-colors restore lives in section 9. Never use at body size. */
.grad-word{ color: var(--accent-2); }
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .grad-word{
    background: linear-gradient(102deg,#ffd9a0 0%, var(--accent-2) 42%, var(--accent) 100%);
    -webkit-background-clip:text; background-clip:text;
    -webkit-text-fill-color:transparent; color:transparent;
  }
}

/* leads / section-head rhythm */
.hero p.lead{ max-width: 640px; margin: 26px 0 40px; color: var(--muted);
  font-size: 1.14rem; line-height: 1.66; text-wrap: pretty; }
.page-hero p.lead{ font-size: 1.1rem; line-height: 1.65; text-wrap: pretty; }
.section-head p{ font-size: 1.06rem; line-height: 1.6; text-wrap: pretty; }

/* ---------------------------------------------------------------------------
   2. EYEBROW + LABELS — display face, wider optical tracking. The gold pip is
   scoped to HERO eyebrows only (so 404 "Invalid Link" etc. are untouched).
   --------------------------------------------------------------------------- */
.eyebrow{
  font-family: var(--font-display);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .15em;
}
.hero .eyebrow::before,
.page-hero .eyebrow::before{
  content:""; width:6px; height:6px; border-radius:50%;
  background: radial-gradient(circle at 35% 30%, #ffd98a, var(--accent));
  box-shadow: 0 0 10px rgba(255,183,74,.6);
  flex:none;                                 /* .eyebrow is inline-flex+gap:8px */
}

/* ---------------------------------------------------------------------------
   3. BUTTONS — real depth + a single controlled shine sweep + arrow nudge.
   Shine is a transform of a masked pseudo ABOVE the fill, label lifted above it
   (fixes the z-index:-1 occlusion). Compositor-only, no background animation.
   --------------------------------------------------------------------------- */
.btn{
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.01em;
  position: relative;
  overflow: hidden;                          /* clip the shine sweep */
  isolation: isolate;
  transition: transform .22s var(--ease-lift), box-shadow .28s var(--ease-lift),
              background-color .2s ease, border-color .2s ease, color .2s ease;
}
/* keep the visible label/arrow above the sweep */
.btn > *{ position: relative; z-index: 2; }
.btn svg{ transition: transform .22s var(--ease-lift); }
.btn:hover svg{ transform: translateX(4px); }   /* arrow nudge (real inline svg) */

.btn-primary{
  background: linear-gradient(118deg, var(--accent), #ff9d3f);
  color: #14100b;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.34), 0 8px 22px rgba(255,122,41,.30);
}
.btn-primary:hover{
  transform: translateY(-2px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.40), 0 14px 34px rgba(255,122,41,.42);
  color:#14100b;
}

.btn-ghost{
  background: transparent;
  border-color: var(--border-strong);
  color: var(--text);
}
.btn-ghost:hover{
  border-color: var(--accent);
  color: var(--text);
  background: var(--accent-soft);             /* verified token exists */
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(2,6,18,.35);
}
.btn:active{ transform: translateY(0) scale(.985); }
.btn:focus-visible{ outline:none; box-shadow: 0 0 0 2px rgba(255,183,74,.65); }

/* ---------------------------------------------------------------------------
   4. SECTION HEADERS — a short gold rule under centered headers. Reuses the
   card amber->gold vocabulary. Opt-out per instance with .no-rule.
   --------------------------------------------------------------------------- */
.section-head.center:not(.no-rule) h2::after{
  content:""; display:block; width:56px; height:3px; margin:20px auto 0; border-radius:999px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  box-shadow: 0 0 16px rgba(255,183,74,.4);
}

/* ---------------------------------------------------------------------------
   5. LINKS / SELECTION / SCROLLBAR polish — scoped so nav/card/button links
   are untouched (only prose + footer + lead links get the animated underline).
   --------------------------------------------------------------------------- */
.prose a, .footer-links a, .footer-bottom a, .lead a{
  background-image: linear-gradient(var(--accent-2), var(--accent-2));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1.5px;
  transition: background-size .28s var(--ease-lift), color .2s ease;
}
.prose a:hover, .footer-links a:hover, .footer-bottom a:hover, .lead a:hover{
  background-size: 100% 1.5px;
}
/* brand logo + social buttons never get the text-link underline */
.site-footer .brand, .social-row a{ background-image: none; }

::selection{ background: var(--accent); color:#fff; text-shadow:none; }
::-moz-selection{ background: var(--accent); color:#fff; }

html{ scrollbar-width: thin; scrollbar-color: rgba(255,122,41,.55) transparent; }
::-webkit-scrollbar{ width:12px; height:12px; }
::-webkit-scrollbar-track{ background: transparent; }
::-webkit-scrollbar-thumb{
  background: linear-gradient(180deg, rgba(255,122,41,.7), rgba(255,157,63,.5));
  border: 3px solid transparent; background-clip: padding-box; border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover{
  background: linear-gradient(180deg, var(--accent), #ff9d3f);
  background-clip: padding-box;
}

/* ---------------------------------------------------------------------------
   6. MOTION SYSTEM — reveal + per-item stagger (works with the EXISTING
   per-element .reveal markup; JS sets --rd, no HTML edits) + hero entrance.
   --------------------------------------------------------------------------- */
.reveal{
  opacity:0; transform: translateY(26px);
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
  transition-delay: var(--rd, 0s);           /* JS stamps --rd for the cascade */
}
.reveal.visible{ opacity:1; transform:none; }

/* HERO ENTRANCE — choreographed rise on load, on BOTH hero types (all 20 pages).
   Hidden state applies ONLY under html.js (set synchronously in <head>), so with
   JS off/blocked the hero paints fully visible immediately -> no LCP/FOIT hole.
   Only transform/opacity animate; space is reserved -> no CLS. */
/* Animate EVERY direct child of the hero container — eyebrow, breadcrumb, heading,
   lead, "Last updated" tag, buttons, anything — so nothing at the top is static. */
html.js .hero > .container > *,
html.js .page-hero > .container > *{
  opacity:0; transform: translateY(24px);
  transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
}
html.js body.hero-in .hero > .container > *,
html.js body.hero-in .page-hero > .container > *{ opacity:1; transform:none; }
/* staggered cascade by position (caps so a long hero never lags) */
html.js body.hero-in .hero > .container > *:nth-child(1),
html.js body.hero-in .page-hero > .container > *:nth-child(1){ transition-delay:.04s; }
html.js body.hero-in .hero > .container > *:nth-child(2),
html.js body.hero-in .page-hero > .container > *:nth-child(2){ transition-delay:.13s; }
html.js body.hero-in .hero > .container > *:nth-child(3),
html.js body.hero-in .page-hero > .container > *:nth-child(3){ transition-delay:.22s; }
html.js body.hero-in .hero > .container > *:nth-child(4),
html.js body.hero-in .page-hero > .container > *:nth-child(4){ transition-delay:.31s; }
html.js body.hero-in .hero > .container > *:nth-child(5),
html.js body.hero-in .page-hero > .container > *:nth-child(5){ transition-delay:.40s; }
html.js body.hero-in .hero > .container > *:nth-child(n+6),
html.js body.hero-in .page-hero > .container > *:nth-child(n+6){ transition-delay:.48s; }

/* ---------------------------------------------------------------------------
   7. STAT COUNT-UP — OPT-IN only (see JS + integrationNotes). CSS just holds
   the digit box so an animated value never wraps or shifts.
   --------------------------------------------------------------------------- */
.num[data-count]{ font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------------------------------------------------------------------------
   8. BRAND MARQUEE — OPT-IN. Wrap a logo row:
     <div class="marquee"><div class="marquee-track"> …items… </div></div>
   JS clones the track once and toggles .run on-screen. Compositor-only translateX.
   --------------------------------------------------------------------------- */
.marquee{
  position: relative; overflow: hidden; width: 100%;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track{
  display: flex; flex-wrap: nowrap; align-items: center;
  gap: 32px 52px; width: max-content;
  animation: rosh-marquee 34s linear infinite;
  animation-play-state: paused;              /* JS .run resumes when on-screen */
}
.marquee.run .marquee-track{ animation-play-state: running; }
.marquee:hover .marquee-track{ animation-play-state: paused; }
@keyframes rosh-marquee{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } }

/* ---------------------------------------------------------------------------
   9. FORCED-COLORS — keep gradient word / rules / pip visible in High Contrast.
   grad-word restores to CanvasText (a heading word is NOT a link).
   --------------------------------------------------------------------------- */
@media (forced-colors: active){
  .grad-word{ -webkit-text-fill-color: currentColor; color: CanvasText; background: none; }
  .section-head.center:not(.no-rule) h2::after,
  .hero .eyebrow::before, .page-hero .eyebrow::before{ background: currentColor; box-shadow:none; }
}

/* ---------------------------------------------------------------------------
   10. REDUCED MOTION — everything collapses to instant. No transform/shine.
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  .reveal,
  html.js .hero > .container > *,
  html.js .page-hero > .container > *{
    opacity:1 !important; transform:none !important;
    transition:none !important; transition-delay:0s !important;
  }
  .btn, .btn svg, .btn-primary::after,
  .prose a, .footer-links a, .footer-bottom a, .lead a{ transition:none !important; }
  .btn-primary:hover::after, .btn:hover svg{ transform:none !important; }
  .btn-primary::after{ display:none; }
  .marquee-track{ animation:none !important; transform:none !important;
    width:100%; flex-wrap: wrap; justify-content:center; }
  .marquee{ -webkit-mask-image:none; mask-image:none; }
}
/* ============================================================================
   ROSH™ Company Labs — FINAL SEAMLESS PAGE SYSTEM  ("Continuous Flow")
   APPEND VERBATIM to the very END of css/rosh.css. Later source order wins, so
   this OVERRIDES the old .section / .section-soft band / hairline / hero-flow /
   footer rules and pulls .split / .stats / .steps / .cta-band / .prose / tables
   onto ONE calm vertical rhythm — matching the clean cards, over the aurora.

   PHILOSOPHY (Linear / Vercel / Stripe restraint): the whole page is ONE
   continuous transparent surface floating on the fixed aurora field. The dated
   alternating "soft" bands + ad-hoc hairlines are ELIMINATED. Separation is
   carried PURELY by a single fluid vertical-spacing scale + the existing type
   hierarchy. Hero flows into content; content flows into the footer. This is a
   subtraction pass — NO fills, rings, glow, blur, blend, mask, or new motion.

   CONSTRAINT COMPLIANCE:
   - Aurora bg + its colors: UNTOUCHED. Every section stays transparent so the
     field carries through unbroken. Only genuine content surfaces (cards, media,
     cta-band, prose note, table wrap + header) keep an opaque/near-opaque panel.
   - Spacing/rhythm pass only: no transform/opacity animation is added anywhere.
   - No backdrop-filter, mix-blend-mode, mask, mask-composite, will-change here.
   - Zero CLS / no horizontal scroll: only spacing + neutralized decorations;
     box model kept sane; container max-width 1180 preserved.
   - Cross-engine safe only (clamp, min, custom props, grid, flex, plain
     gradients) — Chrome and Firefox render identically.
   - Works on ALL 20 pages: index (.hero + many sections), 19 interior
     (.page-hero + .prose/etc.), AND 404 (.error-hero) — all covered below.
   - ™ brand strings untouched (CSS only, no markup rewrite).

   OPTIONAL HTML HOOKS (system is 100% correct on all 20 pages with NONE of
   them; exact placement is in htmlHooks): .section-tight / .section-flush-top /
   .section-flush-bottom.
   ============================================================================ */

/* ----------------------------------------------------------------------------
   0. ONE RHYTHM SCALE — every page-level gap derives from these tokens, so the
   whole site breathes on a single consistent grid. Fluid: tight on phones,
   generous on desktop. --hero-lede is capped by BOTH a vw and a vh term via
   min() so the fixed-nav clearance stays predictable on short-wide viewports
   (e.g. 1920x800) instead of crowding the fold with pure-vw padding.
   ---------------------------------------------------------------------------- */
:root{
  --section-y:       clamp(64px, 9vw, 118px);   /* vertical air between sections   */
  --section-y-tight: clamp(40px, 6vw, 76px);    /* opt-in tighter step             */
  --head-gap:        clamp(34px, 4.4vw, 60px);  /* section-head -> its content     */
  --hero-lede:       clamp(120px, min(15vw, 22vh), 190px); /* fixed-nav clearance   */
}

/* ----------------------------------------------------------------------------
   1. SECTIONS — one continuous transparent surface. ALL sections share the same
   symmetric vertical rhythm. No fills. The aurora shows through every one.
   ---------------------------------------------------------------------------- */
.section{
  padding-top: var(--section-y);
  padding-bottom: var(--section-y);
  background: transparent;
  border: 0;
  position: relative;
  z-index: 0;
}

/* KILL THE BANDS. .section-soft is fully neutralized to a plain transparent
   section — identical to every other section. No translucent band, no top /
   bottom hairlines. This is the core of "Continuous Flow": the alternating look
   is GONE and rhythm alone delineates. (Rule kept so existing .section-soft
   markup just renders as a normal seamless section — ZERO HTML edits needed.) */
.section-soft{
  background: transparent;
  border: 0;
}
.section-soft::before,
.section-soft::after{
  content: none;
  display: none;
}

/* Optional density modifiers (correct WITHOUT any HTML edit). The flush hooks
   are written at .section.section-* (specificity 0,2,0) + !important so they
   ALWAYS win — including on a hero-adjacent first section, where the
   `.hero + .section` adjacency rule (also 0,2,0) would otherwise tie/beat a
   single-class hook and silently no-op it. */
.section-tight{
  padding-top: var(--section-y-tight);
  padding-bottom: var(--section-y-tight);
}
.section.section-flush-top{ padding-top: 0 !important; }
.section.section-flush-bottom{ padding-bottom: 0 !important; }

/* ----------------------------------------------------------------------------
   2. SECTION HEADER — one cohesive treatment site-wide. Consistent gap to the
   content below (from the rhythm scale). The eyebrow + centered gold rule from
   the type layer are preserved untouched; we ONLY regularize spacing here.
   (Head max-width stays 720px exactly as before — no content-measure change.)
   ---------------------------------------------------------------------------- */
.section-head{
  max-width: 720px;
  margin-bottom: var(--head-gap);
}
.section-head.center{ margin-left: auto; margin-right: auto; text-align: center; }
.section-head .eyebrow{ margin-bottom: 18px; }
.section-head p{
  color: var(--muted);
  margin-top: 16px;
  font-size: 1.06rem;
  line-height: 1.6;
}
.section-head.center p{ margin-left: auto; margin-right: auto; }

/* ----------------------------------------------------------------------------
   3. HERO -> CONTENT — seamless. ALL three hero types (.hero on index,
   .page-hero on the 19 interior pages, .error-hero on 404) stay transparent and
   get ONE consistent top clearance under the fixed nav + a deliberately small
   bottom pad, so the hero flows straight into the first section with NO edge,
   band, or double-gap. The first section then trims its own top rhythm.
   ---------------------------------------------------------------------------- */
.hero,
.page-hero,
.error-hero{
  padding-top: var(--hero-lede);
  padding-bottom: clamp(16px, 2.6vw, 34px);
  background: transparent;
  position: relative;
  z-index: 0;
}
.hero-orbs{ display: none; }

.page-hero p.lead{
  color: var(--muted);
  max-width: 640px;
  margin-top: 20px;
  font-size: 1.1rem;
  line-height: 1.65;
}

/* First section after ANY hero trims its top rhythm so hero -> content reads as
   one continuous flow rather than an oversized stacked gap. Pure spacing; no
   seam. Includes .error-hero so 404 flows like every other page. */
.hero + .section,
.page-hero + .section,
.error-hero + .section{
  padding-top: clamp(32px, 5vw, 64px);
}

/* ----------------------------------------------------------------------------
   4. SPLIT (text + media) — same calm rhythm; gap tracks the scale so it feels
   part of the family instead of a bespoke 60px. The media frame keeps the
   clean-card surface language from the earlier layer; here we only ensure no
   stray base margin on the media stacks on top of the tokenized rhythm.
   ---------------------------------------------------------------------------- */
.split{
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(32px, 5vw, 60px);
  align-items: center;
}
.split-media{ margin: 0; }
@media (max-width: 900px){
  .split{ grid-template-columns: minmax(0, 1fr); gap: clamp(28px, 6vw, 40px); }
}

/* ----------------------------------------------------------------------------
   5. STATS / STEPS — consistent inter-item gaps on the same scale. Surfaces
   keep the clean-card panel language from the earlier layer; we null any stray
   item margin so only the grid gap governs spacing (no uneven double gaps).
   ---------------------------------------------------------------------------- */
.stats{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 22px);
}
.stat{ margin: 0; }
@media (max-width: 640px){ .stats{ grid-template-columns: 1fr; } }

.steps{ display: grid; gap: clamp(14px, 1.8vw, 18px); }
.step{ margin: 0; }

/* ----------------------------------------------------------------------------
   6. CTA BAND — the ONE call-to-action moment. It keeps its restrained warm
   focal wash (from the base + clean-cards layer) but is normalized into the
   family: calm padding + gap on the rhythm scale, no stray outer margin, and
   never louder than the page. NO extra glow is added here.
   ---------------------------------------------------------------------------- */
.cta-band{
  padding: clamp(38px, 5vw, 60px) clamp(26px, 4vw, 48px);
  gap: clamp(22px, 3vw, 28px);
  margin: 0;
}

/* ----------------------------------------------------------------------------
   7. PROSE (policies / articles) — calm reading column on the same rhythm.
   Consistent heading cadence; any .note panel keeps the clean-card surface.
   ---------------------------------------------------------------------------- */
.prose{ max-width: 760px; }
.prose h2{ font-size: 1.6rem; margin: clamp(38px, 4vw, 52px) 0 16px; }
.prose h3{ font-size: 1.2rem; margin: clamp(26px, 3vw, 36px) 0 12px; }
.prose p{ color: var(--muted); margin-bottom: 16px; }
.prose ul, .prose ol{ color: var(--muted); margin: 0 0 16px 22px; }
.prose li{ margin-bottom: 8px; }

/* ----------------------------------------------------------------------------
   8. TABLES — same calm surface + border language as the clean cards, so a data
   table reads as a member of the family. Wide tables scroll INSIDE their own
   wrap — never the page (no horizontal body scroll). The header is an OPAQUE
   --surface-2 data surface (not a translucent tint) so small header text stays
   crisp over the moving aurora and never shimmers.
   ---------------------------------------------------------------------------- */
.table-wrap{
  overflow-x: auto;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius-sm);
  background: var(--surface);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.045), 0 6px 20px rgba(2,6,18,.32);
}
table.rosh-table{ width: 100%; border-collapse: collapse; }
.rosh-table th, .rosh-table td{ border-bottom: 1px solid rgba(255,255,255,.07); }
.rosh-table tr:last-child td{ border-bottom: none; }
.rosh-table th{ background: var(--surface-2); }   /* opaque, calm data header */

/* ----------------------------------------------------------------------------
   9. FOOTER -> continuous. Remove the hard top hairline + the stray margin-top:90px
   (which stacked on the last section's padding) so the last section flows
   straight into the footer. Its top air now comes from the rhythm scale. It
   keeps ONLY the pre-existing soft gradient — the single intentional bottom
   settle, consistent site-wide.
   ---------------------------------------------------------------------------- */
.site-footer{
  border-top: 0;
  margin-top: 0;
  padding-top: var(--section-y);
  padding-bottom: clamp(28px, 3vw, 36px);
  background: linear-gradient(180deg,
    rgba(14,20,36,0)   0%,
    rgba(14,20,36,.45) 34%,
    rgba(14,20,36,.72) 100%);
  position: relative;
  z-index: 0;
}
.footer-grid{ gap: clamp(32px, 4vw, 44px); margin-bottom: clamp(38px, 4vw, 50px); }

/* The footer's inner divider (above the copyright row) is the single, quiet,
   CONSISTENT hairline the page allows itself — kept, softened to match. */
.footer-bottom{ border-top: 1px solid rgba(233,237,246,.07); }

/* ----------------------------------------------------------------------------
   10. RESPONSIVE — the system is fluid via clamp(), so no per-breakpoint rhythm
   rewrite is needed. This only tightens the container gutter on phones.
   Container max-width (1180) preserved; body already has overflow-x:hidden.
   ---------------------------------------------------------------------------- */
@media (max-width: 640px){
  .container{ padding-left: 20px; padding-right: 20px; }
}

/* ----------------------------------------------------------------------------
   11. REDUCED MOTION — this pass adds NO motion (spacing only). This guard is a
   defensive no-op documenting that intent and neutralizing any pre-existing
   scroll-reveal transition on the page-level elements we touched, for users who
   prefer reduced motion. Safe on all engines.
   ---------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  .section, .section-soft,
  .hero, .page-hero, .error-hero,
  .split, .stats, .steps, .cta-band, .site-footer{
    animation: none !important;
    transition: none !important;
  }
}
/* ============================================================================
   FLOATING WHATSAPP LEAD BUTTON — injected on every page by js/rosh.js.
   One-tap contact for high-intent visitors (audit: WhatsApp is the strongest
   channel but was under-deployed). Recognizable green; reduced-motion safe.
   ============================================================================ */
.wa-fab{
  position: fixed; right: 20px; bottom: 20px; z-index: 90;
  width: 56px; height: 56px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #25d366; color: #fff;
  box-shadow: 0 8px 24px rgba(0,0,0,.35), 0 0 0 6px rgba(37,211,102,.14);
  transition: transform .2s var(--ease-lift), box-shadow .2s ease;
}
.wa-fab:hover{ color:#fff; transform: translateY(-2px) scale(1.05);
  box-shadow: 0 12px 30px rgba(0,0,0,.42), 0 0 0 8px rgba(37,211,102,.20); }
.wa-fab:focus-visible{ outline:none; box-shadow: 0 0 0 3px #fff, 0 0 0 6px #25d366; }
.wa-fab svg{ width: 30px; height: 30px; }
.wa-fab::after{ content:""; position:absolute; inset:0; border-radius:50%;
  border: 2px solid rgba(37,211,102,.5); animation: wa-pulse 2.4s ease-out infinite; pointer-events:none; }
@keyframes wa-pulse{ 0%{ transform:scale(1); opacity:.7 } 100%{ transform:scale(1.7); opacity:0 } }
@media (max-width:640px){ .wa-fab{ width:52px; height:52px; right:16px; bottom:16px; } }
@media (prefers-reduced-motion: reduce){ .wa-fab{ transition:none; } .wa-fab::after{ animation:none; display:none; } }

/* ============================================================================
   IMAGE + BUTTON POLISH (fixes)
   ============================================================================ */
/* White-background thumbnails (QR codes / product shots on white): fill the card
   on a white surface with no dark padding gap — and stay fully scannable. */
.card-img.qr-white{ background:#fff; padding:0; border-color: rgba(255,255,255,.14); }
.card-img.qr-white img{ object-fit:contain; width:100%; height:220px; padding:14px; }

/* Buttons: clearer, more premium hover (the old 2px lift read as "no animation"). */
.btn:hover,
.btn-ghost:hover{ transform: translateY(-3px) scale(1.02); }
.btn-primary:hover{ box-shadow: 0 16px 36px rgba(255,122,41,.45), inset 0 1px 0 rgba(255,255,255,.42); }
.btn:active{ transform: translateY(-1px) scale(.99); }
/* Down-arrow scroll CTA: a gentle idle bounce (scroll hint) + livelier on hover. */
.btn-down svg{ animation: rosh-nudge-down 1.8s ease-in-out infinite; }
.btn-down:hover svg{ animation-duration:.7s; }
@keyframes rosh-nudge-down{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(3px);} }
@media (prefers-reduced-motion: reduce){
  .btn-down svg{ animation:none !important; }
  .btn:hover, .btn-ghost:hover{ transform:none !important; }
}

/* ============================================================================
   TRUST BADGES — small reassurance row near CTAs (genuine / instant / 24h).
   ============================================================================ */
.trust-badges{ display:flex; flex-wrap:wrap; justify-content:center; gap:14px 30px; margin-left:auto; margin-right:auto; max-width:940px; }
.trust-badges .tb{ display:inline-flex; align-items:center; gap:10px; color:var(--muted); font-size:.95rem; font-weight:500; white-space:nowrap; }
.trust-badges .tb svg{ width:20px; height:20px; color:var(--good); flex:none; }
.trust-badges .tb strong{ color:var(--text); font-weight:600; }
/* Phone: a clean, balanced 2x2 grid + breathing room (mt-/mb- utilities now apply too). */
@media (max-width:640px){
  .trust-badges{ display:grid; grid-template-columns:1fr 1fr; gap:14px 16px; margin-top:26px; margin-bottom:26px; justify-items:center; max-width:420px; }
  .trust-badges .tb{ font-size:.82rem; gap:7px; white-space:normal; text-align:center; }
  .trust-badges .tb svg{ width:16px; height:16px; }
}
@media (max-width:360px){ .trust-badges{ grid-template-columns:1fr; } }
/* Reviews page: rating badge + review source label */
.rating-badge{ display:inline-flex; align-items:center; gap:10px; margin-top:22px; padding:10px 18px; border-radius:999px;
  border:1px solid rgba(255,183,74,.34); background:rgba(255,122,41,.08); }
.rating-badge .stars{ margin:0; }
.rating-badge b{ color:var(--text); font-family:var(--font-display); }
.review-meta .who span.src{ color:var(--faint); }

/* Language switcher (EN/FR) in the nav */
/* Language switcher — ONE button that opens a small dropdown menu (EN/FR/AR). */
html.js .nav-links > .nav-lang:not(.lang-ready){ display: none; }   /* hide raw markup until JS builds the dropdown */
.nav-lang{ position: relative; }
.lang-btn{
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 11px; border: 1px solid var(--border-strong); border-radius: 9px;
  background: transparent; color: var(--muted); cursor: pointer;
  font-family: var(--font-body); font-weight: 700; font-size: .9rem; letter-spacing: .03em;
  line-height: 1; transition: color .2s, border-color .2s;
}
.lang-btn:hover, .nav-lang.open .lang-btn{ color: var(--text); border-color: var(--accent); }
.lang-btn .globe{ width: 16px; height: 16px; flex: none; }
.lang-btn .chev{ width: 11px; height: 11px; flex: none; opacity: .75; transition: transform .2s; }
.nav-lang.open .lang-btn .chev{ transform: rotate(180deg); }
.lang-menu{
  position: absolute; top: calc(100% + 8px); inset-inline-end: 0;
  min-width: 172px; margin: 0; padding: 6px; list-style: none;
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: 12px; box-shadow: var(--shadow-card);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s; z-index: 200;
}
.nav-lang.open .lang-menu{ opacity: 1; visibility: visible; transform: translateY(0); }
.lang-menu li{ list-style: none; }
.lang-menu a{
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 10px 12px; border-radius: 8px; color: var(--muted); font-weight: 600; white-space: nowrap;
}
.lang-menu a:hover{ background: rgba(255,255,255,.05); color: var(--text); }
.lang-menu a[aria-current="true"]{ color: var(--accent-2); }
.lang-menu a[aria-current="true"]::after{ content: "✓"; font-weight: 700; }

/* ============================================================================
   HUMAN-CRAFTED CTA BAND + BUTTONS — swap the soft amber "ambient glow" gradients
   for crisp, intentional treatments (solid surface, a sharp gold accent bar,
   tighter neutral shadows). The aurora background is NOT touched.
   ============================================================================ */
.cta-band{
  position: relative;
  overflow: hidden;
  background: var(--surface);                 /* solid — removes the radial amber glow */
  border: 1px solid rgba(255,122,41,.30);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 16px 44px rgba(2,6,18,.42);
}
.cta-band::before{                            /* crisp solid gold accent bar — a designed detail, not a glow */
  content:""; position:absolute; top:0; left:0; right:0; height:3px;
  background: var(--accent);
}
/* Primary buttons: tight neutral shadow instead of a big amber halo (the amber
   comes from the fill itself, not a glow around it). */
.btn-primary{ box-shadow: inset 0 1px 0 rgba(255,255,255,.26), 0 8px 20px rgba(2,6,18,.42); }
.btn-primary:hover{ box-shadow: inset 0 1px 0 rgba(255,255,255,.30), 0 12px 26px rgba(2,6,18,.5); }

/* ============================================================================
   REVIEWS MARQUEE — DEFAULT is a hidden-scrollbar manual row (works with no JS
   and under reduced motion). rosh.js upgrades it to .rm-live: a seamless
   compositor transform marquee (translateX on .rm-track, animated via WAAPI).
   Scrollbar always hidden; edges fade with a mask.
   ============================================================================ */
.reviews-marquee{
  display:flex; gap:22px; align-items:stretch;
  overflow-x:auto; overflow-y:hidden;
  padding:6px 2px 12px; scroll-behavior:auto;
  scrollbar-width:none; -ms-overflow-style:none; -webkit-overflow-scrolling:touch;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.reviews-marquee::-webkit-scrollbar{ display:none; height:0; }
.reviews-marquee:not(.rm-live) > *{ flex:0 0 min(360px, 82vw); }

/* Live (JS + motion allowed): clip the row and slide the track instead. */
.reviews-marquee.rm-live{ display:block; overflow:hidden; cursor:grab; contain:paint; direction:ltr; }
.reviews-marquee.rm-live.dragging{ cursor:grabbing; }
.reviews-marquee.rm-live .rm-track{
  display:flex; gap:22px; align-items:stretch;
  width:max-content; will-change:transform;
  direction:ltr;                 /* marquee scrolls identically in LTR & RTL (period stays positive) */
}
.reviews-marquee.rm-live .rm-track > *{ flex:0 0 min(360px, 82vw); }
html[dir="rtl"] .reviews-marquee.rm-live .rm-track > *{ direction:rtl; }   /* but Arabic cards keep RTL text */
/* each review renders in its own language's direction (English LTR, Arabic RTL) so quotes/punctuation/emoji don't scramble */
html[dir="rtl"] .reviews-marquee .card p{ unicode-bidi:plaintext; text-align:start; }
@media (prefers-reduced-motion: reduce){ .reviews-marquee{ -webkit-mask-image:none; mask-image:none; } }

/* ============================================================================
   MOBILE — language pill rides in the TOP BAR next to the hamburger, but only
   when it fits. rosh.js adds .lang-top and moves .nav-lang here; if the brand +
   pill + hamburger would overflow, JS drops .lang-top and the pill falls back
   into the menu. Brand text is never truncated (ROSH™ Company Labs stays whole).
   ============================================================================ */
@media (max-width: 900px){
  .nav-bar{ gap: 14px; }                                  /* tighter top bar so the pill has room */
  .nav-bar.lang-top > .nav-lang{
    margin: 0 0 0 auto;                                   /* push right, hug the hamburger */
    list-style: none; display: flex; align-items: center;
  }
  .nav-bar.lang-top > .nav-toggle{ margin-left: 0; }      /* the pill owns the auto-margin now */
  .nav-bar.lang-top > .nav-lang .lang-btn{      /* in the top bar: compact globe icon, like the hamburger */
    width: 44px; height: 44px; padding: 0; justify-content: center; border-radius: 12px; box-sizing: border-box;
  }
  .nav-bar.lang-top > .nav-lang .lang-code,
  .nav-bar.lang-top > .nav-lang .chev{ display: none; }
  .nav-bar.lang-top > .nav-lang .globe{ width: 20px; height: 20px; }
}

/* ============================================================================
   RTL (Arabic) SUPPORT — the dir="rtl" attribute already handles text direction,
   default (start) alignment and flex reversal. Here we only flip the few PHYSICAL
   left/right rules that would otherwise break. Centering (margin:auto auto) is
   direction-agnostic and left as-is.
   ============================================================================ */
html[dir="rtl"] .nav-links{ margin-left: 0; margin-right: auto; }
html[dir="rtl"] .nav-toggle{ margin-left: 0; margin-right: auto; }
html[dir="rtl"] .nav-cta{ margin-left: 0; margin-right: 6px; }
html[dir="rtl"] .rosh-table th,
html[dir="rtl"] .rosh-table td{ text-align: right; }
html[dir="rtl"] .prose .note{ border-left: 1px solid var(--border); border-right: 3px solid var(--accent); }
@media (max-width: 900px){
  html[dir="rtl"] .nav-bar.lang-top > .nav-lang{ margin: 0 auto 0 0; }
  html[dir="rtl"] .nav-bar.lang-top > .nav-toggle{ margin-right: 0; }
}

/* RTL: phone numbers must read left-to-right. Bidi was flipping "+212 714 158
   488" into "488 158 714 212+" inside the RTL flow. Isolate + force LTR. */
html[dir="rtl"] a[href^="tel:"],
html[dir="rtl"] .num { direction: ltr; unicode-bidi: isolate; }

/* RTL: Latin brand names carrying a ™ (ROSH™ Company Labs, Baryn Card™,
   Qelrivon™ CRM) were bidi-reordered ("Baryn Card™" -> "™Baryn Card"). rosh.js
   wraps each in <bdi class="ltr">; force it to lay out left-to-right. */
html[dir="rtl"] bdi.ltr,
html[dir="rtl"] .ltr { direction: ltr; unicode-bidi: isolate; }