/* Dive2SSI — Theme v2 ("dive2ssiv2")
 * Dark navy / cream editorial look, Georgia serif + Inter.
 * Targets the SAME HTML classes as app.css so both themes share one engine. */
@font-face { font-family:'Inter'; font-style:normal; font-weight:400; font-display:swap; src:url('fonts/inter-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-style:normal; font-weight:600; font-display:swap; src:url('fonts/inter-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-style:normal; font-weight:700; font-display:swap; src:url('fonts/inter-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family:'Amiri'; font-style:normal; font-weight:400; font-display:swap; src:url('fonts/amiri-arabic-400-normal.woff2') format('woff2'); }
@font-face { font-family:'Amiri'; font-style:normal; font-weight:700; font-display:swap; src:url('fonts/amiri-arabic-700-normal.woff2') format('woff2'); }
@font-face { font-family:'Cairo'; font-style:normal; font-weight:400; font-display:swap; src:url('fonts/cairo-arabic-400-normal.woff2') format('woff2'); }
@font-face { font-family:'Cairo'; font-style:normal; font-weight:600; font-display:swap; src:url('fonts/cairo-arabic-600-normal.woff2') format('woff2'); }
@font-face { font-family:'Cairo'; font-style:normal; font-weight:700; font-display:swap; src:url('fonts/cairo-arabic-700-normal.woff2') format('woff2'); }

:root {
  --navy:#06141f;
  --navy-2:#0a1d29;
  --panel:#0e2431;
  --panel-2:#122b39;
  --line:#1d3947;
  --line-2:#26485a;
  --ink:#e7eef2;
  --muted:#94aab6;
  --cream:#f2e9d4;
  --cream-soft:#f7f2e6;
  --tan:#c9b686;
  --teal:#65d6d0;
  --teal-deep:#2f9d97;
  --ok:#54c9a5;
  --warn:#e0b070;
  --err:#ef8a7d;
  --radius:16px;
  --font-display:Georgia,'Times New Roman',serif;
  --font-body:'Inter',ui-sans-serif,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  margin:0; font-family:var(--font-body); font-size:16.5px; color:var(--ink); line-height:1.65;
  background:
    radial-gradient(1200px 620px at 50% -140px, rgba(101,214,208,0.16), transparent 60%),
    radial-gradient(900px 500px at 85% 8%, rgba(47,157,151,0.12), transparent 55%),
    linear-gradient(180deg, var(--navy) 0%, #05111a 100%);
  background-attachment:fixed;
}
a { color:var(--teal); }
code { background:var(--panel-2); border:1px solid var(--line); color:var(--cream-soft); padding:1px 7px; border-radius:6px; font-size:.9em; }
em { color:var(--cream-soft); font-style:italic; }

.site-header { padding:26px 22px 40px; }
.site-header .inner, main, .site-footer .inner { max-width:1080px; margin:0 auto; }
main { padding:10px 22px 70px; }
section { margin-bottom:44px; }

.logo-link { display:inline-block; margin-bottom:16px; }
.site-logo { height:58px; width:auto; display:block; filter:none; }

.wordmark { font-family:var(--font-body); letter-spacing:2px; font-size:.8rem; text-transform:uppercase; color:var(--muted); margin-bottom:16px; }
.wordmark a { color:var(--teal); text-decoration:none; }
.wordmark .sep { opacity:.5; margin:0 8px; }

h2 { font-family:var(--font-display); font-weight:400; font-size:1.9rem; letter-spacing:-.4px; color:var(--cream-soft); margin:0 0 16px; }
.d2s-muted { color:var(--muted); }

/* Hero */
.is-home .site-header { text-align:center; padding-bottom:20px; }
.is-home .logo-link { margin-bottom:22px; }
.eyebrow { text-transform:uppercase; letter-spacing:2.6px; font-size:.8rem; font-weight:600; color:var(--teal); margin:0 0 16px; }
.eyebrow::before { content:"● "; color:var(--teal); font-size:.7em; vertical-align:2px; }
.hero-title { margin:0 auto 18px; max-width:16ch; }
.hero-title span { display:block; font-family:var(--font-display); font-weight:400; font-size:clamp(2.6rem,7vw,4.6rem); line-height:1.03; letter-spacing:-1px; color:#fff; }
.hero-title .accent { color:var(--cream); }
.tagline { color:var(--muted); max-width:60ch; font-size:1.06rem; }
.is-home .tagline { margin:0 auto; }
.hero-cta { margin-top:26px; }

/* Buttons — cream pill */
.d2s-btn { border-radius:300px; padding:13px 28px; font-size:1rem; font-family:var(--font-body); font-weight:600; cursor:pointer; border:1px solid transparent; transition:transform .08s, background .15s, box-shadow .15s; }
.d2s-btn:active { transform:scale(.98); }
.d2s-btn-primary { background:var(--cream); color:#10222b; box-shadow:0 6px 24px rgba(242,233,212,.14); }
.d2s-btn-primary:hover { background:#fff; }
.d2s-btn-primary:disabled { background:#5c6b72; color:#26333a; cursor:not-allowed; box-shadow:none; }
.d2s-btn-ghost { background:transparent; border-color:var(--line-2); color:var(--ink); }
.d2s-btn-ghost:hover { background:var(--panel-2); border-color:var(--teal-deep); }
.d2s-btn-ghost:disabled { opacity:.45; cursor:not-allowed; }
.d2s-btn-link { text-decoration:none; display:inline-block; }

/* Hub grid */
.hub-grid { display:grid; gap:16px; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); }
.hub-card {
  background:linear-gradient(180deg, var(--panel), var(--navy-2));
  border:1px solid var(--line); border-radius:var(--radius); padding:20px;
  text-decoration:none; color:var(--ink); display:block;
  transition:transform .12s, border-color .12s, box-shadow .12s;
}
.hub-card:hover { transform:translateY(-3px); border-color:var(--teal-deep); box-shadow:0 12px 34px rgba(0,0,0,.35); }
.hub-card h3 { font-family:var(--font-display); font-weight:400; font-size:1.4rem; color:#fff; margin:14px 0 4px; }
.hub-card p { margin:0; font-size:.92rem; color:var(--muted); }
.hub-card-foot { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:14px; flex-wrap:wrap; }
.badge { display:inline-block; font-size:.74rem; font-weight:600; letter-spacing:.4px; background:rgba(101,214,208,.12); color:var(--teal); border-radius:300px; padding:3px 12px; }
.badge.native { background:rgba(84,201,165,.14); color:var(--ok); }
.fmt-chips { font-size:.74rem; letter-spacing:.6px; color:var(--muted); font-weight:600; text-transform:uppercase; }

/* Brand logo chips */
.brand-logo { display:inline-flex; align-items:center; justify-content:center; height:54px; min-width:120px; padding:8px 14px; border-radius:12px; vertical-align:middle; }
.brand-logo img { max-height:32px; max-width:150px; width:auto; object-fit:contain; display:block; }
.brand-logo.tone-light { background:#f4f6f7; }
.brand-logo.tone-dark { background:#0b1a24; border:1px solid var(--line); }
.brand-logo-text { font-family:var(--font-display); letter-spacing:1px; font-size:1.15rem; text-transform:uppercase; }
.brand-logo-text.tone-light { color:#10222b; }
.brand-logo-text.tone-dark { color:var(--cream); }
.site-header .brand-mark .brand-logo { height:44px; min-width:96px; }

/* How-it-works steps */
.how-grid { display:grid; gap:0; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); background:linear-gradient(180deg,var(--panel),var(--navy-2)); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.how-step { padding:24px; border-left:1px solid var(--line); }
.how-step:first-child { border-left:0; }
.how-step .n { font-family:var(--font-display); font-size:1.9rem; color:var(--teal-deep); display:block; margin-bottom:6px; }
.how-step strong { font-family:var(--font-body); font-weight:600; font-size:1.05rem; color:#fff; display:block; margin-bottom:6px; }
.how-step .d2s-muted { color:var(--muted); font-size:.92rem; }

/* Stat band */
.stat-band { display:flex; gap:34px; align-items:center; flex-wrap:wrap; background:linear-gradient(160deg,var(--panel),var(--navy-2)); border:1px solid var(--line); border-radius:var(--radius); padding:38px 36px; }
.stat-figure { font-family:var(--font-display); font-size:clamp(3.6rem,11vw,7rem); line-height:.9; color:var(--cream); }
.stat-copy { flex:1 1 360px; }
.stat-copy h2 { color:#fff; margin:4px 0 10px; font-size:2.1rem; }
.stat-copy .eyebrow { color:var(--teal); }

/* Panels / callouts / FAQ */
.panel { background:linear-gradient(180deg,var(--panel),var(--navy-2)); border:1px solid var(--line); border-radius:var(--radius); padding:24px 26px; }
.panel + .panel { margin-top:18px; }
.panel h2 { margin-top:0; }
.callout { border-left:3px solid var(--teal-deep); background:var(--panel-2); border-radius:10px; padding:14px 18px; margin:14px 0; }
.callout.good { border-left-color:var(--ok); }
.callout.warn { border-left-color:var(--warn); }
.steps { padding-left:1.3em; margin:10px 0; }
.steps li { margin:7px 0; }
details.faq { background:linear-gradient(180deg,var(--panel),var(--navy-2)); border:1px solid var(--line); border-radius:12px; padding:14px 18px; margin:10px 0; }
details.faq summary { cursor:pointer; font-weight:600; color:var(--cream-soft); }
details.faq summary:hover { color:var(--teal); }
details.faq p { margin:10px 0 2px; color:var(--muted); }
.cta-panel { text-align:left; }

/* Dropzone */
.d2s-dropzone { border:2px dashed var(--teal-deep); border-radius:var(--radius); background:var(--panel-2); padding:44px 22px; text-align:center; cursor:pointer; transition:background .15s,border-color .15s; outline:none; }
.d2s-dropzone:hover, .d2s-dropzone:focus-visible, .d2s-dragover { background:#14313f; border-color:var(--teal); }
.d2s-dropzone .big { font-size:2.3rem; display:block; margin-bottom:8px; }
.d2s-dropzone strong { color:#fff; font-size:1.12rem; }
.d2s-formats { font-size:.94rem; color:var(--muted); margin-top:8px; }

/* Options / form fields */
.d2s-options { display:flex; flex-wrap:wrap; gap:14px 22px; align-items:flex-end; margin-top:4px; }
.d2s-field { display:flex; flex-direction:column; gap:5px; font-size:.92rem; color:var(--muted); }
.d2s-field input, .d2s-field select { padding:9px 12px; border:1px solid var(--line-2); border-radius:10px; font-size:1rem; font-family:var(--font-body); background:#0b1c26; color:var(--ink); min-width:155px; }
.d2s-field input:focus, .d2s-field select:focus { outline:2px solid rgba(101,214,208,.4); border-color:var(--teal); }
#d2s-advanced-toggle { background:none; border:none; color:var(--teal); cursor:pointer; padding:0; font-size:.98rem; font-family:var(--font-body); text-decoration:underline; }
#d2s-advanced { margin-top:12px; }
.mt0 { margin-top:0; }
.adv-toggle-row { margin:14px 0 0; }
.cta-row { margin-top:16px; }

/* Results table */
.d2s-summary-main { margin:8px 0; font-size:1.05rem; color:var(--ink); }
.d2s-error { color:var(--err); margin:4px 0; font-size:.95rem; }
.d2s-table-wrap { overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius); background:var(--navy-2); }
.d2s-table { border-collapse:collapse; width:100%; font-size:.92rem; min-width:920px; }
.d2s-table th { text-align:left; padding:12px 9px; background:var(--panel-2); color:var(--cream-soft); font-weight:600; position:sticky; top:0; white-space:nowrap; }
.d2s-table td { padding:7px 9px; border-top:1px solid var(--line); color:var(--ink); }
.d2s-table tbody tr:nth-child(even) { background:rgba(255,255,255,.02); }
.d2s-in { border:1px solid var(--line-2); border-radius:8px; padding:6px 7px; font-size:.9rem; font-family:var(--font-body); background:#0b1c26; color:var(--ink); }
.d2s-in-num { width:78px; } .d2s-in-dt { width:182px; } .d2s-in-type { width:132px; }
.d2s-notes { font-size:.85rem; color:var(--muted); max-width:230px; }
.d2s-genbar { display:flex; gap:12px; margin-top:18px; flex-wrap:wrap; }

/* QR gallery — cards stay light so QR codes scan reliably */
.d2s-gallery-head { margin-top:34px; }
.d2s-gallery-tools { display:flex; gap:12px; margin:12px 0 4px; flex-wrap:wrap; }
.d2s-grid { display:grid; gap:18px; grid-template-columns:repeat(auto-fill,minmax(255px,1fr)); margin-top:16px; }
.d2s-card { background:var(--cream-soft); border:1px solid var(--tan); border-radius:var(--radius); padding:16px 14px; text-align:center; transition:opacity .15s; }
.d2s-card canvas { max-width:100%; height:auto; cursor:zoom-in; border-radius:6px; }
.d2s-card-title { font-family:var(--font-display); color:#12222b; margin-top:8px; font-size:1.05rem; }
.d2s-card-meta { color:#5b6b73; font-size:.9rem; margin-top:3px; min-height:1.2em; }
.d2s-scanned-label { display:inline-flex; align-items:center; gap:7px; margin-top:10px; font-size:.95rem; color:#5b6b73; cursor:pointer; }
.d2s-scanned-cb { accent-color:var(--teal-deep); width:16px; height:16px; }
.d2s-done { opacity:.4; }
.d2s-done canvas { filter:grayscale(1); }

/* Focus modal */
.d2s-modal { position:fixed; inset:0; z-index:50; background:rgba(3,12,18,.86); display:flex; align-items:center; justify-content:center; padding:18px; }
.d2s-modal[hidden] { display:none; }
.d2s-noscroll { overflow:hidden; }
.d2s-modal-box { background:var(--cream-soft); border-radius:20px; padding:26px 28px 20px; max-width:560px; width:100%; text-align:center; position:relative; box-shadow:0 18px 60px rgba(0,0,0,.5); color:#12222b; }
.d2s-modal-close { position:absolute; top:10px; right:16px; background:none; border:none; font-size:2rem; line-height:1; color:#7a8790; cursor:pointer; }
.d2s-modal-close:hover { color:var(--err); }
.d2s-modal-counter { font-size:.95rem; color:#5b6b73; margin-bottom:6px; }
.d2s-modal-qr { max-width:100%; height:auto; }
.d2s-modal-title { font-family:var(--font-display); font-size:1.35rem; color:#12222b; margin-top:8px; }
.d2s-modal-meta { color:#5b6b73; margin-top:2px; }
.d2s-modal-nav { display:flex; gap:10px; justify-content:center; margin-top:16px; flex-wrap:wrap; }
.d2s-modal-nav .d2s-btn-ghost { border-color:#c9bfa6; color:#12222b; }
.d2s-modal-nav .d2s-btn-ghost:hover { background:#efe7d2; }
.d2s-modal-hint { font-size:.82rem; color:#7a8790; margin:14px 0 0; }

/* Footer */
.site-footer { border-top:1px solid var(--line); color:var(--muted); padding:30px 22px; font-size:.9rem; margin-top:20px; }
.site-footer a { color:var(--teal); }
.site-footer p { margin:7px 0; }
.foot-mark { font-family:var(--font-body); letter-spacing:2px; text-transform:uppercase; font-size:.82rem; color:var(--cream-soft); margin-bottom:12px; }

@media print {
  body { background:#fff; }
  .site-header, .site-footer, .panel, .d2s-dropzone, #d2s-results, .d2s-gallery-tools, .d2s-scanned-label, .d2s-modal, .noprint { display:none !important; }
  main { padding:0; max-width:none; }
  .d2s-gallery-head h2, .d2s-gallery-head p { display:none; }
  .d2s-grid { grid-template-columns:repeat(2,1fr); gap:8mm; }
  .d2s-card { border:1px solid #ccc; page-break-inside:avoid; }
  .d2s-done { opacity:1; } .d2s-done canvas { filter:none; }
}
@media (max-width:640px) { .d2s-options { flex-direction:column; align-items:stretch; } .how-step { border-left:0; border-top:1px solid var(--line); } }

/* ===== Arabic / RTL (v2) ===== */
html[lang="ar"] { --font-display:'Amiri',Georgia,serif; --font-body:'Cairo','Inter',sans-serif; }
html[lang="ar"] .eyebrow, html[lang="ar"] .wordmark, html[lang="ar"] .foot-mark, html[lang="ar"] .fmt-chips { letter-spacing:0; }
html[lang="ar"] .hero-title span { letter-spacing:0; line-height:1.15; }
[dir="rtl"] .callout { border-left:0; border-right:3px solid var(--teal-deep); }
[dir="rtl"] .callout.good { border-right-color:var(--ok); }
[dir="rtl"] .callout.warn { border-right-color:var(--warn); }
[dir="rtl"] .steps { padding-left:0; padding-right:1.3em; }
[dir="rtl"] .how-step { border-left:0; border-right:1px solid var(--line); }
[dir="rtl"] .how-step:first-child { border-right:0; }
[dir="rtl"] .d2s-table th, [dir="rtl"] .d2s-table td { text-align:right; }
@media (max-width:640px){ [dir="rtl"] .how-step { border-right:0; border-top:1px solid var(--line); } }
.lang-switch { display:inline-flex; gap:2px; margin-bottom:14px; font-family:var(--font-body); font-size:.82rem; }
.lang-switch a { text-decoration:none; padding:3px 10px; border-radius:300px; color:var(--teal); border:1px solid transparent; }
.lang-switch a.active { background:rgba(101,214,208,.14); color:var(--cream-soft); }
.lang-switch a:hover { color:var(--cream-soft); }
.is-home .lang-switch { justify-content:center; }

/* ===== Polish pass (v2): Arabic hero, headings, mobile cards, grid safety ===== */
.hero-title { text-wrap: balance; }
html[lang="ar"] .hero-title { max-width: 100%; }
html[lang="ar"] .hero-title span { font-size: clamp(2.1rem, 6.5vw, 3.8rem); font-weight: 700; }
html[lang="ar"] h2, html[lang="ar"] .d2s-card-title { font-weight: 700; }
.hub-grid { grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); }
.hub-card .brand-logo { width: 168px; max-width: 100%; }

@media (max-width: 560px) {
  .hub-card { display: grid; grid-template-columns: 108px 1fr; gap: 2px 14px; align-items: center; padding: 16px; }
  .hub-card .brand-logo { grid-row: 1 / span 2; width: 108px; min-width: 0; height: 50px; padding: 6px 8px; }
  .hub-card .brand-logo img { max-height: 26px; max-width: 90px; }
  .brand-logo-text { font-size: 0.85rem; letter-spacing: 0.5px; }
  .hub-card h3 { margin: 0; font-size: 1.2rem; }
  .hub-card p { font-size: 0.86rem; }
  .hub-card-foot { grid-column: 2; margin-top: 6px; }
  .stat-band { padding: 26px 22px; gap: 16px; }
  .site-logo { height: 48px; }
}

/* Overflow fixes from cross-device audit */
.brand-mark { display: inline-flex; align-items: center; gap: 12px; flex-wrap: wrap; row-gap: 8px; }
.d2s-field { max-width: 100%; min-width: 0; }
.d2s-field select, .d2s-field input { max-width: 100%; }