:root{
  --qc-ink:#10241e;
  --qc-muted:#69746f;
  --qc-line:#e4e7e1;
  --qc-paper:#ffffff;
  --qc-canvas:#f5f6f2;
  --qc-soft:#edf1ec;
  --qc-deep:#123d32;
  --qc-gold:#a48756;
  --qc-radius:26px;
  --qc-shadow:0 24px 70px rgba(16,36,30,.055);
}

html{
  background:var(--qc-canvas);
}

body{
  margin:0;
  background:
    radial-gradient(
      circle at 75% 0%,
      rgba(164,135,86,.075),
      transparent 32rem
    ),
    var(--qc-canvas);
  color:var(--qc-ink);
  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  -webkit-font-smoothing:antialiased;
}

body::before{
  content:"";
  position:fixed;
  inset:0 0 auto;
  height:1px;
  background:linear-gradient(
    90deg,
    transparent,
    rgba(164,135,86,.55),
    transparent
  );
  pointer-events:none;
  z-index:100;
}

.shell,
.g1-shell{
  width:min(1240px, calc(100% - 48px));
  margin-inline:auto;
}

nav,
.topbar,
.g1-nav{
  background:rgba(245,246,242,.86);
  backdrop-filter:blur(18px);
  border-bottom:1px solid rgba(16,36,30,.07);
}

.brand,
.g1-brand{
  color:var(--qc-ink);
  font-weight:760;
  letter-spacing:.12em;
  text-decoration:none;
}

.card,
.g1-card,
.mission,
.panel{
  background:rgba(255,255,255,.92);
  border:1px solid var(--qc-line);
  border-radius:var(--qc-radius);
  box-shadow:var(--qc-shadow);
}

.card,
.g1-card{
  padding:clamp(24px,3vw,42px);
}

h1{
  max-width:18ch;
  margin-block:.25em .35em;
  font-size:clamp(2.65rem,6vw,5.8rem);
  line-height:.94;
  letter-spacing:-.055em;
  font-weight:690;
}

h2{
  letter-spacing:-.035em;
  line-height:1.08;
}

h3{
  letter-spacing:-.018em;
}

p{
  text-wrap:pretty;
}

.muted,
.g1-muted{
  color:var(--qc-muted);
}

.kicker,
.eyebrow,
.section-label{
  color:var(--qc-gold);
  font-size:.7rem;
  font-weight:760;
  letter-spacing:.16em;
  text-transform:uppercase;
}

button,
.button,
.cta,
.g1-button{
  min-height:48px;
  border-radius:999px;
  font-weight:680;
  letter-spacing:-.01em;
}

.cta,
.g1-button:not(.secondary){
  background:var(--qc-deep);
  color:#fff;
  border:1px solid var(--qc-deep);
}

.secondary,
button.secondary{
  background:transparent;
  color:var(--qc-ink);
  border:1px solid var(--qc-line);
}

input,
textarea,
select{
  border:1px solid var(--qc-line);
  border-radius:16px;
  background:#fff;
  color:var(--qc-ink);
  min-height:50px;
}

textarea{
  min-height:140px;
}

.mission-head{
  align-items:flex-start;
}

.mission-metrics{
  gap:1px;
  overflow:hidden;
  border:1px solid var(--qc-line);
  border-radius:20px;
  background:var(--qc-line);
}

.mission-metrics > *{
  background:var(--qc-paper);
  padding:22px;
}

.pill,
.status,
.g1-status{
  border-radius:999px;
  font-size:.72rem;
  font-weight:730;
  letter-spacing:.06em;
}

#deliverables{
  display:grid;
  gap:14px;
}

.plain-copy{
  display:block;
  width:100%;
  max-width:68ch;
  margin:0;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  word-break:normal;
  font:inherit;
  font-size:clamp(1rem,1.25vw,1.13rem);
  line-height:1.78;
  color:var(--qc-ink);
}

#contentBody,
#singleView,
#compareView,
#compareEn,
#compareAr,
.content-body,
.copy-panel,
.compare-pane{
  min-width:0;
  max-width:100%;
  overflow-wrap:anywhere;
}

.visual-panel{
  overflow:hidden;
  border:1px solid var(--qc-line);
  border-radius:28px;
  background:var(--qc-soft);
}

.visual-panel img,
.qc-real-visual{
  display:block;
  width:100%;
  max-width:100%;
  height:auto;
  object-fit:contain;
}

.qc-review-grid{
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(360px,.92fr);
  gap:clamp(24px,4vw,64px);
  align-items:start;
}

.qc-proof{
  margin-top:24px;
  padding-top:18px;
  border-top:1px solid var(--qc-line);
  color:var(--qc-muted);
  font-size:.82rem;
}

html[dir="rtl"] body{
  font-family:
    "DIN Next Arabic",
    "IBM Plex Sans Arabic",
    "Noto Sans Arabic",
    Tahoma,
    Arial,
    sans-serif;
}

html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3{
  letter-spacing:0;
  line-height:1.26;
}

html[dir="rtl"] .kicker,
html[dir="rtl"] .eyebrow,
html[dir="rtl"] .section-label{
  letter-spacing:0;
  text-transform:none;
}

html[dir="rtl"] .plain-copy{
  max-width:62ch;
  line-height:1.95;
  letter-spacing:0;
  text-align:start;
}

html[dir="rtl"] .qc-review-grid{
  direction:rtl;
}

html[dir="rtl"] input,
html[dir="rtl"] textarea{
  text-align:right;
}

@media (max-width:820px){
  .shell,
  .g1-shell{
    width:min(100% - 28px,1240px);
  }

  h1{
    font-size:clamp(2.35rem,12vw,4rem);
  }

  .qc-review-grid{
    grid-template-columns:1fr;
  }

  .card,
  .g1-card{
    padding:22px;
    border-radius:22px;
  }
}

@media (prefers-reduced-motion:reduce){
  *,
  *::before,
  *::after{
    scroll-behavior:auto !important;
    transition-duration:.01ms !important;
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
  }
}