* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  background: #f7f7f3;
  color: #172b3c;
  font:
    16px/1.95 Tahoma,
    Arial,
    sans-serif;
}
a {
  color: #176b60;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
header {
  background: #142f3a;
  color: #fff;
  padding: 34px 0;
}
header a {
  color: #edcf9c;
}
.container {
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 24px;
}
.headrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}
.brand {
  font-weight: 800;
  letter-spacing: 0.3px;
}
.lang {
  background: transparent;
  color: white;
  border: 1px solid #a9bac8;
  padding: 8px 14px;
  border-radius: 8px;
  cursor: pointer;
  font: inherit;
}
.preview {
  background: #f1e8d4;
  color: #59421a;
  text-align: center;
  padding: 7px;
  font-size: 13px;
}
main {
  padding: 46px 0 64px;
}
h1 {
  font-size: clamp(29px, 4vw, 43px);
  line-height: 1.5;
  margin: 0 0 13px;
}
h2 {
  font-size: 21px;
  margin: 0 0 12px;
  color: #176b60;
}
.lead {
  color: var(--muted);
  margin-bottom: 28px;
}
.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 23px;
  margin: 16px 0;
  box-shadow: 0 7px 25px #142f3a09;
}
.card p {
  margin: 6px 0 13px;
}
.card ul {
  margin: 8px 0;
  padding-inline-start: 26px;
}
.card li {
  margin: 5px 0;
}
table {
  border-collapse: collapse;
  width: 100%;
  font-size: 13px;
  line-height: 1.8;
}
td,
th {
  border: 1px solid var(--line);
  padding: 10px;
  text-align: start;
  vertical-align: top;
}
th {
  background: #e8f2f2;
}
small,
.muted {
  color: var(--muted);
}
.warning {
  background: #fff9e7;
  border-inline-start: 4px solid #d6a955;
  padding: 15px;
  border-radius: 8px;
}
.en {
  display: none;
}
body.english {
  direction: ltr;
  font-family: Arial, sans-serif;
}
body.english .en {
  display: initial;
}
body.english .ar {
  display: none;
}
footer {
  background: var(--navy);
  color: #d1dce4;
  padding: 20px 0;
  font-size: 13px;
}
footer a {
  color: #e5cb94;
}
.lang:focus-visible,
a:focus-visible {
  outline: 3px solid #d7ae64;
  outline-offset: 3px;
}
@media (max-width: 620px) {
  main {
    padding: 30px 0 45px;
  }
  .card {
    padding: 16px;
  }
  .container {
    padding: 0 16px;
  }
  table {
    font-size: 12px;
  }
  td,
  th {
    padding: 7px;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}
.returnbar .whatsapp {
  background: #126b45;
  color: white;
  border-radius: 7px;
}
@media (max-width: 500px) {
  .returnbar {
    gap: 3px !important;
    flex-wrap: wrap;
  }
  .returnbar a,
  .returnbar button {
    font-size: 13px !important;
    padding: 8px !important;
  }
}

/* Final device review */
html {
  scroll-padding-top: 120px;
}
body {
  overflow-wrap: break-word;
}
button,
a,
input,
select,
textarea {
  -webkit-tap-highlight-color: transparent;
}
button:focus-visible,
a:focus-visible {
  outline: 3px solid #176b60;
  outline-offset: 3px;
}
.returnbar {
  padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
  flex-shrink: 0;
}
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    scroll-behavior: auto !important;
  }
}

.returnbar {
  position: sticky;
  bottom: 0;
  z-index: 60;
  display: flex;
  justify-content: center;
  gap: 18px;
  padding: 8px;
  background: #fff;
  border-top: 1px solid #cbd5dc;
  color: #142f3a;
}
.returnbar a,
.returnbar button {
  font: inherit;
  font-size: 14px;
  padding: 8px;
  min-height: 44px;
  background: none;
  border: 0;
  color: #142f3a;
  cursor: pointer;
}
.brand {
  cursor: pointer;
}
.brand:hover {
  text-decoration: underline;
}
.table-scroll {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.table-scroll table {
  min-width: 440px;
}
.table-scroll:focus-visible {
  outline: 3px solid #176b60;
}
img,
svg {
  max-width: 100%;
}
body {
  min-width: 280px;
}
[hidden] {
  display: none !important;
}
body {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
.returnbar {
  margin-top: auto;
}

main.container {
  width: 100%;
  min-width: 0;
}
.sample-nav { display:flex; flex-wrap:wrap; gap:8px; margin:22px 0; }
.sample-nav a, .sample-cta { display:inline-flex; align-items:center; min-height:44px; padding:8px 15px; border:1px solid #b9ceca; border-radius:8px; font-weight:bold; }
.sample-tag { color:#176b60; font-size:13px; font-weight:bold; }
.cv-sheet { border:1px solid #cbd5dc; border-inline-start:4px solid #176b60; padding:24px; margin:20px 0; background:#fbfcfa; }
.cv-sheet h3 { font-size:24px; margin:0; }
.cv-sheet h4 { margin:20px 0 5px; border-bottom:1px solid #dce5e3; }
.sample-metrics { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin:20px 0; }
.sample-metrics>div { background:#e8f2ef; border-radius:10px; padding:16px; }
.sample-metrics strong { display:block; color:#145348; font-size:28px; line-height:1.4; }
.sample-metrics span { font-size:13px; }
.sample-chart { margin:22px 0; }
.sample-chart figcaption { font-weight:bold; margin-bottom:12px; }
.revenue-row { display:grid; grid-template-columns:58px 1fr; gap:12px; align-items:center; margin:10px 0; }
.bar-track { background:#e9eeeb; border-radius:5px; overflow:hidden; }
.revenue-bar { background:#176b60; color:#fff; padding:4px 10px; text-align:end; min-width:65px; }
.revenue-60 { width:60%; } .revenue-80 { width:80%; } .revenue-100 { width:100%; }
@media(max-width:500px) { .cv-sheet { padding:16px; } .sample-metrics { grid-template-columns:1fr; gap:8px; } .sample-metrics>div { padding:10px 16px; } }
.returnbar {
  padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
}