/* JorAcc public site — shared stylesheet.
   Palette, wordmark face (DM Serif Display), and figure face (DM Mono) are
   carried over from the product itself (src/app.html) for brand continuity.
   Arabic pages swap the two Latin faces for Cairo, the product's own
   Arabic UI face, and drop the serif treatment (no Arabic glyphs in DM
   Serif Display). Layout uses logical properties throughout; [dir="rtl"]
   overrides only the handful of things logical properties don't cover. */

:root{
  --bg:#f5f7fa; --surface:#ffffff; --surface2:#eef1f5; --surface3:#e4e8ee;
  --border:#d0d7de; --accent:#1a7f37; --accent2:#0969da; --accent3:#9a6700;
  --danger:#cf222e; --text:#1f2328; --text2:#57606a; --text3:#8b949e;
  --shadow: 0 1px 2px rgba(31,35,40,.06), 0 8px 24px rgba(31,35,40,.06);
  --maxw: 1120px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0d1117; --surface:#161b22; --surface2:#1c2330; --surface3:#21262d;
    --border:#30363d; --accent:#2ea043; --accent2:#388bfd; --accent3:#e3b341;
    --danger:#f85149; --text:#e6edf3; --text2:#8b949e; --text3:#6e7681;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.35);
    color-scheme: dark;
  }
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:'Outfit',sans-serif; font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
[dir="rtl"] body{ font-family:'Cairo',sans-serif; }
img{max-width:100%; display:block}
a{color:inherit}
.ltr{ unicode-bidi:isolate; direction:ltr; display:inline-block }
.figure{ font-family:'DM Mono',monospace; font-variant-numeric:tabular-nums }

h1,h2,h3{ font-family:'DM Serif Display',serif; font-weight:400; line-height:1.2; text-wrap:balance; margin:0 0 .4em }
[dir="rtl"] h1,[dir="rtl"] h2,[dir="rtl"] h3{ font-family:'Cairo',sans-serif; font-weight:800 }
h1{font-size:clamp(2rem,4vw,3rem)}
h2{font-size:clamp(1.5rem,2.6vw,2.1rem)}
h3{font-size:1.25rem}
p{margin:0 0 1em; max-width:65ch; color:var(--text2)}
[dir="rtl"] p{ max-width:none }
.lead{font-size:1.15rem; color:var(--text2); max-width:60ch}

.wrap{ max-width:var(--maxw); margin-inline:auto; padding-inline:20px }
.section{ padding-block:64px }
.section-tight{ padding-block:36px }

/* ── Header ─────────────────────────────────────────── */
.site-header{
  position:sticky; top:0; z-index:20; background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:blur(8px); border-block-end:1px solid var(--border);
}
.site-header .wrap{ display:flex; align-items:center; gap:20px; padding-block:14px }
.logo{ font-family:'DM Serif Display',serif; font-size:22px; color:var(--accent); text-decoration:none; white-space:nowrap }
[dir="rtl"] .logo{ font-family:'DM Serif Display',serif } /* brand mark stays Latin/serif even on Arabic pages */
.main-nav{ display:flex; gap:22px; margin-inline-start:auto; align-items:center; flex-wrap:wrap }
.main-nav a{ text-decoration:none; font-size:14px; font-weight:500; color:var(--text2) }
.main-nav a:hover, .main-nav a[aria-current="page"]{ color:var(--accent) }
.lang-switch{ display:flex; align-items:center; gap:6px; font-size:13px; }
.lang-switch a{ text-decoration:none; padding:4px 9px; border-radius:6px; color:var(--text2); border:1px solid transparent }
.lang-switch a[aria-current="true"]{ color:var(--text); background:var(--surface2); border-color:var(--border); font-weight:600 }
.lang-switch a:hover{ color:var(--accent) }

/* ── Access notice (public sign-up not yet open) ───────── */
.access-notice{
  background:color-mix(in srgb, var(--accent3) 12%, var(--surface));
  border-block-end:1px solid color-mix(in srgb, var(--accent3) 35%, var(--border));
  padding-block:10px;
}
.access-notice .wrap{ font-size:13.5px; color:var(--text2); text-align:center }
.access-notice strong{ color:var(--accent3) }
.access-notice a{ color:var(--accent2); font-weight:600 }

/* ── Buttons ────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; gap:8px; border-radius:8px; padding:11px 20px;
  font-family:inherit; font-size:14px; font-weight:600; text-decoration:none; border:1px solid transparent;
  cursor:pointer; transition:transform .12s ease, box-shadow .12s ease;
}
.btn-primary{ background:var(--accent); color:#fff }
.btn-primary:hover{ transform:translateY(-1px); box-shadow:0 6px 18px color-mix(in srgb, var(--accent) 35%, transparent) }
.btn-ghost{ background:transparent; border-color:var(--border); color:var(--text) }
.btn-ghost:hover{ background:var(--surface2) }
.btn-sm{ padding:8px 14px; font-size:13px }

/* ── Hero ───────────────────────────────────────────── */
.hero{ padding-block:72px 56px }
.hero .eyebrow{ font-family:'DM Mono',monospace; text-transform:uppercase; letter-spacing:.1em; font-size:12px; color:var(--accent); margin-bottom:14px; display:block }
[dir="rtl"] .hero .eyebrow{ font-family:'Cairo',sans-serif; letter-spacing:normal; font-weight:700 }
.hero-cta{ display:flex; gap:12px; margin-block-start:28px; flex-wrap:wrap }
.trust-line{ margin-block-start:18px; font-size:13px; color:var(--text3) }

/* ── Grids / cards ──────────────────────────────────── */
.grid{ display:grid; gap:20px }
.grid-3{ grid-template-columns:repeat(3,1fr) }
.grid-2{ grid-template-columns:repeat(2,1fr) }
@media (max-width:820px){ .grid-3, .grid-2{ grid-template-columns:1fr } }
.card{
  background:var(--surface); border:1px solid var(--border); border-radius:14px;
  padding:24px; box-shadow:var(--shadow);
}
.card h3{ margin-bottom:8px; font-size:18px }
.card .icon{ font-size:26px; margin-bottom:12px; display:block }
.card p{ margin-bottom:0; font-size:14.5px }

/* ── Pricing ────────────────────────────────────────── */
.price-card{ display:flex; flex-direction:column; gap:14px }
.price-card.featured{ border-color:var(--accent); box-shadow:0 0 0 2px color-mix(in srgb, var(--accent) 30%, transparent), var(--shadow) }
.price-tag{ display:flex; align-items:baseline; gap:8px; margin-block:6px }
.price-amount{ font-family:'DM Mono',monospace; font-size:2.1rem; font-weight:700; color:var(--text) }
.price-period{ color:var(--text3); font-size:13px }
.price-list{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:9px; font-size:14px; color:var(--text2) }
.price-list li{ display:flex; gap:8px; align-items:flex-start }
.price-list li::before{ content:"✓"; color:var(--accent); font-weight:700; flex:none }
.price-note{ background:var(--surface2); border:1px solid var(--border); border-radius:10px; padding:14px 16px; font-size:13.5px; color:var(--text2) }

/* ── FAQ ────────────────────────────────────────────── */
.faq-item{ border-block-end:1px solid var(--border); padding-block:18px }
.faq-item h3{ font-family:inherit; font-weight:700; font-size:16px; margin-bottom:8px; color:var(--text) }
[dir="rtl"] .faq-item h3{ font-weight:800 }

/* ── Table (terms/glossary-style) ──────────────────── */
table.plain{ width:100%; border-collapse:collapse; font-size:14px }
table.plain th, table.plain td{ text-align:start; padding:10px 12px; border-block-end:1px solid var(--border) }
table.plain th{ color:var(--text2); font-weight:600; font-size:12.5px; text-transform:uppercase; letter-spacing:.05em }
[dir="rtl"] table.plain th{ letter-spacing:normal }

/* ── Notice / draft banner ──────────────────────────── */
.notice{
  display:flex; gap:12px; align-items:flex-start; background:color-mix(in srgb, var(--accent3) 14%, var(--surface));
  border:1px solid color-mix(in srgb, var(--accent3) 45%, var(--border)); border-radius:10px;
  padding:14px 18px; font-size:14px; color:var(--text); margin-block-end:28px;
}
.notice strong{ display:block; margin-bottom:3px }

/* ── Unresolved legal-draft placeholder (owner decision needed) ────── */
.tbd{
  background:color-mix(in srgb, #f5a623 22%, transparent);
  border-bottom:1px dashed color-mix(in srgb, #f5a623 70%, var(--text));
  padding:0 3px; border-radius:2px; font-style:normal;
}

/* ── Footer ─────────────────────────────────────────── */
.site-footer{ border-block-start:1px solid var(--border); padding-block:40px; margin-block-start:40px }
.footer-grid{ display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap }
.footer-col h4{ font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--text3); margin-bottom:12px }
[dir="rtl"] .footer-col h4{ letter-spacing:normal }
.footer-col ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px }
.footer-col a{ text-decoration:none; font-size:14px; color:var(--text2) }
.footer-col a:hover{ color:var(--accent) }
.footer-bottom{ margin-block-start:32px; padding-block-start:20px; border-block-start:1px solid var(--border); font-size:12.5px; color:var(--text3); display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap }

/* ── Accessibility / focus ──────────────────────────── */
a:focus-visible, button:focus-visible{ outline:2px solid var(--accent2); outline-offset:2px }
.skip-link{ position:absolute; inset-inline-start:8px; top:-48px; background:var(--accent); color:#fff; padding:10px 16px; border-radius:8px; text-decoration:none; z-index:100; transition:top .15s }
.skip-link:focus{ top:8px }

@media (max-width:600px){
  .site-header .wrap{ flex-wrap:wrap; row-gap:10px }
  .main-nav{ order:3; width:100%; margin-inline-start:0; justify-content:space-between; gap:14px }
  .footer-grid{ flex-direction:column }
}