/* TapRabt design tokens — per C03 */
:root {
  /* brand */
  --brand-primary: #1F7A4D;
  --brand-primary-dark: #16593A;
  --brand-primary-light: #E8F3EC;
  --brand-primary-50: #F4F8F5;
  --accent-gold: #C9A227;
  --accent-gold-light: #F4E9C2;

  /* semantic */
  --success: #137333; --success-light: #E6F4EA;
  --warning: #B85C00; --warning-light: #FFF1E6;
  --error: #B3261E;   --error-light: #FCE8E6;
  --info: #1A4D80;    --info-light: #EAF4FB;

  /* neutrals */
  --text-primary: #1A1A1A;
  --text-secondary: #595959;
  --text-tertiary: #8C8C8C;
  --text-disabled: #BFBFBF;
  --text-inverse: #FFFFFF;
  --surface: #FFFFFF;
  --surface-alt: #F4F8F5;
  --surface-raised: #FAFAFA;
  --surface-overlay: rgba(0,0,0,0.5);
  --border: #BFBFBF;
  --border-subtle: #E5E5E5;
  --border-strong: #8C8C8C;

  /* shadows (brand-tinted) */
  --shadow-sm: 0 1px 2px 0 rgba(31,122,77,0.05);
  --shadow-md: 0 4px 8px -2px rgba(31,122,77,0.08), 0 2px 4px -2px rgba(31,122,77,0.06);
  --shadow-lg: 0 12px 24px -8px rgba(31,122,77,0.10), 0 4px 8px -4px rgba(31,122,77,0.06);

  /* radii */
  --r-sm: 4px; --r-md: 6px; --r-lg: 8px; --r-xl: 12px; --r-2xl: 16px; --r-full: 9999px;

  /* fonts */
  --font-default: 'IBM Plex Sans Arabic', 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-arabic: 'IBM Plex Sans Arabic', Tahoma, 'Geeza Pro', 'Arabic UI Text', sans-serif;
  --font-latin: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'IBM Plex Mono', 'SF Mono', 'Cascadia Code', Consolas, monospace;
}

/* base */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { font-size: 16px; }
body {
  font-family: var(--font-default);
  color: var(--text-primary);
  background: var(--surface-raised);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
[lang="ar"] { font-family: var(--font-arabic); line-height: 1.6; }

a { color: var(--brand-primary); text-decoration: none; }
a:hover { color: var(--brand-primary-dark); }

button { font-family: inherit; cursor: pointer; }

/* logical icon mirror */
[dir="rtl"] .icon-mirror { transform: scaleX(-1); }

/* focus */
:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: 2px;
  border-radius: 4px;
}

/* utility */
.mono { font-family: var(--font-mono); }
.eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand-primary);
  font-weight: 500;
}
[lang="ar"] .eyebrow { letter-spacing: 0; text-transform: none; }

/* ============================================================
   "What is a digital business card?" — 3 design options
   ============================================================ */

/* ---- Option A: Paper vs digital comparison ---- */
.vs-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: stretch;
}
@media (min-width: 768px) {
  .vs-grid { grid-template-columns: 1fr auto 1fr; gap: 0; }
}
.vs-col {
  border-radius: var(--r-2xl);
  padding: 36px 32px;
  background: var(--surface);
  border: 1px solid var(--border-subtle);
}
.vs-paper {
  background: var(--surface);
  color: var(--text-secondary);
}
.vs-digital {
  background: linear-gradient(160deg, var(--brand-primary) 0%, var(--brand-primary-dark) 100%);
  color: var(--text-inverse);
  border-color: transparent;
  box-shadow: var(--shadow-md);
}
.vs-head { margin-bottom: 24px; }
.vs-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  display: block;
  margin-bottom: 8px;
}
.vs-digital .vs-eyebrow { color: var(--accent-gold-light); }
[lang="ar"] .vs-eyebrow { letter-spacing: 0; text-transform: none; }
[dir="rtl"] .vs-divider span { font-family: var(--font-arabic); }
.vs-head h4 {
  margin: 0;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}
.vs-digital .vs-head h4 { color: var(--text-inverse); }
.vs-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.vs-list li {
  position: relative;
  padding-inline-start: 32px;
  font-size: 15px;
  line-height: 1.5;
}
.vs-list li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 2px;
  width: 20px; height: 20px;
  border-radius: var(--r-full);
  display: inline-block;
}
.vs-list li.bad::before {
  background: #FCE8E6;
  /* X icon */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B3261E' stroke-width='3' stroke-linecap='round'><path d='M6 6l12 12M18 6L6 18'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 11px;
}
.vs-list li.good::before {
  background: var(--accent-gold);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316593A' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='4 12 10 18 20 6'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 11px;
}
.vs-divider {
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--text-tertiary);
  padding: 8px 0;
}
.vs-divider span {
  width: 48px; height: 48px;
  border-radius: var(--r-full);
  display: grid;
  place-items: center;
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-sm);
}

[dir="rtl"] .qa-a { padding: 0 0 24px 56px; }