/* ==========================================================================
   GERSHAD — COMPLETE SHARED STYLESHEET /css/site.css
   Replacement revision: 2026-09-24 — mobile action layout and badge sizing.
   --------------------------------------------------------------------------
   This is a COMPLETE replacement, not a standalone patch.
   Parts 1 and 2 preserve the theme and component cascade. The duplicated
   framework preamble has been removed. Part 3 owns native RTL list markers.
   Part 4 owns reviewed responsive and accessibility refinements.

   PAGE / COMPONENT MAP
   .page-report / .report       Written reports.
   .page-notebook / .nb-report   Older data reports.
   .page-docs                   rights/ and best/ indexes and articles.
   .page-legal                  Privacy policy.
   .page-media                  Media page.
   .site-header / .site-footer  Shared navigation and footer.
   .mytabs                     Radio-input article tabs.
   .screenshot-slider          Carousel controlled by site.js.
   body.embed                  Documents inside report iframes.

   MAINTENANCE
   Keep /css/fonts.css loaded; it defines --font-main and loads the text font.
   Keep rule order: later rules win only when cascade priority permits.
   The editorial column remains max-width:1000px; media cap remains 800px.
   Preserve tab visibility, focus-visible and reduced-motion behavior.
   Do not remove clipping globally: navigation/carousels depend on it.
   Part 3 uses native markers; it does NOT replace the HTML list counter.
   It does not transliterate numbers typed into text, scripts or images.
   Pages/iframe documents must load this file for these rules to apply.

   CONTENTS
   Part 1: inherited framework, utilities and theme components.
   Part 2: shared site components and editorial layout.
   Part 3: Persian numbering, RTL gutters and nested-list corrections.
   Part 4: shared tokens, responsive controls, accessibility and print.
   Part 5: linked superscript references and smaller endnotes.

   INTEGRATION
   Replace /css/site.css; do not append this complete file to the old file.
   Keep fonts.css and site.js. No new HTML classes are required.
   CSS cannot supply missing accessible names, iframe titles, menu focus
   trapping, carousel pause controls or correct semantic heading levels.
   Observed site.js follow-ups: mobile menu has no focus containment;
   carousel has hover/focus pause but no persistent pause/resume button.
   Its active dots also need aria-current updated by JavaScript.
   Confirm those behaviors in HTML/JS before claiming WCAG conformance.
   ========================================================================== */
/* ==========================================================================
   PART 1 — THEME & FRAMEWORK
   Compatibility utilities remain for older reports; do not remove classes
   based only on whether the homepage uses them.
   ========================================================================== */
:root {
  --bs-white: #fff;
  --bs-black: #000;
  --bs-green: green;
  --bs-secondary: #ff7139;
  --bs-primary: #1787fc;
  --bs-zumthor: #ebf5ff;
  --bs-cloudburst: #213053;
  --bs-mirage: #1d263a;
  --bs-blackrock: #0a043c;
  --bs-skeptic: #d6ebe4;
  --bs-java: #20bfa9;
  --bs-coral: #ff794d;
  --bs-sunglow: #ffcd28;
  --bs-electricviolet: #9447f5;
  --bs-sandal: #a98a6c;
  --bs-wattle: #c4d944;
  --bs-razzle: #ff4dc2;
  --bs-catskill: #e6eaf4;
  --bs-alto: #dfdfdf;
  --bs-athensgray: #f9fafb;
  --bs-raven: #7f828a;
  --bs-silver: #c4c4c4;
  --bs-ebony: #222831;
  --bs-lochinvar: #2d947a;
  --bs-alabaster: #f9f9f9;
  --bs-custom-color: #900;
  --bs-font-sans-serif: var(--font-main, "Vazirmatn", Tahoma, Arial, sans-serif);
  --bs-font-monospace: ui-monospace, SFMono-Regular, Consolas, monospace;
  --bs-gradient: linear-gradient(180deg, #ffffff26, #fff0);
}
*, :before, :after {
  box-sizing: border-box;
}
@media (prefers-reduced-motion: no-preference) {
  :root {
    scroll-behavior: smooth;
  }
}
/* Base document: scalable text and system fallback if the web font fails. */
body {
  font-family: var(--bs-font-sans-serif);
  color: #212529;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: #0000;
  background-color: #fff;
  margin: 0;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
}
h1, .h1, .h2, .h3, .h4, .h5, .h6 {
  margin-top: 0;
  margin-bottom: .5rem;
  font-weight: 500;
  line-height: 1.2;
}
:is(h2:not(:where([class*="was-h"])), :where(.was-h2)) {
  margin-top: 0;
  margin-bottom: .5rem;
  font-weight: 500;
  line-height: 1.2;
}
:is(h3:not(:where([class*="was-h"])), :where(.was-h3)) {
  margin-top: 0;
  margin-bottom: .5rem;
  font-weight: 500;
  line-height: 1.2;
}
:is(h4:not(:where([class*="was-h"])), :where(.was-h4)) {
  margin-top: 0;
  margin-bottom: .5rem;
  font-weight: 500;
  line-height: 1.2;
}
:is(h5:not(:where([class*="was-h"])), :where(.was-h5)) {
  margin-top: 0;
  margin-bottom: .5rem;
  font-weight: 500;
  line-height: 1.2;
}
:is(h6:not(:where([class*="was-h"])), :where(.was-h6)) {
  margin-top: 0;
  margin-bottom: .5rem;
  font-weight: 500;
  line-height: 1.2;
}
h1, .h1 {
  font-size: calc(1.375rem + 1.5vw);
}
@media (min-width: 1200px) {
  h1, .h1 {
    font-size: 2.5rem;
  }
}
.h2 {
  font-size: calc(1.325rem + .9vw);
}
:is(h2:not(:where([class*="was-h"])), :where(.was-h2)) {
  font-size: calc(1.325rem + .9vw);
}
@media (min-width: 1200px) {
  .h2 {
    font-size: 2rem;
  }
  :is(h2:not(:where([class*="was-h"])), :where(.was-h2)) {
    font-size: 2rem;
  }
}
.h3 {
  font-size: calc(1.3rem + .6vw);
}
:is(h3:not(:where([class*="was-h"])), :where(.was-h3)) {
  font-size: calc(1.3rem + .6vw);
}
@media (min-width: 1200px) {
  .h3 {
    font-size: 1.75rem;
  }
  :is(h3:not(:where([class*="was-h"])), :where(.was-h3)) {
    font-size: 1.75rem;
  }
}
.h4 {
  font-size: calc(1.275rem + .3vw);
}
:is(h4:not(:where([class*="was-h"])), :where(.was-h4)) {
  font-size: calc(1.275rem + .3vw);
}
@media (min-width: 1200px) {
  .h4 {
    font-size: 1.5rem;
  }
  :is(h4:not(:where([class*="was-h"])), :where(.was-h4)) {
    font-size: 1.5rem;
  }
}
.h5 {
  font-size: 1.25rem;
}
:is(h5:not(:where([class*="was-h"])), :where(.was-h5)) {
  font-size: 1.25rem;
}
.h6 {
  font-size: 1rem;
}
:is(h6:not(:where([class*="was-h"])), :where(.was-h6)) {
  font-size: 1rem;
}
/* Native text rhythm and semantic elements; component rules refine these. */
p {
  margin-top: 0;
  margin-bottom: 1rem;
}
address {
  font-style: normal;
  line-height: inherit;
  margin-bottom: 1rem;
}
ol, ul {
  padding-left: 2rem;
}
ol, ul, dl {
  margin-top: 0;
  margin-bottom: 1rem;
}
ol ol, ul ul, ol ul, ul ol {
  margin-bottom: 0;
}
dt {
  font-weight: 700;
}
dd {
  margin-bottom: .5rem;
  margin-left: 0;
}
b, strong {
  font-weight: bolder;
}
small, .small {
  font-size: .875em;
}
sup {
  vertical-align: baseline;
  font-size: .75em;
  line-height: 0;
  position: relative;
  top: -.5em;
}
a {
  color: #1787fc;
  text-decoration: underline;
}
a:hover {
  color: #126cca;
}
a:not([href]):not([class]), a:not([href]):not([class]):hover {
  color: inherit;
  text-decoration: none;
}
code {
  font-family: var(--bs-font-monospace);
  color: #d63384;
  word-wrap: break-word;
  direction: ltr;
  unicode-bidi: isolate;
  font-size: .875em;
}
a > code {
  color: inherit;
}
figure {
  margin: 0 0 1rem;
}
img, svg {
  vertical-align: middle;
}
table {
  caption-side: bottom;
  border-collapse: collapse;
}
caption {
  color: #6c757d;
  text-align: left;
  padding-top: .5rem;
  padding-bottom: .5rem;
}
th {
  text-align: inherit;
  text-align: -webkit-match-parent;
}
tr, td, th {
  border-color: inherit;
  border-style: solid;
  border-width: 0;
}
label {
  display: inline-block;
}
button {
  border-radius: 0;
}
button:focus {
  outline: 1px dotted;
  outline: -webkit-focus-ring-color auto 5px;
}
input, button, select {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  margin: 0;
}
button, select {
  text-transform: none;
}
[role="button"] {
  cursor: pointer;
}
select {
  word-wrap: normal;
}
[list]::-webkit-calendar-picker-indicator {
  display: none;
}
button {
  -webkit-appearance: button;
}
[type="button"] {
  -webkit-appearance: button;
}
button:not(:disabled) {
  cursor: pointer;
}
[type="button"]:not(:disabled) {
  cursor: pointer;
}
::-moz-focus-inner {
  border-style: none;
  padding: 0;
}
legend {
  float: left;
  width: 100%;
  font-size: calc(1.275rem + .3vw);
  line-height: inherit;
  margin-bottom: .5rem;
  padding: 0;
}
@media (min-width: 1200px) {
  legend {
    font-size: 1.5rem;
  }
}
legend + * {
  clear: left;
}
::-webkit-datetime-edit-fields-wrapper {
  padding: 0;
}
::-webkit-datetime-edit-text {
  padding: 0;
}
::-webkit-datetime-edit-minute {
  padding: 0;
}
::-webkit-datetime-edit-hour-field {
  padding: 0;
}
::-webkit-datetime-edit-day-field {
  padding: 0;
}
::-webkit-datetime-edit-month-field {
  padding: 0;
}
::-webkit-datetime-edit-year-field {
  padding: 0;
}
::-webkit-inner-spin-button {
  height: auto;
}
[type="search"] {
  outline-offset: -2px;
  -webkit-appearance: textfield;
}
::-webkit-search-decoration {
  -webkit-appearance: none;
}
::-webkit-color-swatch-wrapper {
  padding: 0;
}
::file-selector-button {
  font: inherit;
}
::-webkit-file-upload-button {
  font: inherit;
  -webkit-appearance: button;
}
output {
  display: inline-block;
}
iframe {
  border: 0;
}
summary {
  cursor: pointer;
  display: list-item;
}
[hidden] {
  display: none !important;
}
.list-unstyled {
  padding-left: 0;
  list-style: none;
}
.figure {
  display: inline-block;
}
/* Compatibility grid: symmetric gutters; row negative margins pair with
   container padding. Breakpoints preserve existing HTML column classes. */
.container, .container-fluid {
  width: 100%;
  padding-right: var(--bs-gutter-x, .75rem);
  padding-left: var(--bs-gutter-x, .75rem);
  margin-left: auto;
  margin-right: auto;
}
@media (min-width: 576px) {
  .container {
    max-width: 540px;
  }
}
@media (min-width: 768px) {
  .container {
    max-width: 720px;
  }
}
@media (min-width: 992px) {
  .container {
    max-width: 960px;
  }
}
@media (min-width: 1200px) {
  .container {
    max-width: 1140px;
  }
}
@media (min-width: 1400px) {
  .container {
    max-width: 1320px;
  }
}
.row {
  --bs-gutter-x: 1.5rem;
  --bs-gutter-y: 0;
  margin-top: calc(var(--bs-gutter-y) * -1);
  margin-right: calc(var(--bs-gutter-x) / -2);
  margin-left: calc(var(--bs-gutter-x) / -2);
  flex-wrap: wrap;
  display: flex;
}
.row > * {
  width: 100%;
  max-width: 100%;
  padding-right: calc(var(--bs-gutter-x) / 2);
  padding-left: calc(var(--bs-gutter-x) / 2);
  margin-top: var(--bs-gutter-y);
  flex-shrink: 0;
}
.col-12 {
  flex: none;
  width: 100%;
  border-top: 1px solid #e1e6ec;
}
@media (min-width: 576px) {
  .col-sm-6 {
    flex: none;
    width: 50%;
  }
  .col-sm-7 {
    flex: none;
    width: 58.3333%;
  }
  .col-sm-8 {
    flex: none;
    width: 66.6667%;
  }
  .col-sm-9 {
    flex: none;
    width: 75%;
  }
  .col-sm-10 {
    flex: none;
    width: 83.3333%;
  }
  .col-sm-12 {
    flex: none;
    width: 100%;
  }
}
@media (min-width: 768px) {
  .col-md-6 {
    flex: none;
    width: 50%;
  }
  .col-md-8 {
    flex: none;
    width: 66.6667%;
  }
  .col-md-10 {
    flex: none;
    width: 83.3333%;
  }
  .col-md-12 {
    flex: none;
    width: 100%;
  }
}
@media (min-width: 992px) {
  .col-lg-1 {
    flex: none;
    width: 8.33333%;
  }
  .col-lg-4 {
    flex: none;
    width: 33.3333%;
  }
  .col-lg-5 {
    flex: none;
    width: 41.6667%;
  }
  .col-lg-6 {
    flex: none;
    width: 50%;
  }
  .col-lg-7 {
    flex: none;
    width: 58.3333%;
  }
  .col-lg-8 {
    flex: none;
    width: 66.6667%;
  }
  .col-lg-10 {
    flex: none;
    width: 83.3333%;
  }
  .offset-lg-1 {
    margin-left: 8.33333%;
  }
}
@media (min-width: 1200px) {
  .col-xl-2 {
    flex: none;
    width: 16.6667%;
  }
  .col-xl-4 {
    flex: none;
    width: 33.3333%;
  }
  .col-xl-5 {
    flex: none;
    width: 41.6667%;
  }
  .col-xl-6 {
    flex: none;
    width: 50%;
  }
  .col-xl-8 {
    flex: none;
    width: 66.6667%;
  }
  .col-xl-11 {
    flex: none;
    width: 91.6667%;
  }
  .offset-xl-1 {
    margin-left: 8.33333%;
  }
  .offset-xl-2 {
    margin-left: 16.6667%;
  }
}
@media (min-width: 1400px) {
  .col-xxl-5 {
    flex: none;
    width: 41.6667%;
  }
  .col-xxl-7 {
    flex: none;
    width: 58.3333%;
  }
  .offset-xxl-2 {
    margin-left: 16.6667%;
  }
}
/* Legacy data-table skin. Wide tables need a scrollable HTML wrapper;
   do not turn table elements into block boxes and lose table semantics. */
.table {
  --bs-table-bg: transparent;
  --bs-table-striped-color: #212529;
  --bs-table-striped-bg: #0000000d;
  --bs-table-active-color: #212529;
  --bs-table-active-bg: #0000001a;
  --bs-table-hover-color: #212529;
  --bs-table-hover-bg: #00000013;
  color: #212529;
  vertical-align: top;
  border-color: #dee2e6;
  width: 100%;
  margin-bottom: 1rem;
}
.table > :not(caption) > * > * {
  background-color: var(--bs-table-bg);
  background-image: linear-gradient(var(--bs-table-accent-bg), var(--bs-table-accent-bg));
  border-bottom-width: 1px;
  padding: .5rem;
}
.table > :not(:last-child) > :last-child > * {
  border-bottom-color: currentColor;
}
/* Button foundation; theme presentation follows later, with accessible
   sizing and focus states finalized in Part 4. */
.btn {
  color: #212529;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  background-color: #0000;
  border: 1px solid #0000;
  border-radius: .25rem;
  padding: .375rem .75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  text-decoration: none;
  transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
  display: inline-block;
}
@media (prefers-reduced-motion: reduce) {
  .btn {
    transition: none;
  }
}
.btn:focus {
  outline: 0;
  box-shadow: 0 0 0 .25rem #1787fc40;
}
.btn:disabled {
  pointer-events: none;
  opacity: .65;
}
.collapsing {
  height: 0;
  transition: height .35s;
  overflow: hidden;
}
@media (prefers-reduced-motion: reduce) {
  .collapsing {
    transition: none;
  }
}
.dropdown {
  position: relative;
}
/* Framework navigation and card/list shells used by older pages. */
.nav {
  flex-wrap: wrap;
  margin-bottom: 0;
  padding-left: 0;
  list-style: none;
  display: flex;
}
.navbar {
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  padding-top: .5rem;
  padding-bottom: .5rem;
  display: flex;
  position: relative;
}
.navbar > .container, .navbar > .container-fluid {
  flex-wrap: inherit;
  justify-content: space-between;
  align-items: center;
  display: flex;
}
.card {
  word-wrap: break-word;
  background-color: #fff;
  background-clip: border-box;
  border: 1px solid #00000020;
  border-radius: .25rem;
  flex-direction: column;
  min-width: 0;
  display: flex;
  position: relative;
}
.card > .list-group {
  border-top: inherit;
  border-bottom: inherit;
}
.card > .list-group:first-child {
  border-top-width: 0;
  border-top-left-radius: calc(.25rem - 1px);
  border-top-right-radius: calc(.25rem - 1px);
}
.card > .list-group:last-child {
  border-bottom-width: 0;
  border-bottom-right-radius: calc(.25rem - 1px);
  border-bottom-left-radius: calc(.25rem - 1px);
}
.list-group {
  border-radius: .25rem;
  flex-direction: column;
  margin-bottom: 0;
  padding-left: 0;
  display: flex;
}
.list-group-item {
  background-color: #fff;
  border: 1px solid #00000020;
  padding: .5rem 1rem;
  text-decoration: none;
  display: block;
  position: relative;
}
.list-group-item:first-child {
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
}
.list-group-item:last-child {
  border-bottom-right-radius: inherit;
  border-bottom-left-radius: inherit;
}
.list-group-item:disabled {
  color: #6c757d;
  pointer-events: none;
  background-color: #fff;
}
.list-group-item.active {
  z-index: 2;
  color: #fff;
  background-color: #1787fc;
  border-color: #1787fc;
}
.list-group-item + .list-group-item {
  border-top-width: 0;
}
.list-group-item + .list-group-item.active {
  border-top-width: 1px;
  margin-top: -1px;
}
.list-group-flush {
  border-radius: 0;
}
.list-group-flush > .list-group-item {
  border-width: 0 0 1px;
}
.list-group-flush > .list-group-item:last-child {
  border-bottom-width: 0;
}
.carousel {
  position: relative;
}
/* Screen-reader-only content stays in the accessibility tree. */
.visually-hidden {
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  position: absolute !important;
  overflow: hidden !important;
}
/* Layout utilities intentionally use !important to match existing markup. */
.overflow-hidden {
  overflow: hidden !important;
}
.d-inline-block {
  display: inline-block !important;
}
.d-flex {
  display: flex !important;
}
.d-none {
  display: none !important;
}
.position-relative {
  position: relative !important;
}
.border-bottom {
  border-bottom: 1px solid #dee2e6 !important;
}
.w-100 {
  width: 100% !important;
}
.h-100 {
  height: 100% !important;
}
.flex-column {
  flex-direction: column !important;
}
.justify-content-center {
  justify-content: center !important;
}
.justify-content-between {
  justify-content: space-between !important;
}
.align-items-center {
  align-items: center !important;
}
.order-0 {
  order: 0 !important;
}
.order-1 {
  order: 1 !important;
}
.ms-auto {
  margin-left: auto !important;
}
.p-0 {
  padding: 0 !important;
}
.fw-bolder {
  font-weight: bolder !important;
}
.text-center {
  text-align: center !important;
}
@media (min-width: 576px) {
  .d-sm-block {
    display: block !important;
  }
  .d-sm-flex {
    display: flex !important;
  }
}
@media (min-width: 992px) {
  .justify-content-lg-between {
    justify-content: space-between !important;
  }
  .order-lg-1 {
    order: 1 !important;
  }
  .text-lg-start {
    text-align: left !important;
  }
}
/* Legacy guide components. Final editorial rules and Part 3 refine these. */
:where(.page-docs) .bestpractice {
  scroll-behavior: smooth;
  grid-template-rows: auto auto 1fr;
  scroll-padding: 5em 0 0;
  display: grid;
}
:where(.page-docs) .bestpractice :is(h2:not(:where([class*="was-h"])), :where(.was-h2)) {
  order: 2;
  padding-block-start: .5rem;
  font-weight: bold;
}
:where(.page-docs) .fw-bolder {
  order: 1;
  padding-block-start: 1rem;
}
:where(.page-docs) .fw-bolder a {
  color: tomato;
}
:where(.page-docs) .fw-bolder a:hover {
  color: red;
}
:where(.page-docs) :is(h3:not(:where([class*="was-h"])), :where(.was-h3)) .fw-bolder {
  padding-block-start: 1rem;
  font-size: 3rem;
}
:where(.page-docs) .mytabs {
  flex-wrap: wrap;
  order: 3;
  gap: .3rem;
  margin: 2rem auto;
  display: flex;
}
:where(.page-docs) .mytabs input[type="radio"] {
  display: block; /* Visually clipped below, but still keyboard-focusable. */
}
:where(.page-docs) .mytabs label {
  color: #fff;
  cursor: pointer;
  background: #000;
  border-block-end: 5px solid #ffc41f;
  border-radius: 8px;
  padding: 15px;
  font-weight: bold;
}
:where(.page-docs) .mytabs .tab {
  width: 100%;
  background: #fff;
  order: 1;
  min-block-size: 75vh;
  padding: 2rem .2rem;
  display: none;
}
:where(.page-docs) .mytabs .tab :is(h3:not(:where([class*="was-h"])), :where(.was-h3)) {
  padding-block-end: 1rem;
  font-size: 2rem;
}
:where(.page-docs) .mytabs input[type="radio"]:checked + label + .tab {
  display: block;
}
:where(.page-docs) .mytabs input[type="radio"]:checked + label {
  color: #000;
  background: #ffc41f;
  border-block-end: 5px solid #000;
}
:where(.page-docs) .tab ol li {
  direction: rtl;
  padding-block-end: 1rem;
  list-style-type: persian;
}
:where(.page-docs) .tab ul li {
  list-style: inside;
}
:where(.page-docs) .bestlist li {
  font-size: 1.3rem;
}
:where(.page-docs) a {
  color: #1f1f1f;
}
:where(.page-docs) iframe {
  aspect-ratio: 200 / 113;
  width: 100%;
  max-width: 100%;
  height: auto;
}
:where(.page-docs) a:hover {
  color: #1f1f1f;
}
:where(.page-docs) .page-content {
  min-height: 100vh;
}
:where(.page-docs) .content-container {
  flex: 1 0 auto;
  margin-top: 6.25rem;
}
/* Theme palette and logo variants. Color choices in charts remain intact. */
body[data-theme="light"], body {
  --bg: #fff;
  --bg-2: #f8f9fc;
  --color-headings: #25373f;
  --color-texts: #25373fb3;
  --color-texts-2: #3b4656;
  --color-texts-3: #262729b3;
  --border-color: #808a8e33;
  --border-color-2: #25373f1a;
}
p {
  color: var(--color-texts);
}
.light-version-logo {
  width: 75px;
  display: none;
}
.direction-right {
  direction: rtl;
}
.direction-left {
  direction: ltr;
}
.hero-area-l-16 {
  background-color: #fece40 !important;
}
.faq-icon {
  float: left;
  width: 30px;
  margin-top: -25px;
}
body[data-theme="dark"] .dark-version-logo, body[data-theme="dark"] .dark-shape {
  display: block;
}
body[data-theme="dark"] .light-version-logo, body[data-theme="dark"] .light-version-logo.default-logo, body[data-theme="dark"] .light-shape, body[data-theme="dark"] .light-shape.default-shape {
  display: none;
}
body[data-theme="dark"] .light-mode-texts .light-version-logo, body[data-theme="dark"] .light-mode-texts .light-shape {
  display: block;
}
body[data-theme="dark"] .light-mode-texts .dark-version-logo, body[data-theme="dark"] .light-mode-texts .dark-version-logo.default-logo, body[data-theme="dark"] .light-mode-texts .dark-shape, body[data-theme="dark"] .light-mode-texts .dark-shape.default-shape {
  display: none;
}
body[data-theme="light"] .light-version-logo, body[data-theme="light"] .light-shape {
  display: block;
}
body[data-theme="light"] .dark-version-logo, body[data-theme="light"] .dark-version-logo.default-logo, body[data-theme="light"] .dark-shape, body[data-theme="light"] .dark-shape.default-shape {
  display: none;
}
body[data-theme="light"] .dark-mode-texts .dark-version-logo, body[data-theme="light"] .dark-mode-texts .dark-shape {
  display: block;
}
body[data-theme="light"] .dark-mode-texts .light-version-logo, body[data-theme="light"] .dark-mode-texts .light-version-logo.default-logo, body[data-theme="light"] .dark-mode-texts .light-shape, body[data-theme="light"] .dark-mode-texts .light-shape.default-shape {
  display: none;
}
.border-default-color-2 {
  border-color: var(--border-color-2) !important;
}
div#loading {
  z-index: 9999999;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  display: flex;
  position: fixed;
}
div#loading img {
  z-index: 9999;
}
/* Shared header and responsive navigation. */
.site-navbar {
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  padding-top: 0;
  display: flex;
  position: relative;
}
@media (min-width: 576px) {
  .site-navbar {
    padding-top: 0;
  }
}
@media (min-width: 992px) {
  .site-navbar {
    flex-flow: row;
    justify-content: flex-start;
  }
}
.site-navbar .menu-block-wrapper {
  flex-grow: 1;
  align-items: center;
}
@media (min-width: 992px) {
  .site-navbar .menu-block-wrapper {
    flex-basis: auto;
    display: flex !important;
  }
}
.site-header--absolute {
  z-index: 999;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.site-header--sticky:not(.mobile-sticky-enable) {
  z-index: 999;
  width: 100%;
  top: 0;
  right: 0;
  position: absolute !important;
}
@media (min-width: 992px) {
  .site-header--sticky:not(.mobile-sticky-enable) {
    transition: all .4s;
    position: fixed !important;
  }
  .site-header--sticky:not(.mobile-sticky-enable).scrolling {
    transition: all .4s;
    transform: translateY(-100%);
  }
  .site-header--sticky:not(.mobile-sticky-enable).reveal-header {
    z-index: 1000;
    transform: translateY(0%);
    box-shadow: 0 12px 34px -11px #413e651a;
  }
}
.site-header--menu-right .menu-block-wrapper {
  position: static;
}
.site-header--menu-right .menu-block {
  margin-left: auto;
}
@media (min-width: 768px) {
  .container-fluid .site-navbar {
    padding-left: 10px;
    padding-right: 10px;
  }
}
@media (min-width: 992px) {
  .container-fluid .site-navbar {
    padding-left: 20px;
    padding-right: 20px;
  }
}
@media (min-width: 1156px) and (max-width: 1276px) {
  .landing-16-menu .site-menu-main .nav-link-item {
    padding: .5rem !important;
  }
}
@media (min-width: 992px) and (max-width: 1156px) {
  .landing-16-menu .site-menu-main .nav-link-item {
    padding: .5rem !important;
    font-size: 13px !important;
  }
}
.site-menu-main {
  margin-bottom: 0;
  padding-left: 0;
}
@media (min-width: 992px) {
  .site-menu-main {
    margin-bottom: 0;
    padding-left: 0;
    display: flex;
  }
}
.site-menu-main li {
  list-style: none;
}
.site-menu-main ul {
  margin-left: 0;
  list-style: none;
}
.site-menu-main a {
  text-decoration: none;
}
.navbar {
  padding-top: 20px;
  padding-bottom: 20px;
}
@media (min-width: 992px) {
  .navbar {
    padding-top: 0;
    padding-bottom: 0;
  }
}
.site-menu-main .nav-item {
  display: inherit;
}
.site-menu-main .nav-link-item {
  color: #213053;
  letter-spacing: normal;
  font-size: 15px;
  font-style: normal;
  font-weight: 600;
  position: relative;
}
@media (min-width: 992px) {
  .site-menu-main .nav-link-item {
    padding: 35px 20px 33px !important;
  }
}
.mobile-menu-head, .mobile-menu-trigger {
  display: none;
}
@media (max-width: 991.98px) {
  .site-header .mobile-menu-trigger {
    cursor: pointer;
    justify-content: center;
    align-items: center;
    width: 30px;
    height: 30px;
    margin-left: 15px;
    display: flex;
  }
  .site-header .mobile-menu-trigger span {
    background-color: #000;
    width: 24px;
    height: 2px;
    display: block;
    position: relative;
  }
  .reveal-header .mobile-menu-trigger span {
    background-color: #fff !important;
  }
  .site-header .mobile-menu-trigger span:before, .site-header .mobile-menu-trigger span:after {
    content: "";
    background-color: #000;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
  }
  .reveal-header .mobile-menu-trigger span:before, .reveal-header .mobile-menu-trigger span:after {
    background-color: #fff !important;
  }
  .site-header .mobile-menu-trigger span:before {
    top: -6px;
  }
  .site-header .mobile-menu-trigger span:after {
    top: 6px;
  }
  .site-header .menu-block {
    z-index: 1099;
    background-color: #fff;
    width: 320px;
    height: 100%;
    transition: all .5s;
    position: fixed;
    top: 0;
    left: 0;
    overflow: hidden;
    transform: translate(-100%);
  }
  .site-header .menu-block.active {
    transform: translate(0%);
  }
  .site-menu-main > li {
    margin: 0;
    line-height: 1;
    display: block;
  }
  .site-menu-main > li > a {
    border-bottom: 1px solid #0000001a;
    height: 50px;
    padding: 0 50px 0 15px;
    line-height: 50px;
    display: block;
  }
  .site-menu-main > li > a i {
    text-align: center;
    width: 50px;
    height: 50px;
    line-height: 50px;
    position: absolute;
    top: 0;
    right: 0;
    transform: rotate(-90deg);
  }
  .site-header .menu-block .mobile-menu-head {
    z-index: 501;
    background-color: #fff;
    border-bottom: 1px solid #0000001a;
    justify-content: space-between;
    align-items: center;
    height: 50px;
    display: flex;
    position: sticky;
    top: 0;
  }
  .site-header .menu-block .mobile-menu-head .go-back {
    cursor: pointer;
    text-align: center;
    color: #000;
    border-right: 1px solid #0000001a;
    width: 50px;
    height: 50px;
    font-size: 16px;
    line-height: 50px;
    display: none;
  }
  .site-header .menu-block .mobile-menu-head.active .go-back {
    display: block;
  }
  .site-header .menu-block .mobile-menu-head .current-menu-title {
    color: #000;
    visibility: hidden;
    font-size: 15px;
    font-weight: 500;
  }
  .site-header .menu-block .mobile-menu-head.active .current-menu-title {
    visibility: visible;
  }
  .site-header .menu-block .mobile-menu-head .mobile-menu-close {
    cursor: pointer;
    text-align: center;
    color: #000;
    border-left: 1px solid #0000001a;
    width: 50px;
    height: 50px;
    font-size: 25px;
    line-height: 50px;
  }
  .site-header .menu-block .site-menu-main {
    height: 100%;
    overflow: hidden auto;
  }
  .menu-overlay {
    z-index: 1098;
    visibility: hidden;
    opacity: 0;
    background-color: #00000080;
    width: 100%;
    height: 100%;
    transition: all .5s;
    position: fixed;
    top: 0;
    left: 0;
  }
  .menu-overlay.active {
    visibility: visible;
    opacity: 1;
  }
}
@media (min-width: 992px) {
  .site-menu-main a {
    align-items: center;
    display: flex;
  }
  .site-menu-main i {
    margin-left: 15px;
    font-size: 15px;
  }
}
.menu-block.active .nav-link-item {
  color: #000 !important;
}
@media (min-width: 480px) {
  .d-xs-inline-flex {
    display: inline-flex !important;
  }
}
ul.site-menu-main .nav-item i {
  transition: all .4s ease-in-out;
}
ul.site-menu-main .nav-item:hover i {
  transform: rotate(-180deg);
}
.reveal-header {
  background: #fff !important;
}
.reveal-header .nav-link-item {
  color: #1d263a !important;
}
.reveal-header .btn, .reveal-header .btn:hover {
  color: #fff !important;
}
.btn {
  z-index: 5;
  letter-spacing: -.53px;
  border: 0;
  border-radius: 6px;
  justify-content: center;
  align-items: center;
  min-width: 130px;
  height: 40px;
  padding: 15px;
  font-size: 16px;
  font-weight: 700;
  line-height: 28px;
  transition: all .4s ease-in-out;
  display: inline-flex;
  position: relative;
}
.btn:hover {
  color: #fff !important;
}
/* Homepage section typography, distinct from long-form editorial headings. */
.section__heading :is(h2:not(:where([class*="was-h"])), :where(.was-h2)) {
  color: #213053;
  letter-spacing: -1px;
  margin-bottom: 25px;
  font-size: 34px;
  font-style: normal;
  font-weight: 600;
  line-height: 44px;
}
@media (min-width: 480px) {
  .section__heading :is(h2:not(:where([class*="was-h"])), :where(.was-h2)) {
    font-size: 38px;
    line-height: 48px;
  }
}
@media (min-width: 768px) {
  .section__heading :is(h2:not(:where([class*="was-h"])), :where(.was-h2)) {
    font-size: 48px;
    line-height: 58px;
  }
}
.section__heading p {
  opacity: .7;
  color: #213053;
  letter-spacing: normal;
  margin-bottom: 0;
  font-size: 17px;
  font-style: normal;
  font-weight: 400;
  line-height: 30px;
}
.section-heading-10 :is(h2:not(:where([class*="was-h"])), :where(.was-h2)) {
  color: #000;
  letter-spacing: -.345px;
  margin-bottom: 25px;
  font-family: var(--font-main, "Vazirmatn", Tahoma, Arial, sans-serif);
  font-size: 28px;
  font-style: normal;
  font-weight: 700;
  line-height: 44px;
}
@media (min-width: 480px) {
  .section-heading-10 :is(h2:not(:where([class*="was-h"])), :where(.was-h2)) {
    font-size: 38px;
    line-height: 48px;
  }
}
@media (min-width: 768px) {
  .section-heading-10 :is(h2:not(:where([class*="was-h"])), :where(.was-h2)) {
    font-size: 46px;
    line-height: 56px;
  }
}
.section-heading-10 p {
  color: #323232;
  margin-bottom: 0;
  font-family: var(--font-main, "Vazirmatn", Tahoma, Arial, sans-serif);
  font-size: 18px;
  font-style: normal;
  font-weight: normal;
  line-height: 32px;
}
/* Media cards: stacked on phones; the existing grid supplies columns. */
.feature-area-l2 {
  padding-top: 50px;
  padding-bottom: 60px;
}
@media (min-width: 768px) {
  .feature-area-l2 {
    padding-top: 70px;
    padding-bottom: 80px;
  }
}
@media (min-width: 992px) {
  .feature-area-l2 {
    padding-top: 125px;
    padding-bottom: 130px;
  }
}
.feature-l2-items {
  margin-bottom: -25px;
  padding-top: 25px;
}
@media (min-width: 768px) {
  .feature-l2-items {
    padding-top: 35px;
  }
}
@media (min-width: 992px) {
  .feature-l2-items {
    padding-top: 45px;
  }
}
.feature-box-l2 {
  border: 1px solid #dfdfdf;
  border-radius: 10px;
  padding: 30px 15px 7px 25px;
  transition: all .4s ease-in-out;
}
.feature-box-l2:hover {
  box-shadow: 0 54px 100px #0a043c1a;
}
.feature-box-l2 .content-box {
  margin-left: 25px;
}
.feature-box-l2 .content-box :is(h4:not(:where([class*="was-h"])), :where(.was-h4)) {
  color: #213053;
  margin-top: -6px;
  font-size: 21px;
  font-weight: 600;
  line-height: 30px;
}
.feature-box-l2 .content-box p {
  color: #1d263a;
  opacity: .7;
  font-size: 17px;
  line-height: 30px;
}
.testimonial-slider-l2-1 .slick-list {
  display: grid;
}
.l2-slider-arrow-1 .slick-active {
  color: #fff;
  background: #ff7139;
  border: none;
}
.l5-product-slider .slick-active {
  color: #1d263a;
}
.hero-l7-slider .slick-dots {
  justify-content: left;
  margin-top: 60px;
}
.hero-l7-slider .slick-dots li {
  cursor: pointer;
  background-color: #fff;
  border-radius: 50%;
  width: 10px;
  height: 10px;
  margin: 5px;
  transition: all .4s;
}
.hero-l7-slider .slick-dots li button {
  color: #0000;
  background-color: #0000;
  border: none;
}
.hero-l7-slider .slick-dots {
  border-radius: 4px;
  justify-content: center;
  margin: 25px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
}
.hero-l7-slider .slick-dots li.slick-active {
  background-color: #20bfa9;
}
.hero-l7-slider .slick-dots li button:focus {
  box-shadow: none;
  outline: none;
}
.testimonial-slider-l-11 .l-11-slide-btn.slick-prev {
  position: absolute;
  top: 50%;
  left: 0%;
}
.testimonial-slider-l-11 .l-11-slide-btn.slick-next {
  position: absolute;
  top: 50%;
  right: 0;
}
.l-12-slider-arrow-1 .slick-active {
  color: #fff;
  background: #4ebe86;
}
.landing-16-menu .site-menu-main .nav-link-item {
  color: #1f1f1f;
  letter-spacing: -.4px;
  font-family: var(--font-main, "Vazirmatn", Tahoma, Arial, sans-serif);
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
}
.landing-16-menu .site-menu-main .nav-link-item i {
  color: #1f1f1f;
}
/* Home hero. */
.hero-area-l-16 {
  background: #e3eef8;
  padding-top: 45px;
  padding-bottom: 0;
}
@media (min-width: 480px) {
  .hero-area-l-16 {
    padding-top: 60px;
  }
}
@media (min-width: 768px) {
  .hero-area-l-16 {
    padding-top: 78px;
    padding-bottom: 0;
  }
}
@media (min-width: 992px) {
  .hero-area-l-16 {
    padding-top: 160px;
    padding-bottom: 110px;
  }
}
@media (min-width: 1200px) {
  .hero-area-l-16 {
    padding-top: 160px;
    padding-bottom: 0;
  }
}
.hero-area-l-16 .content {
  z-index: 5;
  padding-top: 25px;
  position: relative;
}
@media (min-width: 992px) {
  .hero-area-l-16 .content {
    padding-top: 0;
    padding-right: 5px;
  }
}
@media (min-width: 1200px) {
  .hero-area-l-16 .content {
    padding-right: 0;
  }
}
@media (min-width: 1600px) {
  .hero-area-l-16 .content {
    padding-right: 82px;
  }
}
.hero-area-l-16 .content :is(h6:not(:where([class*="was-h"])), :where(.was-h6)) {
  text-align: center;
  letter-spacing: 2.8125px;
  text-transform: uppercase;
  color: #666;
  font-family: var(--font-main, "Vazirmatn", Tahoma, Arial, sans-serif);
  font-size: 15px;
  font-style: normal;
  font-weight: bold;
  line-height: 18px;
}
.hero-area-l-16 .content h1 {
  letter-spacing: -.3px;
  color: #000;
  margin: 27px 0 20px;
  font-family: var(--font-main, "Vazirmatn", Tahoma, Arial, sans-serif);
  font-size: 34px;
  font-style: normal;
  font-weight: 700;
  line-height: 46px;
}
@media (min-width: 576px) {
  .hero-area-l-16 .content h1 {
    font-size: 40px;
    line-height: 52px;
  }
}
@media (min-width: 768px) {
  .hero-area-l-16 .content h1 {
    font-size: 48px;
    line-height: 60px;
  }
}
@media (min-width: 1200px) {
  .hero-area-l-16 .content h1 {
    font-size: 56px;
    line-height: 68px;
  }
}
.hero-area-l-16 .content p {
  color: #000;
  margin: 30px 0 38px;
  font-family: var(--font-main, "Vazirmatn", Tahoma, Arial, sans-serif);
  font-size: 20px;
  font-style: normal;
  font-weight: normal;
  line-height: 34px;
}
.hero-area-l-16 .content .hero-btns {
  text-align: center;
  margin: 0 -7px -15px;
}
@media (min-width: 480px) {
  .hero-area-l-16 .content .hero-btns {
    text-align: left;
  }
}
.hero-area-l-16 .content .hero-btns a {
  margin: 0 7px 15px;
}
.hero-area-l-16 .content .hero-btns i {
  margin-right: 15px;
  font-size: x-large;
}
.hero-area-l-16 .content .hero-btns .btn {
  text-align: center;
  color: #fff;
  background: #2780ff;
  border-radius: 5px;
  min-width: 238px;
  height: 60px;
  font-family: var(--font-main, "Vazirmatn", Tahoma, Arial, sans-serif);
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 19px;
}
.hero-area-l-16 .star-ratings {
  margin-top: 20px;
}
.hero-area-l-16 .star-ratings i {
  color: #fa8231;
}
.hero-area-l-16 .star-ratings .rating-text {
  letter-spacing: -.32381px;
  color: #535659;
  margin-left: 15px;
  font-family: var(--font-main, "Vazirmatn", Tahoma, Arial, sans-serif);
  font-size: 14px;
  font-style: normal;
  font-weight: normal;
  line-height: 21px;
  display: inline-block;
}
@media (min-width: 480px) {
  .hero-area-l-16 .star-ratings .rating-text {
    font-size: 17px;
  }
}
.hero-area-l-16 .hero-shape-1 {
  position: absolute;
  bottom: 0;
  left: 7%;
}
.hero-area-l-16 .hero-img {
  margin-top: 45px;
}
@media (min-width: 992px) {
  .hero-area-l-16 .hero-img {
    margin-top: 0;
  }
}
.hero-area-l-16 .hero-img .hero-shape-2 {
  z-index: -1;
  width: 87%;
  position: absolute;
  top: 0;
  left: -45px;
}
@media (min-width: 1200px) {
  .hero-area-l-16 .hero-img .hero-shape-2 {
    width: initial;
  }
}
.header-btn-l-16 .download-btn {
  text-align: center;
  letter-spacing: -1px;
  color: #fff;
  box-sizing: border-box;
  background: #258aff;
  border-radius: 3px;
  min-width: 152px;
  height: 40px;
  margin-left: 15px;
  font-family: var(--font-main, "Vazirmatn", Tahoma, Arial, sans-serif);
  font-size: 16px;
  font-style: normal;
  font-weight: bold;
  line-height: 19px;
}
/* Three-step introduction and alternating image/text sections. */
.feature-area-l6 {
  padding-top: 60px;
  padding-bottom: 60px;
}
@media (min-width: 768px) {
  .feature-area-l6 {
    padding-top: 80px;
    padding-bottom: 80px;
  }
}
@media (min-width: 992px) {
  .feature-area-l6 {
    padding-top: 120px;
    padding-bottom: 120px;
  }
}
.feature-area-l6 .feature-area-l6-items {
  margin-bottom: -30px;
}
.feature-area-l6 .feature-area-l6-items .col-lg-4 {
  margin-bottom: 30px;
}
@media (min-width: 992px) {
  .feature-area-l6 .content-area {
    padding-right: 10px;
  }
}
@media (min-width: 1200px) {
  .feature-area-l6 .content-area {
    padding-right: 96px;
  }
}
.feature-area-l6 .content-area h1 {
  color: #000;
  mix-blend-mode: normal;
  opacity: .15;
  margin-bottom: 60px;
  font-family: var(--font-main, "Vazirmatn", Tahoma, Arial, sans-serif);
  font-size: 56px;
  font-style: normal;
  font-weight: 800;
  line-height: 64px;
}
.feature-area-l6 .content-area :is(h6:not(:where([class*="was-h"])), :where(.was-h6)) {
  color: #000;
  margin-bottom: 25px;
  font-family: var(--font-main, "Vazirmatn", Tahoma, Arial, sans-serif);
  font-size: 22px;
  font-style: normal;
  font-weight: bold;
  line-height: 34px;
}
.feature-area-l6 .content-area p {
  color: #323232;
  margin-bottom: 0;
  font-family: var(--font-main, "Vazirmatn", Tahoma, Arial, sans-serif);
  font-size: 18px;
  font-style: normal;
  font-weight: normal;
  line-height: 34px;
}
.content-area-1-l-16 .content {
  padding-top: 45px;
}
@media (min-width: 992px) {
  .content-area-1-l-16 .content {
    padding-top: 0;
  }
}
.content-area-1-l-16 .content span {
  text-transform: uppercase;
  color: #fff;
  background: #fa8231;
  border-radius: 15px;
  align-items: center;
  margin-bottom: 30px;
  padding: 8px 20px;
  font-family: var(--font-main, "Vazirmatn", Tahoma, Arial, sans-serif);
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
  line-height: 15px;
  display: inline-flex;
}
.content-area-1-l-16 .content span i {
  margin-right: 10px;
}
@media (min-width: 992px) {
  .content-area-1-l-16 .image-area {
    margin-bottom: -155px;
  }
}
.content-area-1-l-16 .image-area img {
  border-radius: 55px;
}
.content-area-2-l-16 {
  padding-top: 60px;
}
@media (min-width: 768px) {
  .content-area-2-l-16 {
    padding-top: 80px;
  }
}
@media (min-width: 992px) {
  .content-area-2-l-16 {
    padding-top: 130px;
  }
}
.content-area-2-l-16 .content {
  padding-top: 45px;
}
@media (min-width: 992px) {
  .content-area-2-l-16 .content {
    padding-top: 0;
  }
}
.content-area-2-l-16 .content :is(h2:not(:where([class*="was-h"])), :where(.was-h2)) {
  margin-bottom: 40px;
}
@media (min-width: 768px) {
  .content-area-2-l-16 .content :is(h2:not(:where([class*="was-h"])), :where(.was-h2)) {
    margin-bottom: 50px;
  }
}
@media (min-width: 992px) {
  .content-area-2-l-16 .content :is(h2:not(:where([class*="was-h"])), :where(.was-h2)) {
    margin-bottom: 70px;
  }
}
.content-area-2-l-16 .content .content-body {
  margin-top: -8px;
}
.content-area-2-l-16 .content .content-body :is(h4:not(:where([class*="was-h"])), :where(.was-h4)) {
  color: #000;
  font-family: var(--font-main, "Vazirmatn", Tahoma, Arial, sans-serif);
  font-size: 22px;
  font-style: normal;
  font-weight: bold;
  line-height: 34px;
}
.content-area-2-l-16 .content .content-body p {
  color: #323232;
  font-family: var(--font-main, "Vazirmatn", Tahoma, Arial, sans-serif);
  font-size: 18px;
  font-style: normal;
  font-weight: normal;
  line-height: 34px;
}
@media (min-width: 992px) {
  .content-area-2-l-16 .image-area {
    margin-bottom: -155px;
  }
}
.content-area-2-l-16 .image-area img {
  border-radius: 55px;
}
/* Dark screenshot section; image scaling and controls are refined in Part 4. */
.screenshot-area-l-16 {
  background: #222d3d;
  padding-top: 50px;
  padding-bottom: 60px;
}
@media (min-width: 768px) {
  .screenshot-area-l-16 {
    padding-top: 70px;
    padding-bottom: 80px;
  }
}
@media (min-width: 992px) {
  .screenshot-area-l-16 {
    padding-top: 120px;
    padding-bottom: 130px;
  }
}
.screenshot-area-l-16 .section-heading-10 :is(h2:not(:where([class*="was-h"])), :where(.was-h2)) {
  color: #fff;
}
.screenshot-area-l-16 .section-heading-10 p {
  color: #dbe4f1;
}
/* Inherited screenshot carousel, arrows and dots. */
.screenshot-slider-wrapper-l-16 {
  margin-top: 20px;
  position: relative;
}
.screenshot-slider-wrapper-l-16 .screenshot-image {
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  display: flex;
  overflow: hidden;
  min-height: 720px !important;
  max-height: 720px !important;
}
@media (min-width: 690px) {
  .screenshot-slider-wrapper-l-16 .screenshot-image {
    width: 274px;
    margin-bottom: 0;
    min-height: 720px !important;
    max-height: 720px !important;
  }
  .screenshot-slider-wrapper-l-16 .screenshot-image img {
    border-radius: 20px;
    width: 100%;
  }
}
.screenshot-slider-wrapper-l-16 .phone-bg-img {
  z-index: 11;
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
}
@media (min-width: 690px) {
  .screenshot-slider-wrapper-l-16 .phone-bg-img {
    display: block;
    transform: translate(-50%, -50%);
  }
}
.screenshot-slider-wrapper-l-16 .screenshot-slider .slick-list {
  margin: 0 -23.5px;
}
.screenshot-slider-wrapper-l-16 .screenshot-slider .slick-slide {
  opacity: .5;
  transition: all .4s;
}
.screenshot-slider-wrapper-l-16 .screenshot-slider .slick-center {
  opacity: 1;
  border-radius: 40px;
  min-height: 690px;
  transform: scale(1.1);
  max-height: 720px !important;
}
.screenshot-slider-wrapper-l-16 .screenshot-slider .slick-center img {
  border-radius: 40px;
}
.screenshot-slider-wrapper-l-16 .l-16-slide-btn {
  z-index: 1;
  background: #fff;
  border: 1px solid #fff;
  border-radius: 50%;
  width: 56px;
  height: 56px;
  line-height: 56px;
  transition: all .4s;
  position: absolute;
  top: 49%;
  right: 31%;
}
@media (min-width: 576px) {
  .screenshot-slider-wrapper-l-16 .l-16-slide-btn {
    left: 12%;
  }
}
@media (min-width: 768px) {
  .screenshot-slider-wrapper-l-16 .l-16-slide-btn {
    left: 12%;
  }
}
@media (min-width: 992px) {
  .screenshot-slider-wrapper-l-16 .l-16-slide-btn {
    left: 23%;
  }
}
.screenshot-slider-wrapper-l-16 .l-16-slide-btn.active, .screenshot-slider-wrapper-l-16 .l-16-slide-btn:hover {
  background: #2780ff;
  border: 1px solid #2780ff;
  color: #fff !important;
}
.screenshot-slider-wrapper-l-16 .l-16-slide-btn.slick-next {
  left: 31%;
}
@media (min-width: 576px) {
  .screenshot-slider-wrapper-l-16 .l-16-slide-btn.slick-next {
    left: auto;
    right: 12%;
  }
}
@media (min-width: 768px) {
  .screenshot-slider-wrapper-l-16 .l-16-slide-btn.slick-next {
    left: auto;
    right: 12%;
  }
}
@media (min-width: 992px) {
  .screenshot-slider-wrapper-l-16 .l-16-slide-btn.slick-next {
    left: auto;
    right: 23%;
  }
}
.screenshots-dots-l-16 ul.slick-dots {
  margin-top: 25px;
  padding-left: 0;
  list-style: none;
}
.screenshots-dots-l-16 ul.slick-dots li {
  cursor: pointer;
  background: #fff;
  width: 6px;
  height: 6px;
  margin: 0 7px;
  font-size: 0;
  display: inline-block;
}
.screenshots-dots-l-16 ul.slick-dots li button {
  display: none;
}
.screenshots-dots-l-16 .slick-dots {
  justify-content: center;
  align-items: center;
  margin: 0 4.5px;
  padding: 0;
  list-style: none;
  display: flex;
}
.screenshots-dots-l-16 .slick-dots li {
  color: #0000;
  opacity: .3;
  background-color: #fff;
  border: none;
  border-radius: 50%;
  width: 8px;
  height: 8px;
  list-style: none;
}
.screenshots-dots-l-16 .slick-dots li:focus {
  box-shadow: none;
  outline: none;
}
.screenshots-dots-l-16 .slick-dots li.slick-active {
  opacity: 1;
  border-radius: 50%;
  width: 10px;
  height: 10px;
  background-color: #fff !important;
}
.testimonial-slider-l-16 .slick-arrow {
  display: none !important;
}
/* Inherited footer and testimonial controls. */
.footer-area-l-16 {
  padding-top: 55px;
  padding-bottom: 30px;
}
@media (min-width: 768px) {
  .footer-area-l-16 {
    padding-top: 75px;
    padding-bottom: 30px;
  }
}
@media (min-width: 992px) {
  .footer-area-l-16 {
    padding-top: 95px;
    padding-bottom: 30px;
  }
}
.footer-area-l-16 .brand-logo {
  margin-bottom: 30px;
}
@media (min-width: 992px) {
  .footer-area-l-16 .brand-logo {
    margin-bottom: 0;
    margin-right: 35px;
  }
}
@media (min-width: 1600px) {
  .footer-area-l-16 .content-body {
    padding-right: 60px;
  }
}
.footer-area-l-16 .content-body p {
  color: #000;
  font-family: var(--font-main, "Vazirmatn", Tahoma, Arial, sans-serif);
  font-size: 18px;
  font-style: normal;
  font-weight: normal;
  line-height: 32px;
}
.footer-area-l-16 .copyright-area {
  margin-top: 40px;
}
@media (min-width: 768px) {
  .footer-area-l-16 .copyright-area {
    margin-top: 60px;
  }
}
@media (min-width: 992px) {
  .footer-area-l-16 .copyright-area {
    margin-top: 80px;
  }
}
.footer-area-l-16 .copyright-area p {
  color: #000;
  font-family: var(--font-main, "Vazirmatn", Tahoma, Arial, sans-serif);
  font-size: 12px;
  font-style: normal;
  font-weight: normal;
  line-height: 18px;
}
.footer-area-l-16 .copyright-area .social-icons ul {
  margin: 0 -10px;
}
.footer-area-l-16 .copyright-area .social-icons ul li {
  margin: 0 10px;
}
.footer-area-l-16 .copyright-area .social-icons ul li i {
  color: #000;
  font-size: 22px;
}
.testimonial-card-slider-l-18 ul.slick-dots li button {
  display: none;
}
.testimonial-card-slider-l-18 ul.slick-dots {
  text-align: center;
  justify-content: center;
  margin-top: 25px;
  padding-left: 0;
  list-style: none;
  display: flex;
}
.testimonial-card-slider-l-18 ul.slick-dots li {
  opacity: .3;
  cursor: pointer;
  background: #fff;
  border-radius: 50%;
  width: 10px;
  height: 10px;
  margin: 0 4px;
}
.testimonial-card-slider-l-18 ul.slick-dots li.slick-active {
  opacity: 1;
  background: #fff !important;
  width: 10px !important;
  height: 10px !important;
}
/* FAQ and theme resets. */
.faq-main-area {
  padding-bottom: 25px;
}
@media (min-width: 768px) {
  .faq-main-area {
    padding-bottom: 15px;
  }
}
@media (min-width: 992px) {
  .faq-main-area {
    padding-bottom: 45px;
  }
}
.faq-single-all-items {
  margin-bottom: -60px;
  padding-top: 10px;
}
@media (min-width: 768px) {
  .faq-single-all-items {
    padding-top: 20px;
  }
}
@media (min-width: 992px) {
  .faq-single-all-items {
    padding-top: 0;
  }
}
.faq-main-area-single {
  margin-bottom: 30px;
}
@media (min-width: 768px) {
  .faq-main-area-single {
    margin-bottom: 40px;
  }
}
@media (min-width: 992px) {
  .faq-main-area-single {
    margin-bottom: 60px;
  }
}
.faq-main-area-single :is(h2:not(:where([class*="was-h"])), :where(.was-h2)) {
  color: #0d152e;
  letter-spacing: 0;
  margin-bottom: 30px;
  font-size: 24px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}
.faq-main-area-single .accordion li {
  border: 1px solid #eaeced;
  border-radius: 5px;
  margin-bottom: 10px;
  padding: 15px 20px 15px 15px;
  list-style: none;
  position: relative;
}
.faq-main-area-single .accordion li.active {
  background: #f8fafc;
}
.faq-main-area-single .accordion li p {
  color: #687497;
  letter-spacing: -.53px;
  margin-bottom: 0;
  padding: 20px 15px 0 0;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 28px;
  display: none;
}
.faq-main-area-single .accordion a {
  cursor: pointer;
  color: #0d152e;
  letter-spacing: 0;
  width: 100%;
  padding-right: 20px;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  text-decoration: none;
  display: block;
  position: relative;
}
.faq-main-area-single .accordion li .active {
  color: #0d152e !important;
}
.faq-main-area-single .accordion .active:after {
  border-bottom: 2px solid #1787fc !important;
  border-right: 2px solid #1787fc !important;
}
.faq-main-area-single .accordion a:after {
  content: " ";
  border-bottom: 2px solid #1787fc;
  border-right: 2px solid #1787fc;
  width: 8px;
  height: 8px;
  transition: all .2s ease-in-out;
  position: absolute;
  top: 8px;
  right: 0;
  transform: rotate(45deg);
}
.faq-main-area-single .accordion a.active:after {
  transition: all .2s ease-in-out;
  transform: rotate(225deg);
}
ul {
  list-style: none;
}
a {
  text-decoration: none;
}
.focus-reset:focus {
  box-shadow: none;
  outline: none;
}
/* ==========================================================================
   PART 2 — GERSHAD SITE STYLES
   Shared components and editorial layout. Rules retain their original order.
   ========================================================================== */
/* 2.1 FONT AND GLOBAL TYPOGRAPHY
   /css/fonts.css defines --font-main and loads the shared text font. */
:root {
  --brand-yellow: #ffc41f;
  --brand-blue: #145fbd; /* White text contrast: approximately 6.2:1. */
  --text-dark: #1f1f1f;
}
body, h1, h2, h3, h4, h5, h6, p, .nav-link-item {
  font-family: var(--font-main, "Vazirmatn", Tahoma, Arial, sans-serif) !important;
}
:where(.page-report, .page-notebook) * {
  font-family: var(--font-main, "Vazirmatn", Tahoma, Arial, sans-serif) !important;
}
/* 2.2 BASE: IMAGES, ACCESSIBILITY HELPERS, FOCUS */
img {
  height: auto;
}
.visually-hidden,
.mytabs input[type="radio"] {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.skip-link {
  position: absolute;
  inset-inline-start: 1rem;
  top: -100px;
  z-index: 10000;
  padding: 0.75rem 1.25rem;
  background: var(--brand-yellow);
  color: #000;
  font-weight: 700;
  border-radius: 0 0 8px 8px;
}
.skip-link:focus {
  top: 0;
}
:focus-visible {
  outline: 3px solid var(--brand-blue);
  outline-offset: 2px;
}
.icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
  flex-shrink: 0;
}
/* 2.3 HEADER */
.mobile-menu-trigger,
.mobile-menu-close,
.nav-dropdown-toggle {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  color: inherit;
  font: inherit;
  text-align: inherit;
}
.mobile-menu-close {
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
}
/* Review fix: 4.4 gives .mobile-menu-trigger a 44px (--control-size) hit area
   but the close button was never included, so its tap target was only the
   glyph's own box (well under the 24px WCAG 2.5.8 minimum in most type
   scales). Matches the trigger button for a consistent, reachable target. */
.mobile-menu-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--control-size, 2.75rem);
  min-height: var(--control-size, 2.75rem);
}
.brand-logo img {
  width: 75px;
}
.nav-item-dropdown {
  position: relative;
}
.nav-dropdown-toggle {
  cursor: pointer;
  font-family: var(--font-main, "Vazirmatn", Tahoma, Arial, sans-serif) !important;
}
.nav-dropdown {
  position: absolute;
  top: calc(100% - 30px);
  inset-inline-start: 0;
  z-index: 100;
  min-width: max-content;
  margin-top: 20px;
  padding: 10px;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgb(0 0 0 / 0.12);
}
.nav-dropdown[hidden] {
  display: none;
}
.nav-dropdown .list-group {
  padding: 0;
}
.dropdown-nav-link-item {
  display: block;
  color: #213053;
}
.dropdown-nav-link-item:hover {
  color: var(--brand-blue);
}
@media (max-width: 991.98px) {
  .nav-dropdown {
    position: static;
    margin: 0 0 10px;
    box-shadow: none;
  }
  .nav-dropdown-toggle {
    display: block;
    width: 100%;
    line-height: 50px;
  }
}
.go-back .icon {
  width: 12px;
}
/* 2.4 FOOTER */
.site-footer {
  padding: 10px 0;
}
.site-footer .copyright-area {
  margin-top: 15px;
  direction: ltr;
}
.site-footer .social-icons a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* 2.5 HOME PAGE */
.row:has(> .col-md-12 > #map) {
  --bs-gutter-x: 0;
}
#map {
  display: block;
  height: 70vh;
  height: 70dvh; /* Review fix: same mobile-viewport correction as the banner
    image and the mobile menu panel below, so the map doesn't resize/jump
    when the browser chrome shows or hides on scroll. */
  min-height: 450px;
}
.logo-image {
  max-width: 30px;
  max-height: 30px;
}
.padding-10 {
  padding: 10px;
}
.banner {
  width: 100%;
  margin-block: 6rem 0;
}
.banner a {
  display: grid;
  grid-template-areas: "main";
}
.banner a img {
  grid-area: main;
  display: block;
  width: 100%;
  height: 95vh;
  height: 95svh; /* Review fix: mirrors the 65vh/65svh pattern already used at
    the small-screen breakpoint below, so the address-bar-inclusive 100vh bug
    on mobile Safari/Chrome doesn't crop the hero image on load/scroll. */
  object-fit: cover;
  transition: all 0.5s ease;
}
.banner a p {
  grid-area: main;
  justify-self: center;
  align-self: end;
  padding-block-end: 5rem;
  font-size: 3rem;
  color: #fff;
  text-align: center;
  text-shadow: 3px 3px 5px #000;
  transition: all 0.5s ease;
}
.banner:has(:hover) p {
  transform: scale(1.1);
  text-shadow: 4px 4px 7px #000;
}
.banner:has(:hover) img {
  opacity: 0.9;
  filter: saturate(200%);
}
.hero-btns .btn .icon {
  margin-inline-end: 0.5em;
}
.feature-area-l6 .content-body .feature-num {
  font-size: 56px;
  font-weight: 800;
  line-height: 64px;
  margin: 0 0 60px;
  color: #000;
  opacity: 0.15;
}
.feature-area-l6 .content-body .feature-title {
  font-size: 22px;
  font-weight: 700;
  line-height: 34px;
  margin: 0 0 25px;
  color: #000;
}
/* Native details/summary FAQ; preserve the disclosure behavior. */
.faq-main-area-single .accordion details > summary {
  display: block;
  position: relative;
  padding-right: 20px;
  color: #0d152e;
  font-size: 16px;
  font-weight: 700;
  line-height: normal;
  cursor: pointer;
  list-style: none;
}
.faq-main-area-single .accordion details > summary::-webkit-details-marker {
  display: none;
}
.faq-main-area-single .accordion details > summary::after {
  content: "";
  position: absolute;
  right: 0;
  top: 4px;
  width: 8px;
  height: 8px;
  border-right: 2px solid #1787fc;
  border-bottom: 2px solid #1787fc;
  transform: rotate(45deg);
  transition: transform 0.3s ease;
}
.faq-main-area-single .accordion details[open] > summary::after {
  top: 8px;
  transform: rotate(-135deg);
}
.faq-main-area-single .accordion details > p {
  display: block;
}
.faq-main-area-single .accordion li:has(details[open]) {
  background: #f8fafc;
}
.faq-main-area-single .accordion .faq-icon {
  margin-top: -3px;
}
/* Screenshot carousel: script-controlled track, native buttons, legacy classes. */
.screenshot-slider-wrapper-l-16 {
  overflow-x: clip;
}
.screenshot-slider-wrapper-l-16 {
  direction: ltr;
}
.screenshot-slider {
  position: relative;
}
.screenshot-slider .slick-list {
  overflow: hidden;
  position: relative;
}
.screenshot-slider .slick-track {
  display: flex;
  direction: ltr;
  will-change: transform;
}
.screenshot-slider .slick-slide {
  flex: none;
}
.screenshot-slider .slick-slide img {
  display: block;
}
.screenshot-slider:not(.slick-initialized) > .single-slide + .single-slide {
  display: none;
}
.l-16-slide-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #2780ff;
  cursor: pointer;
}
.l-16-slide-btn .icon {
  width: 14px;
  height: 20px;
}
.l-16-slide-btn.active .icon, .l-16-slide-btn:hover .icon {
  color: #fff;
}
.screenshots-dots-l-16 .slick-dots li {
  cursor: pointer;
}
.screenshots-dots-l-16 .slick-dots button {
  display: none;
}
.my_location_btn {
  width: 40px;
  height: 40px;
  margin: 10px;
  border: 0;
  border-radius: 2px;
  background: #fff url("/images/icons/help/gpson-help.svg") center / 24px no-repeat;
  box-shadow: 0 1px 4px rgb(0 0 0 / 0.3);
  cursor: pointer;
}
.my_location_btn.is-locating {
  animation: pulse 1s ease-in-out infinite;
}
@keyframes pulse {
  50% {
    opacity: 0.4;
  }
}
/* 2.6 MEDIA PAGE */
:where(.page-media) .feature-area-l2 {
  padding-top: 100px;
}
/* 2.7 LEGAL GUIDE & INCIDENT PAGES — rights/ and best/ */
:where(.page-docs) :is(.bestpractice, .legal) {
  grid-template-columns: minmax(0, 1fr);
}
:where(.page-docs) .mytabs .tab {
  overflow-wrap: break-word;
}
:where(.page-docs) .mytabs .tab :is(img, iframe, video, blockquote) {
  max-width: 100%;
}
.list-continuation,
.tab ol li.list-continuation,
.tab ul li.list-continuation {
  display: block;
  list-style: none;
  margin: 0;
  padding: 0;
}
.mytabs input[type="radio"]:focus-visible + label {
  outline: 3px solid var(--brand-blue);
  outline-offset: 2px;
}
@media (max-width: 767.98px) {
  :where(.page-docs) main.container.row {
    margin-inline: 0;
    width: 100%;
  }
}
@media (min-width: 768px) {
  :where(.page-docs) main.container.row {
    margin-left: calc(-0.5 * var(--bs-gutter-x));
    margin-right: auto;
  }
}
.text-big {
  font-size: larger;
}
/* 2.8–2.9 SHARED REPORT DESIGN */
:where(.page-report) .site-navbar {
  box-shadow: 5px 5px 10px hsl(280deg 23% 97%);
}
.report {
  --color-one: hsl(34 87% 57%);
  --color-two: hsl(206 78% 30%);
  --color-three: hsl(0 0% 62%);
  --color-four: hsl(283 39% 42%);
  --color-five: hsl(3 74% 58%);
  --color-six: hsl(8 66% 26%);
  --color-seven: hsl(206 52% 49%);
  --color-eight: hsl(202 65% 67%);
}
:is(.report, .nb-report, .page-docs main, .page-legal main) {
  --report-media-width: 800px;
  box-sizing: border-box;
  width: 100%;
  max-width: 1000px;
  margin: 8rem auto 3rem;
  padding-inline: clamp(1rem, 3vw, 2rem);
  font-size: clamp(1.125rem, 1rem + 0.25vw, 1.25rem);
  line-height: 1.9;
  direction: rtl;
  text-align: right;
  color: #000;
  overflow-wrap: break-word;
}
:is(.report, .nb-report, .page-docs main, .page-legal main) p {
  font-size: 1em;
  line-height: inherit;
  color: inherit;
  margin: 0 0 1.25em;
}
:is(.report, .nb-report, .page-docs main, .page-legal main) :is(ul, ol) {
  font-size: 1em;
  line-height: inherit;
  padding-inline: 1.5em 0;
  margin-block: 0 1.25em;
}
:is(.report, .nb-report, .page-docs main, .page-legal main) h1 {
  font-size: clamp(1.75rem, 1.25rem + 1.5vw, 2.5rem);
  line-height: 1.6;
  font-weight: 700;
  text-align: center;
  color: #000;
  margin: 0 0 1.5rem;
}
:is(.report, .nb-report, .page-docs main, .page-legal main) h2 {
  font-size: clamp(1.4rem, 1.15rem + 0.75vw, 1.75rem);
  line-height: 1.7;
  font-weight: 700;
  color: #000;
  margin: 2.5rem 0 1rem;
}
:is(.report, .nb-report, .page-docs main, .page-legal main) h3 {
  font-size: clamp(1.2rem, 1.05rem + 0.5vw, 1.5rem);
  line-height: 1.7;
  font-weight: 700;
  color: #000;
  margin: 2rem 0 0.75rem;
}
:is(.report, .nb-report, .page-docs main, .page-legal main) :is(h1, h2, h3) strong {
  font-weight: inherit;
}
.nb-title, .report hgroup {
  text-align: center;
  margin-block-end: 2.5rem;
}
.nb-report .nb-byline, .report hgroup p {
  font-size: 1em;
  line-height: 1.9;
  text-align: center;
  margin-block: 1rem 1.5rem;
}
:is(.report, .nb-report, .page-docs main, .page-legal main) figure {
  width: 100%;
  max-width: min(100%, var(--report-media-width));
  margin: 2rem auto;
  text-align: center;
}
:is(.report, .nb-report, .page-docs main, .page-legal main) img {
  display: block;
  width: 100% !important;
  max-width: min(100%, var(--report-media-width));
  height: auto;
  margin-inline: auto;
}
:is(.report, .nb-report, .page-docs main, .page-legal main) > img {
  margin-block: 2rem;
}
:is(.report, .nb-report, .page-docs main, .page-legal main) > img:first-child {
  margin-block-start: 0;
}
:is(.report, .nb-report, .page-docs main, .page-legal main) figcaption {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.8;
  text-align: center;
  margin-block: 0.75rem;
  color: #115589;
}
:is(.report, .nb-report, .page-docs main, .page-legal main) iframe {
  display: block;
  width: 100%;
  max-width: min(100%, var(--report-media-width));
  height: clamp(320px, 60vh, 560px);
  margin-inline: auto;
  border: 0;
}
.nb-report .nb-embed--video iframe {
  aspect-ratio: 16 / 9;
  height: auto;
  min-height: 0;
}
/* 2.10 EMBEDDED CHART / MAP PAGES */
body.embed {
  margin: 0;
  background: #fff;
}
.embed-chart, .embed-map {
  width: 100%;
  height: 100vh;
}
.embed-note {
  padding: 1rem;
  text-align: center;
}
/* 2.11 SCROLL REVEAL — site.js adds .aos-animate */
.js [data-aos] {
  opacity: 0;
  transition-property: opacity, transform;
  transition-duration: 0.8s;
  transition-timing-function: ease;
}
.js [data-aos="fade-up"] {
  transform: translate3d(0, 100px, 0);
}
.js [data-aos="fade-down"] {
  transform: translate3d(0, -100px, 0);
}
.js [data-aos="fade-right"] {
  transform: translate3d(-100px, 0, 0);
}
.js [data-aos="fade-left"] {
  transform: translate3d(100px, 0, 0);
}
.js [data-aos].aos-animate {
  opacity: 1;
  transform: none;
}
/* Shared carousel timing. Inline script transitions can override loop resets. */
.screenshot-slider {
  --carousel-duration: 900ms;
  --carousel-easing: cubic-bezier(0.45, 0, 0.55, 1);
}
.screenshot-slider .slick-track {
  transition: transform var(--carousel-duration) var(--carousel-easing);
}
.screenshot-slider-wrapper-l-16 .screenshot-slider .slick-slide {
  transition: transform var(--carousel-duration) var(--carousel-easing),
    opacity var(--carousel-duration) var(--carousel-easing),
    border-radius var(--carousel-duration) var(--carousel-easing);
}
.screenshot-slider-wrapper-l-16 .screenshot-slider .slick-slide img {
  transition: border-radius var(--carousel-duration) var(--carousel-easing);
}
/* 2.12 REDUCED MOTION */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .js [data-aos] {
    opacity: 1;
    transform: none;
  }
}
/* Final navigation focus refinements. */
.nav-dropdown-toggle:focus:not(:focus-visible) {
  outline: none;
}
.nav-dropdown-toggle:focus-visible {
  outline: 3px solid var(--brand-blue);
  outline-offset: 2px;
}
.site-header .menu-block .mobile-menu-head .mobile-menu-close {
  border: 0;
  box-shadow: none;
}
.mobile-menu-close:focus:not(:focus-visible) {
  outline: none;
}
.mobile-menu-close:focus-visible {
  outline: 3px solid var(--brand-blue);
  outline-offset: 2px;
}
/* Full-height legal guide / incident pages; footer remains in document flow. */
.page-docs > .site-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}
.page-docs > .site-wrapper > main {
  flex: 1 0 auto;
  min-width: 0;
}
.page-docs > .site-wrapper > .site-footer {
  flex: 0 0 auto;
  margin-top: auto;
}
/* LEGAL GUIDES & INCIDENT ARTICLES — shared editorial layout */
.page-docs main#main {
  display: block;
  width: 100%;
  max-width: 1000px;
  margin: 8rem auto 3rem;
  padding: 0 clamp(1rem, 3vw, 2rem);
  border: 0 !important;
}
.page-docs main#main > :is(.bestpractice, .legal) {
  width: 100%;
  min-width: 0;
  max-width: none;
  padding: 0;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: none;
  grid-auto-rows: auto;
}
.page-docs main#main > .content-container {
  margin: 0;
  padding: 0;
  border: 0 !important;
}
.page-docs main#main > .content-container :is(.container, .row, [class*="col-"]) {
  display: block;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}
.page-docs main#main :is(p, li, dt, dd, blockquote) {
  font-size: 1em;
  line-height: 1.9;
}
.page-docs main#main :is(h2, .was-h2) {
  font-size: clamp(1.4rem, 1.15rem + 0.75vw, 1.75rem);
  line-height: 1.7;
  font-weight: 700;
  padding: 0;
  margin: 2.5rem 0 1rem;
}
.page-docs main#main :is(h3, .was-h3) {
  font-size: clamp(1.2rem, 1.05rem + 0.5vw, 1.5rem);
  line-height: 1.7;
  font-weight: 700;
  padding: 0;
  margin: 2rem 0 0.75rem;
}
.page-docs main#main > :is(.bestpractice, .legal) > h2,
.page-docs main#main .section-heading-10 > h2 {
  font-size: clamp(1.75rem, 1.25rem + 1.5vw, 2.5rem);
  line-height: 1.6;
  text-align: center;
  margin: 0 0 1.5rem;
}
.page-docs main#main > :is(.bestpractice, .legal) > p.fw-bolder {
  font-size: 1rem;
  padding: 0;
  margin: 0 0 1.25rem;
}
.page-docs main#main a {
  color: #115589;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  overflow-wrap: anywhere;
}
.page-docs main#main a:hover {
  color: #17375b;
}
.page-docs main#main .mytabs {
  width: 100%;
  min-width: 0;
  margin: 0;
  gap: 0.5rem;
  align-items: flex-start;
}
.page-docs main#main .mytabs:not(:has(> input[type="radio"])) {
  display: block;
}
.page-docs main#main .mytabs > input[type="radio"] {
  display: block;
}
.page-docs main#main .mytabs > label {
  flex: 0 1 auto;
  max-width: 100%;
  min-height: 44px;
  margin: 0;
  padding: 0.65rem 1rem;
  border: 1px solid #dce3eb;
  border-radius: 8px;
  background: #f3f6fa;
  color: #213053;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.7;
  text-align: center;
  overflow-wrap: anywhere;
  cursor: pointer;
}
.page-docs main#main .mytabs > label:hover {
  background: #e8eef5;
}
.page-docs main#main .mytabs > input:checked + label,
.page-docs main#main .mytabs:not(:has(> input:checked)) > input[type="radio"]:first-of-type + label {
  background: var(--brand-yellow);
  border-color: var(--brand-yellow);
  color: #1f1f1f;
}
.page-docs main#main .mytabs > .tab {
  flex: 0 0 100%;
  min-width: 0;
  min-block-size: 0;
  margin: 1rem 0 0;
  padding: 1.5rem 0 0;
  border-top: 1px solid #e1e6ec;
}
.page-docs main#main .mytabs:not(:has(> input:checked)) > input[type="radio"]:first-of-type + label + .tab {
  display: block;
}
.page-docs main#main .mytabs > .tab > :is(h2, h3):first-child {
  margin-top: 0;
}
.page-docs main#main :is(ul, ol) li {
  padding-block: 0 0.6rem;
}
.page-docs main#main dl {
  margin: 0 0 1.5rem;
}
.page-docs main#main dt {
  margin-block: 1.5rem 0.5rem;
  font-weight: 700;
}
.page-docs main#main dd {
  margin-inline: 0;
  margin-block: 0 1.5rem;
}
.page-docs main#main blockquote {
  max-width: 100%;
  margin: 1.5rem 0;
  padding: 1rem;
  border-inline-start: 3px solid var(--brand-yellow);
  background: #f7f9fc;
}
.page-docs main#main :is(iframe, video) {
  display: block;
  width: 100%;
  max-width: 800px;
  aspect-ratio: 16 / 9;
  height: auto;
  margin: 1.5rem auto;
  border: 0;
}
.page-docs main#main img {
  max-width: min(100%, 800px);
  margin-block: 1.5rem;
}
.page-docs main#main .bestlist {
  margin: 1.5rem 0 0;
  padding-inline: 1.75rem 0;
  font-weight: 400 !important;
}
.page-docs main#main .bestlist > li {
  padding-block: 0;
  border-bottom: 1px solid #e1e6ec;
}
.page-docs main#main .bestlist > li > a {
  display: block;
  padding: 0.8rem 0.25rem;
  text-decoration: none;
}
.page-docs main#main .bestlist > li > a:hover {
  text-decoration: underline;
}
@media (max-width: 575.98px) {
  .page-docs main#main .mytabs > label {
    flex: 1 1 8rem;
    padding-inline: 0.65rem;
  }
}
/* Privacy policy — shared editorial layout. */
.page-legal > .site-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}
.page-legal > .site-wrapper > main#main {
  flex: 1 0 auto;
  min-width: 0;
}
.page-legal > .site-wrapper > .site-footer {
  flex: 0 0 auto;
  margin-top: auto;
}
.page-legal main#main :is(.container, .row, [class*="col-"]) {
  display: block;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}
.page-legal main#main .border-bottom {
  border-bottom: 0 !important;
}
.page-legal main#main .content {
  text-align: right !important;
  margin: 0 !important;
  padding: 0;
}
.page-legal main#main > h1.visually-hidden {
  position: static !important;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 0 1.5rem !important;
  overflow: visible !important;
  clip-path: none !important;
  white-space: normal !important;
}
.page-legal main#main :is(p, li) {
  font-size: 1em;
  line-height: 1.9;
  color: #000;
}
.page-legal main#main .content > h2.was-h4:first-child {
  font-size: 1em;
  line-height: 1.9;
  font-weight: 400;
  margin: 0 0 2rem;
  padding: 1rem 1.25rem;
  border-inline-start: 3px solid var(--brand-yellow);
  background: #f7f9fc;
}
.page-legal main#main h3 {
  font-size: clamp(1.4rem, 1.15rem + 0.75vw, 1.75rem);
  line-height: 1.7;
  font-weight: 700;
  margin: 2.5rem 0 1rem;
  scroll-margin-top: 8rem;
}
.page-legal main#main h4 {
  font-size: clamp(1.2rem, 1.05rem + 0.5vw, 1.5rem);
  line-height: 1.7;
  font-weight: 700;
  color: #000;
  margin: 2rem 0 0.75rem;
}
.page-legal main#main li {
  padding-block-end: 0.6rem;
}
.page-legal main#main a {
  color: #115589;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  overflow-wrap: anywhere;
}
.page-legal main#main code {
  overflow-wrap: anywhere;
}

/* ==========================================================================
   PART 3 — PERSIAN NUMBERING & RTL LIST REPAIR
   --------------------------------------------------------------------------
   WHY THESE RULES ARE LAST
   - Legacy Persian numbering only targeted .tab ol li, missing ordinary FAQs.
   - That descendant selector also reached bullets inside numbered lists;
     the later .tab ul li shorthand could reset nested numbering to bullets.
   - The index's 1.75rem gutter was too narrow for wider multi-digit markers.
   - .overflow-hidden can clip an outside marker at the list's own edge.

   SCOPE / BEHAVIOR
   Applies to shared editorial content and other Persian-language main content.
   Navigation, footer, carousel controls, FAQ accordion shells and intentional
   unstyled/component lists are excluded. No global overflow reset is used.
   Native markers preserve ol[start], ol[reversed], li[value] and nested lists.
   Explicit ol[type=a/A/i/I] alphabetic/Roman lists retain their intended style.
   An optional .list-latin class keeps an ordered list in Western decimal.

   --list-marker-gutter can be set on a specific ol for unusually long numbers;
   the default 3.25em scales with text size and accommodates ordinary multi-digit
   numbering without a fixed-width pseudo-element. CSS does not alter digits
   typed in paragraph/link text or rendered inside a separate iframe document.
   ========================================================================== */

/* 3.1 Logical spacing and unclipped native markers.
   Only list-local padding/overflow use !important to beat legacy inline resets
   and .overflow-hidden. Clipping on ancestor layouts is deliberately untouched;
   the gutter reserves space for the marker inside those ancestors. */
:is(.page-docs main#main, .page-legal main#main, .report, .nb-report, main:lang(fa))
  :is(ol, ul):not(:where(
    .list-unstyled, .list-group, .nav, .site-menu-main, .slick-dots,
    .accordion, [role="tablist"],
    nav *, [role="navigation"] *, .site-header *, .site-footer *,
    .nav-dropdown *, .site-menu-main *, .list-group *, .slick-dots *
  )) {
  box-sizing: border-box;
  min-inline-size: 0;
  max-inline-size: 100%;
  margin-inline: 0;
  padding-inline-end: 0 !important;
  list-style-position: outside !important;
  overflow: visible !important;
  overflow-wrap: anywhere;
}

/* 3.2 All ordinary ordered lists, including lists outside .tab.
   'persian' generates real U+06F0–U+06F9 digits, not font-dependent Latin shapes.
   Native counter behavior is retained: no counter-reset or generated ::before. */
:is(.page-docs main#main, .page-legal main#main, .report, .nb-report, main:lang(fa))
  ol:not(:where(
    .list-unstyled, .list-group, .nav, .site-menu-main, .slick-dots,
    .accordion, [role="tablist"],
    nav *, [role="navigation"] *, .site-header *, .site-footer *,
    .nav-dropdown *, .site-menu-main *, .list-group *, .slick-dots *
  )) {
  padding-inline-start: var(--list-marker-gutter, 3.25em) !important;
}
:is(.page-docs main#main, .page-legal main#main, .report, .nb-report, main:lang(fa))
  ol:not(:where(
    .list-unstyled, .list-group, .nav, .site-menu-main, .slick-dots,
    .accordion, [role="tablist"],
    nav *, [role="navigation"] *, .site-header *, .site-footer *,
    .nav-dropdown *, .site-menu-main *, .list-group *, .slick-dots *
  )):not(:where([type="a"], [type="A"], [type="i"], [type="I"], .list-latin)) {
  list-style-type: persian !important;
}
:is(.page-docs main#main, .page-legal main#main, .report, .nb-report, main:lang(fa))
  ol:not(:where(
    .list-unstyled, .list-group, .nav, .site-menu-main, .slick-dots,
    .accordion, [role="tablist"],
    nav *, [role="navigation"] *, .site-header *, .site-footer *,
    .nav-dropdown *, .site-menu-main *, .list-group *, .slick-dots *
  )).list-latin {
  list-style-type: decimal !important;
}

/* 3.3 Restore actual editorial bullets; do not let an outer ol number them.
   Native disc/circle/square markers remain distinct from Persian numbers. */
:is(.page-docs main#main, .page-legal main#main, .report, .nb-report, main:lang(fa))
  ul:not(:where(
    .list-unstyled, .list-group, .nav, .site-menu-main, .slick-dots,
    .accordion, [role="tablist"],
    nav *, [role="navigation"] *, .site-header *, .site-footer *,
    .nav-dropdown *, .site-menu-main *, .list-group *, .slick-dots *
  )) {
  padding-inline-start: 1.5em !important;
  list-style-type: disc;
}
:is(.page-docs main#main, .page-legal main#main, .report, .nb-report, main:lang(fa))
  ul:not(:where(
    .list-unstyled, .list-group, .nav, .site-menu-main, .slick-dots,
    .accordion, [role="tablist"],
    nav *, [role="navigation"] *, .site-header *, .site-footer *,
    .nav-dropdown *, .site-menu-main *, .list-group *, .slick-dots *
  )):where(ul ul) {
  list-style-type: circle;
}
:is(.page-docs main#main, .page-legal main#main, .report, .nb-report, main:lang(fa))
  ul:not(:where(
    .list-unstyled, .list-group, .nav, .site-menu-main, .slick-dots,
    .accordion, [role="tablist"],
    nav *, [role="navigation"] *, .site-header *, .site-footer *,
    .nav-dropdown *, .site-menu-main *, .list-group *, .slick-dots *
  )):where(ul ul ul) {
  list-style-type: square;
}

/* 3.4 Direct-child inheritance fixes BOTH nesting directions: ol > ul and
   ul > ol. It also overrides old per-li decimal styles without introducing
   a second visible number. Component and continuation items are not changed. */
:is(.page-docs main#main, .page-legal main#main, .report, .nb-report, main:lang(fa))
  :is(ol, ul):not(:where(
    .list-unstyled, .list-group, .nav, .site-menu-main, .slick-dots,
    .accordion, [role="tablist"],
    nav *, [role="navigation"] *, .site-header *, .site-footer *,
    .nav-dropdown *, .site-menu-main *, .list-group *, .slick-dots *
  )) > li:not(:where(.list-continuation, .list-unstyled)) {
  list-style-type: inherit !important;
  list-style-position: inherit !important;
  list-style-image: inherit;
  min-inline-size: 0;
  overflow-wrap: anywhere;
}
:is(.page-docs main#main, .page-legal main#main, .report, .nb-report, main:lang(fa))
  :is(ol, ul):not(:where(
    .list-unstyled, .list-group, .nav, .site-menu-main, .slick-dots,
    .accordion, [role="tablist"],
    nav *, [role="navigation"] *, .site-header *, .site-footer *,
    .nav-dropdown *, .site-menu-main *, .list-group *, .slick-dots *
  )) > li:not(:where(.list-continuation, .list-unstyled))::marker {
  font-family: var(--font-main, sans-serif);
  font-size: 1em;
  font-variant-numeric: tabular-nums;
}

/* 3.5 Index refinement: defeat the older, more specific .bestlist gutter.
   Keep the original block links, separators, tap targets and text alignment. */
.page-docs main#main ol.bestlist {
  padding-inline-start: var(--list-marker-gutter, 3.25em) !important;
  padding-inline-end: 0 !important;
  overflow: visible !important;
}

/* 3.6 Nested-list and paragraph rhythm. Never apply this to the UI list shells. */
:is(.page-docs main#main, .page-legal main#main, .report, .nb-report, main:lang(fa))
  :is(ol, ul):not(:where(
    .list-unstyled, .list-group, .nav, .site-menu-main, .slick-dots,
    .accordion, [role="tablist"],
    nav *, [role="navigation"] *, .site-header *, .site-footer *,
    .nav-dropdown *, .site-menu-main *, .list-group *, .slick-dots *
  )):where(li > ol, li > ul) {
  margin-block: 0.5em 0;
}
/* On very narrow screens or with enlarged text, cap nested indentation
   relative to its containing item. Root-list gutters remain full width;
   nested markers can use the already reserved ancestor gutter. */
:is(.page-docs main#main, .page-legal main#main, .report, .nb-report, main:lang(fa))
  ol:not(:where(
    .list-unstyled, .list-group, .nav, .site-menu-main, .slick-dots,
    .accordion, [role="tablist"],
    nav *, [role="navigation"] *, .site-header *, .site-footer *,
    .nav-dropdown *, .site-menu-main *, .list-group *, .slick-dots *
  )):where(li ol) {
  padding-inline-start: min(var(--list-marker-gutter, 3.25em), 25%) !important;
}
:is(.page-docs main#main, .page-legal main#main, .report, .nb-report, main:lang(fa))
  ul:not(:where(
    .list-unstyled, .list-group, .nav, .site-menu-main, .slick-dots,
    .accordion, [role="tablist"],
    nav *, [role="navigation"] *, .site-header *, .site-footer *,
    .nav-dropdown *, .site-menu-main *, .list-group *, .slick-dots *
  )):where(li ul) {
  padding-inline-start: min(1.5em, 25%) !important;
}
:is(.page-docs main#main, .page-legal main#main, .report, .nb-report, main:lang(fa))
  :is(ol, ul):not(:where(
    .list-unstyled, .list-group, .nav, .site-menu-main, .slick-dots,
    .accordion, [role="tablist"],
    nav *, [role="navigation"] *, .site-header *, .site-footer *,
    .nav-dropdown *, .site-menu-main *, .list-group *, .slick-dots *
  )) > li > p:last-child {
  margin-block-end: 0;
}

/* Continuation wrappers stay unnumbered and do not add an implicit list-item
   counter step. Restore zero spacing over the later generic li padding. */
:is(.page-docs main#main, .page-legal main#main, .report, .nb-report, main:lang(fa)) :is(ol, ul) > li.list-continuation {
  display: block;
  list-style: none !important;
  counter-increment: none;
  margin: 0;
  padding: 0;
}

/* Explicit unstyled content lists must not inherit the legacy tab numbering. */
:is(.page-docs main#main, .page-legal main#main, .report, .nb-report, main:lang(fa)) :is(ol, ul).list-unstyled {
  list-style: none !important;
  padding-inline: 0 !important;
}
:is(.page-docs main#main, .page-legal main#main, .report, .nb-report, main:lang(fa)) :is(ol, ul).list-unstyled > li,
:is(.page-docs main#main, .page-legal main#main, .report, .nb-report, main:lang(fa)) :is(ol, ul) > li.list-unstyled {
  list-style: none !important;
}

/* END OF COMPLETE STYLESHEET *//* ==========================================================================
   PART 4 — REVIEWED SHARED DESIGN & ACCESSIBILITY
   Keep this section after compatibility rules. Scoped overrides deliberately
   win over old fixed dimensions without changing JS state classes. Only focus,
   reduced motion and inherited !important dimensions require !important here.
   ========================================================================== */

/* 4.1 Central design settings. Yellow remains the brand accent; the darker blue
   is for readable white-on-blue controls and links on light backgrounds. */
:root {
  --action-blue: #145fbd;
  --action-blue-hover: #104c98;
  --editorial-width: 1000px;
  --editorial-media-width: 800px;
  --focus-color: #145fbd;
  --control-size: 2.75rem;
  --body-leading: 1.9;
}

/* Prevent intrinsic flex/grid widths and large media from stretching the page.
   Do not hide overflow on body: that masks layout bugs and can clip focus. */
.row > *, .site-navbar > *, .feature-box-l2 > *, .content-box {
  min-inline-size: 0;
}
img, video { max-inline-size: 100%; }
textarea { font: inherit; max-inline-size: 100%; }
:is(.report, .nb-report, .page-docs main, .page-legal main) {
  --report-media-width: var(--editorial-media-width);
  max-width: var(--editorial-width);
  line-height: var(--body-leading);
  overflow-wrap: anywhere;
}
.page-docs main#main { max-width: var(--editorial-width); }
:is(.report, .nb-report, .page-docs main, .page-legal main) :is(h1,h2,h3,h4,[id]) {
  scroll-margin-block-start: 9rem;
}
main > section[id], main > div[id] { scroll-margin-block-start: 9rem; }
:is(.report, .nb-report) a {
  color: #115589;
  text-decoration: underline;
  text-underline-offset: .2em;
  text-decoration-thickness: .075em;
}
:is(.report, .nb-report) a:hover { color: #17375b; }
pre { max-inline-size: 100%; overflow-x: auto; }

/* Lower-level editorial headings share the same scale across reports, guides
   and privacy text. Page-specific h3/h4 hierarchy rules above remain in force. */
:is(.report, .nb-report, .page-docs main, .page-legal main) :is(h4,h5,h6) {
  line-height: 1.7;
  font-weight: 700;
  letter-spacing: normal;
}
:is(.report, .nb-report) h4 { font-size: 1.2em; margin-block: 1.75rem .75rem; }
:is(.report, .nb-report) :is(h5,h6) { font-size: 1em; margin-block: 1.5rem .5rem; }

/* 4.2 Focus must survive .focus-reset and button-specific outline removal.
   A white halo plus dark outline works on both light and dark sections.
   A radio's visible label gets the ring because its input is visually clipped. */
:focus-visible {
  outline: 3px solid var(--focus-color) !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 3px #fff !important;
}
.mytabs input[type="radio"]:focus-visible + label {
  outline: 3px solid var(--focus-color);
  outline-offset: 3px;
  box-shadow: 0 0 0 3px #fff;
}
.skip-link {
  position: fixed;
  max-inline-size: calc(100% - 2rem);
  top: 0;
  transform: translateY(-150%);
}
.skip-link:focus { transform: none; }
/* When keyboard navigation reaches animated content, show it immediately. */
.js [data-aos]:focus-within { opacity: 1; transform: none; }

/* 4.3 Buttons expand for wrapping labels and enlarged text. These selectors
   override the 40/60px fixed heights while keeping the existing visual style. */
.btn,
.header-btn-l-16 .download-btn,
.hero-area-l-16 .content .hero-btns .btn {
  height: auto;
  min-height: var(--control-size);
  max-inline-size: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.6;
  letter-spacing: normal;
}
.header-btn-l-16 .download-btn,
.hero-area-l-16 .content .hero-btns .btn {
  background: var(--action-blue);
  color: #fff;
}
.header-btn-l-16 .download-btn:hover,
.hero-area-l-16 .content .hero-btns .btn:hover {
  background: var(--action-blue-hover);
}
/* Hero actions: use a real gap instead of negative container margins.
   The grid responds to available column space, including narrow desktop
   columns. Phones always get one full-width action per row. */
.hero-area-l-16 .content .hero-btns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: .875rem;
  margin: 0;
  align-items: stretch;
}
.hero-area-l-16 .content .hero-btns .btn {
  min-width: 0;
  width: 100%;
  min-height: 3.75rem;
  height: auto;
  margin: 0;
  padding: .75rem 1rem;
  gap: .625rem;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.6;
  text-align: center;
}
/* Keep vector icons from shrinking beside a long or enlarged label. */
.hero-area-l-16 .content .hero-btns .btn :is(i, .icon) {
  flex: 0 0 1.5rem;
  width: 1.5rem;
  height: 1.5rem;
  font-size: 1.5rem;
  margin: 0;
}
/* The Telegram label is baked into an SVG image, not a text node.
   Constrain the existing badge without cropping or replacing the artwork.
   Do not apply font-size overrides to every SVG descendant. */
.hero-area-l-16 .content .hero-btns .btn > img {
  display: block;
  width: 8rem;
  max-width: 100%;
  height: auto;
  margin: 0;
  object-fit: contain;
}
@media (max-width: 767.98px) {
  .hero-area-l-16 .content .hero-btns {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* Keep the five stars together. Put the caption on its own line when a
   phone or enlarged text leaves insufficient space for a readable row. */
.hero-area-l-16 .star-ratings {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .25rem;
  row-gap: .5rem;
}
.hero-area-l-16 .star-ratings > .icon {
  flex: 0 0 1rem;
  width: 1rem;
  height: 1rem;
}
.hero-area-l-16 .star-ratings .rating-text {
  min-width: 0;
  max-width: 100%;
  margin: 0;
  margin-inline-start: .75rem;
  font-size: .9375rem;
  line-height: 1.6;
  overflow-wrap: anywhere;
}
@media (max-width: 767.98px) {
  .hero-area-l-16 .star-ratings .rating-text {
    flex-basis: 100%;
    margin-inline: 0;
  }
}
.site-footer .social-icons a, .my_location_btn {
  min-width: var(--control-size);
  min-height: var(--control-size);
}

/* 4.4 Navigation: allow long Persian labels to wrap. The hidden attribute and
   .active class remain controlled by site.js; CSS does not simulate ARIA state.
   Closed mobile panels are hidden from keyboard navigation as well as view. */
.site-menu-main { padding-inline: 0; }
.site-menu-main .nav-link-item { line-height: 1.6; letter-spacing: normal; }
.nav-dropdown {
  min-width: 0;
  width: max-content;
  max-width: min(24rem, calc(100vw - 2rem));
}
.dropdown-nav-link-item { padding-block: .5rem; overflow-wrap: anywhere; }
/* Submenu hover changes color without an underline; keyboard focus keeps its outline. */
.dropdown-nav-link-item:hover { color: var(--action-blue); text-decoration: none; }
@media (min-width: 992px) {
  /* Wrapping keeps all desktop items reachable at tablet landscape widths. */
  .site-menu-main { flex-wrap: wrap; align-items: center; }
  .site-navbar .menu-block-wrapper { min-width: 0; }
  .site-menu-main .nav-link-item { padding-block: .75rem !important; }
  .nav-dropdown { top: 100%; margin-top: 0; }
  .site-header--sticky:focus-within { transform: none !important; }
}
@media (max-width: 991.98px) {
  .site-header .mobile-menu-trigger {
    width: var(--control-size);
    height: var(--control-size);
    flex-shrink: 0;
    margin-inline: .5rem;
  }
  .site-header .menu-block {
    width: min(22rem, 100%);
    height: 100vh;
    height: 100dvh;
    visibility: hidden;
    transition: transform .25s ease, visibility .25s;
  }
  .site-header .menu-block.active { visibility: visible; }
  .site-header .menu-block .site-menu-main {
    height: calc(100% - 50px);
    padding-block-end: max(1rem, env(safe-area-inset-bottom));
    overscroll-behavior-y: contain;
  }
  .site-menu-main > li > a, .nav-dropdown-toggle {
    height: auto;
    min-height: var(--control-size);
    padding: .75rem 1rem;
    line-height: 1.7;
    overflow-wrap: anywhere;
  }
  .nav-dropdown { width: 100%; max-width: 100%; }
  /* The revealed header is white, so its hamburger must stay dark. */
  .reveal-header .mobile-menu-trigger span,
  .reveal-header .mobile-menu-trigger span::before,
  .reveal-header .mobile-menu-trigger span::after { background: #1f1f1f !important; }
}

/* 4.5 Homepage: fluid banner type and content contrast. Feature numbers carry
   sequence information, so they must not be rendered at 15% opacity. */
.banner a { min-inline-size: 0; }
.banner a p {
  max-inline-size: 100%;
  padding-inline: 1rem;
  padding-block-end: clamp(2rem, 6vw, 5rem);
  font-size: clamp(1.5rem, 1rem + 3vw, 3rem);
  line-height: 1.6;
  overflow-wrap: anywhere;
}
.feature-area-l6 .content-body .feature-num,
.feature-area-l6 .content-area h1 { color: #666; opacity: 1; }
.feature-box-l2 .content-box p { color: #3b4656; opacity: 1; }
.feature-box-l2 { height: 100%; }
.feature-box-l2 .content-box { overflow-wrap: anywhere; }
.faq-main-area-single .accordion { padding-inline: 0; }
.faq-main-area-single .accordion details > summary {
  min-height: var(--control-size);
  padding-inline: 1.5rem 2.5rem;
  line-height: 1.8;
}
.faq-main-area-single .accordion details > summary::after { top: .75rem; }
.faq-main-area-single .accordion details[open] > summary::after { top: 1rem; }
.faq-main-area-single .accordion .faq-icon {
  position: absolute;
  inset-inline-end: 0;
  top: .25rem;
  float: none;
  margin: 0;
}
.faq-main-area-single .accordion li p { color: #465473; letter-spacing: normal; }
@media (max-width: 575.98px) {
  .header-btn-l-16 .download-btn { min-width: 0; margin-left: 0; padding: .5rem .75rem; }
  .banner a img { height: 65vh; height: 65svh; }
  .banner:has(:hover) p { transform: none; }
  .feature-box-l2 .content-box { margin-left: 0; margin-inline-start: 1rem; }
}

/* 4.6 Screenshot viewport: preserve JS slide widths and translations. Remove
   the 720px minimum on short screens; contain keeps complete screenshots visible.
   Dots are real buttons and need a usable hit area, not display:none. */
.screenshot-slider-wrapper-l-16 .screenshot-image,
.screenshot-slider-wrapper-l-16 .screenshot-slider .slick-center {
  min-height: 0 !important;
  max-height: none !important;
}
.screenshot-slider-wrapper-l-16 .screenshot-image {
  height: clamp(18rem, 65vh, 42rem);
}
.screenshot-slider-wrapper-l-16 .screenshot-image img {
  max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain;
}
.screenshot-slider-wrapper-l-16 .l-16-slide-btn { z-index: 12; }
.screenshots-dots-l-16 ul.slick-dots { flex-wrap: wrap; gap: .25rem; }
.screenshots-dots-l-16 ul.slick-dots li,
.screenshots-dots-l-16 ul.slick-dots li.slick-active {
  width: auto; height: auto; margin: 0; opacity: 1;
  background: transparent !important;
}
.screenshots-dots-l-16 ul.slick-dots li button {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--control-size); height: var(--control-size);
  padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: transparent; font-size: 0; cursor: pointer;
}
.screenshots-dots-l-16 ul.slick-dots li button::before {
  content: ""; width: .5rem; height: .5rem; border: 1px solid #fff;
  border-radius: 50%; background: transparent;
}
.screenshots-dots-l-16 ul.slick-dots li.slick-active button::before {
  background: #fff; transform: scale(1.25);
}

/* The decorative frame never intercepts arrow clicks; cap its height when
   the viewport is short without changing its natural aspect ratio. */
.screenshot-slider-wrapper-l-16 .phone-bg-img { pointer-events: none; }
.screenshot-slider-wrapper-l-16 .phone-bg-img img {
  width: auto; max-height: calc(65vh + 3rem);
}

/* 4.7 High-contrast mode: retain outlines and selected-state indicators even
   when user preferences suppress backgrounds and shadows. */
@media (forced-colors: active) {
  :focus-visible { outline-color: Highlight !important; }
  .mytabs input[type="radio"]:checked + label { border: 2px solid Highlight; }
  .screenshots-dots-l-16 ul.slick-dots li button::before { border-color: ButtonText; }
  .screenshots-dots-l-16 ul.slick-dots li.slick-active button::before { background: Highlight; }
}
/* Keep this after all transitions. site.js must also stop automatic advancement
   for reduced motion; CSS can suppress transitions but cannot cancel JS timers. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    transition-delay: 0ms !important;
    animation-duration: .01ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
  }
  .js [data-aos] { opacity: 1; transform: none; }
  .banner:has(:hover) p { transform: none; }
}
/* 4.8 Print: expose every article panel and remove fixed navigation. HTML hidden
   states are retained; inactive CSS-only radio panels become printable. */
@media print {
  .site-header, .skip-link, .menu-overlay, .l-16-slide-btn, .screenshots-dots-l-16 { display: none !important; }
  .js [data-aos] { opacity: 1; transform: none; }
  :is(.report, .nb-report, .page-docs main#main, .page-legal main#main) {
    width: 100%; max-width: none; margin: 0; padding: 0;
    font-size: 12pt; color: #000;
  }
  .page-docs main#main .mytabs > .tab { display: block; }
  .page-docs main#main .mytabs > label { display: none; }
  h1,h2,h3,h4 { break-after: avoid; }
  figure,img { break-inside: avoid; }
  p,li { orphans: 3; widows: 3; }
}

/* ==========================================================================
   PART 5 — FOOTNOTE REFERENCES & ENDNOTES
   Markup contract (see the corrected August 2026 report):
   - Wrap each in-text number in <sup class="footnote-ref"> and link to #fn-N.
   - Give each occurrence a unique id so repeated citations have separate returns.
   - Enclose the endnotes in .footnotes; each .footnote gets its own #fn-N id.
   Plain text such as [۱] cannot be selected by its contents in CSS. Do not use
   nth-child or positional strong selectors: an article edit would break them.
   These rules intentionally follow editorial heading/paragraph overrides.
   ========================================================================== */

/* 5.1 Raise only the inline citation wrapper, not its child link a second time.
   A zero line-height prevents a citation from increasing paragraph line spacing.
   Relative sizing also works inside a larger heading. Native links preserve
   keyboard operation, fragment navigation and the shared focus indicator. */
:is(.report, .nb-report, .page-docs main, .page-legal main) sup.footnote-ref {
  display: inline;
  position: relative;
  top: -.5em;
  vertical-align: baseline;
  font-size: .7em;
  font-weight: 400;
  line-height: 0;
  white-space: nowrap;
  margin-inline: .12em;
  unicode-bidi: isolate;
}
:is(.report, .nb-report, .page-docs main, .page-legal main) sup.footnote-ref > a {
  display: inline;
  position: static;
  vertical-align: baseline;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  color: #115589;
  text-decoration: none;
  padding-inline: .1em;
}
:is(.report, .nb-report, .page-docs main, .page-legal main) sup.footnote-ref > a:hover {
  color: #17375b;
  text-decoration: underline;
  text-underline-offset: .15em;
}

/* 5.2 Endnotes are 15–16px at a default 16px root, below the 18–20px article
   scale. rem units respect enlarged user text. Muted gray stays readable on
   white; do not reduce opacity, which would also fade links and focus rings. */
:is(.report, .nb-report, .page-docs main, .page-legal main) .footnotes {
  font-size: clamp(.9375rem, .9rem + .2vw, 1rem);
  line-height: 1.85;
  color: #545c66;
  margin-block: 3rem 0;
  padding-block-start: 1.5rem;
  border-block-start: 1px solid #cbd2da;
  overflow-wrap: anywhere;
}
/* Match the ID specificity of guide/legal overrides; use inherited sizes so
   nested lists do not shrink repeatedly. No existing report data is removed. */
:is(.report, .nb-report, .page-docs main#main, .page-legal main#main)
  .footnotes :is(p, ul, ol, li, dl, dt, dd, blockquote) {
  font-size: 1em;
  line-height: inherit;
  color: inherit;
}
:is(.report, .nb-report, .page-docs main#main, .page-legal main#main)
  .footnotes :is(h2, h3, h4, h5, h6) {
  font-size: 1.125em;
  font-weight: 700;
  line-height: 1.7;
  color: #414953;
  margin-block: 1.5em .65em;
  text-align: start;
}
:is(.report, .nb-report, .page-docs main#main, .page-legal main#main)
  .footnotes .footnote > :is(h2, h3):first-child { margin-block-start: 0; }
:is(.report, .nb-report, .page-docs main, .page-legal main) .footnote {
  margin-block: 0 1.75rem;
  scroll-margin-block-start: 9rem;
}
/* The fragment target is subtly highlighted to make the destination obvious.
   Keep the native note number at normal baseline within the note heading. */
:is(.report, .nb-report, .page-docs main, .page-legal main) .footnote:target {
  background-color: #f5f7fa;
  border-inline-start: 3px solid var(--brand-yellow);
  padding-inline-start: .75rem;
}
:is(.report, .nb-report, .page-docs main#main, .page-legal main#main)
  .footnotes .footnote-backlinks { margin-block: .5rem 0; }
:is(.report, .nb-report, .page-docs main, .page-legal main) .footnote-backlinks a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: 2rem;
  min-block-size: 2rem;
  margin-inline-end: .25rem;
  color: #115589;
  text-decoration: none;
}

/* 5.3 Printed notes remain distinct and fully visible. Long methodology/data
   notes may split across pages; do not apply break-inside:avoid to the section. */
@media print {
  :is(.report, .nb-report, .page-docs main#main, .page-legal main#main) .footnotes {
    font-size: 10pt;
    color: #333;
  }
  .footnote-backlinks { display: none; }
}

/* ==========================================================================
   REVIEWER NOTES — 2026-09-23 pass
   Three small responsive fixes were applied inline above (marked "Review
   fix"): dvh/svh companions on .banner a img and #map, and a --control-size
   tap target on .mobile-menu-close to match .mobile-menu-trigger.

   Left as recommendations rather than changed directly, because they need
   either visual regression testing or an HTML/JS decision this stylesheet
   can't make on its own:

   1. Z-INDEX SCALE: values in this file range from 1 to 9999999 (see
      .nav-dropdown, .skip-link, .site-header--sticky, modal/overlay layers).
      That top value in particular reads like a "just in case" escape hatch.
      Worth consolidating into a documented scale (e.g. dropdown: 100,
      sticky header: 500, mobile menu: 1000, skip link: 1050, toast/modal:
      1100) so new components don't need to keep guessing a bigger number.

   2. !IMPORTANT DENSITY: ~130 declarations use !important. Most in Part 3
      and 4 are deliberate and commented (beating legacy inline resets and
      older component rules). A few in Part 1/2 (e.g. .visually-hidden,
      [hidden]) are the normal, expected use. If any further global style
      changes are made, search for !important first to avoid a specificity
      fight, rather than adding another layer of !important on top.

   3. UNUSED TOKEN: --bs-green (:root, Part 1) is defined but not referenced
      anywhere in this file. Harmless, but confirm nothing outside this
      stylesheet (inline styles, JS) depends on it before deleting.

   4. CAROUSEL/MENU BEHAVIOR NOT FIXABLE IN CSS (also flagged in the file
      header): mobile menu focus containment, a persistent carousel
      pause/resume control, and updating aria-current on the active slide
      dot are all JS/HTML responsibilities. The CSS focus and forced-colors
      rules here (4.2, 4.7) only handle what's visible once those exist.

   5. COLOR CONTRAST SPOT-CHECK: brand colors were sanity-checked against
      their stated backgrounds (--brand-blue on white ~6.2:1 per the
      existing code comment, --action-blue-hover similar, figure captions
      and footnote text in the 7-9:1 range). Nothing in the audited
      selectors fell below 4.5:1 for body text. This is not a substitute
      for automated contrast testing (e.g. axe, Lighthouse) against the
      live rendered pages, since CSS alone can't see final text-on-image
      overlays such as the hero banner caption on a photographic image.
   ========================================================================== */