/* صياغة — public site (home, pricing, legal pages).
   Loaded after the sales stylesheets (csp-refactor/pricing-inline-*.css) and reuses their
   [data-mode][data-theme] tokens: --bg --bg2 --bg3 --card --border --border2 --gold --gold-light
   --gold-glow --gold-glow-strong --t1 --t2 --t3. This file only adds what the home page needs
   (document examples, «أسلوبي» twins, masking, section links) and the legal-page mapping. */

/* The sales page asks for Cairo (not bundled) and only in the dark gold theme; name the fallback stack
   once for every theme and mode so the typeface never changes with the colour. Documents keep Naskh. */
[data-mode][data-theme]{--font:'Cairo',system-ui,-apple-system,'Segoe UI',Tahoma,'Noto Sans Arabic',sans-serif;--doc-font:'Noto Naskh Arabic','Traditional Arabic',serif;--paper:#f6f1e4;--paper-text:#25211a;--paper-muted:#5a5243;--paper-accent:#7a5b14;--paper-line:#dccfb4;--paper-mark:rgba(201,162,39,.28)}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;min-width:320px}
.skip-link{position:fixed;z-index:100;top:8px;right:8px;min-height:44px;padding:9px 16px;border-radius:10px;background:var(--gold);color:#080a10;transform:translateY(-150%);text-decoration:none;font-weight:800}
.skip-link:focus{transform:none}
a:focus-visible,button:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid var(--gold-light);outline-offset:3px}

/* ── header: the sales navbar, sticky, with section links on wide screens ── */
.navbar{position:sticky;top:0;z-index:30;border-bottom:1px solid var(--border);background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.navbar .nav-logo{text-decoration:none}
.nav-links{display:flex;align-items:center;gap:2px;margin-inline:auto;min-width:0}
.nav-links a{min-height:44px;display:inline-flex;align-items:center;padding:0 12px;border-radius:10px;color:var(--t2);font-size:14px;font-weight:700;text-decoration:none;white-space:nowrap}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--gold-light);background:var(--gold-glow)}
.navbar .nav-actions a.btn{text-decoration:none}
/* the compact sign-in shown on phones only; the full «تسجيل الدخول» inside .nav-actions is hidden there by the sales sheets */
.navbar .btn.nav-login-sm{display:none}
@media(max-width:920px){.nav-links{display:none}}
/* phones: one row — logo, then the mode button (icon only), the colour select and the gold button.
   The sales sheets wrap the colour control onto its own row and hide it under 620px; both are undone here. */
@media(max-width:620px){
  .navbar{flex-wrap:nowrap!important;gap:8px!important;padding:10px 14px!important}
  .navbar .brand-mark{width:30px!important;height:30px!important}
  .navbar .brand-text{font-size:20px!important}
  .navbar .nav-actions{gap:6px!important;flex:0 0 auto;flex-wrap:nowrap!important;margin-right:0!important;max-width:none!important}
  .navbar .btn.nav-login-sm{display:inline-flex!important;width:auto!important;margin-inline-start:auto;min-height:32px;padding:7px 10px!important;font-size:12px!important;border-radius:10px!important}
  .navbar .theme-ctrl{display:flex!important;flex-direction:row!important;flex-wrap:nowrap!important;order:0!important;width:auto!important;flex:0 0 auto;padding:3px!important;gap:4px!important;border-radius:12px!important}
  .navbar .theme-btn{min-width:34px!important;width:34px!important;height:32px!important;padding:0!important;gap:0!important}
  .navbar .theme-btn .sales-mode-text{display:none}
  .navbar .theme-btn .sales-mode-icon{width:20px;height:20px}
  .navbar .theme-select{max-width:68px!important;min-height:32px!important;padding:3px 4px!important;font-size:11px!important}
  .navbar .btn-gold{padding:8px 10px!important;font-size:12px!important}
}
/* signed in (QA F8): no compact «دخول»; the account menu shows its initial only on phones */
body.siy-signed-in .navbar .btn.nav-login-sm{display:none!important}
.navbar .nav-actions{min-width:0}
@media(max-width:620px){
  body.siy-signed-in .navbar .nav-actions{margin-inline-start:auto}
  .navbar .user-menu{padding:4px!important;gap:4px!important}
  .navbar .user-menu .nav-user-name{display:none}
}
@media(max-width:380px){.navbar .theme-select{max-width:54px!important}.navbar .btn-gold,.navbar .btn.nav-login-sm{padding:7px 8px!important}}
@media(max-width:345px){.navbar .theme-select{display:none!important}}

/* ── hero ── */
.siy-home .siy-pricing-hero{padding-bottom:40px}
.siy-pricing-hero h1 em{font-style:normal;color:var(--gold-light)}
.siy-pricing-trust{max-width:980px;margin-inline:auto}
.siy-pricing-trust span{display:flex;align-items:center;justify-content:center;text-align:center;line-height:1.6}
.siy-pricing-actions a.btn{text-decoration:none}

/* ── section headings: the sales title block, slightly wider lead ── */
.siy-pricing-title p{max-width:720px}
.siy-note{margin:16px auto 0;max-width:760px;text-align:center;color:var(--t2);font-size:14px;line-height:1.8}
.siy-note a{color:var(--gold-light);text-decoration:underline;text-underline-offset:3px}

/* ── the memo example: a paper document on the glowing stage ── */
.siy-stage{margin:0}
.siy-doc{position:relative;max-width:760px;margin:0 auto;padding:30px 34px 26px;border-radius:8px;background:var(--paper);color:var(--paper-text);font-family:var(--doc-font);font-size:15.5px;line-height:2;text-align:right;box-shadow:0 30px 80px rgba(0,0,0,.34),0 0 0 1px rgba(0,0,0,.05)}
.siy-doc::before{content:"";position:absolute;inset:10px;border:1px solid var(--paper-line);border-radius:4px;pointer-events:none}
.siy-doc p{margin:0 0 6px}
.siy-doc-row{display:flex;justify-content:space-between;gap:14px;font-weight:700}
.siy-doc-subject{font-weight:700}
.siy-doc-h{margin:14px 0 2px!important;color:var(--paper-accent);font-weight:700}
.siy-doc-sign{margin-top:18px!important;color:var(--paper-muted)}
.siy-doc-sign b{display:block;color:var(--paper-text)}
.siy-doc mark{background:var(--paper-mark);color:inherit;padding:0 5px;border-radius:4px;box-decoration-break:clone;-webkit-box-decoration-break:clone;font-weight:700}
.siy-doc-badge{position:absolute;z-index:1;top:-15px;right:22px;padding:6px 13px;border-radius:999px;background:linear-gradient(135deg,var(--gold-light),#e2c55a);color:#080a10;font-family:var(--font);font-size:12px;font-weight:800;box-shadow:0 8px 24px var(--gold-glow-strong)}
.siy-doc-sm{max-width:none;padding:20px 20px 16px;font-size:14px;line-height:1.95}
.siy-doc.is-new{box-shadow:0 0 0 2px color-mix(in srgb,var(--gold-light) 65%,transparent),0 30px 80px rgba(0,0,0,.34)}

/* ── «أسلوبي»: his memo beside the new draft, sharing the highlighted phrases ── */
.siy-twins{display:grid;grid-template-columns:1fr 56px 1fr;gap:14px;align-items:center}
.siy-twins figure{margin:0;min-width:0}
.siy-twins figcaption{margin:0 0 8px;color:var(--t2);font-size:13px;font-weight:800;text-align:center}
.siy-twins figure:last-child figcaption{color:var(--gold-light)}
.siy-twins-arrow{width:48px;height:48px;margin:auto;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,var(--gold-light),var(--gold));color:#080a10;box-shadow:0 10px 26px var(--gold-glow-strong)}
.siy-twins-arrow svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}

/* ── client confidentiality: what he writes vs what the model receives ── */
.siy-mask{display:grid;grid-template-columns:1fr 56px 1fr;gap:14px;align-items:center}
.siy-mask-card{min-width:0;background:var(--card);border:1px solid var(--border);border-radius:18px;padding:20px 22px;color:var(--t1);font-size:15.5px;line-height:2.15}
.siy-mask-card.is-out{border-color:color-mix(in srgb,var(--gold-light) 50%,var(--border));background:linear-gradient(145deg,var(--gold-glow),transparent 55%),var(--card)}
.siy-mask-card h3{margin:0 0 8px;font-size:13.5px;font-weight:800;color:var(--t2)}
.siy-mask-card.is-out h3{color:var(--gold-light)}
.siy-mask-card p{margin:0}
.siy-mask mark{padding:1px 8px;border-radius:8px;white-space:nowrap;font-weight:700;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.siy-real{background:rgba(248,113,113,.14);border:1px solid rgba(248,113,113,.42);color:var(--t1)}
.siy-token{background:var(--gold-glow);border:1px solid color-mix(in srgb,var(--gold-light) 50%,transparent);color:var(--gold-light)}
[data-mode="light"] .siy-real{background:rgba(220,38,38,.07);border-color:rgba(220,38,38,.35)}

/* ── the memo stage sits on the section's own padding; the plan section keeps the sales layout ── */
.siy-pricing-card.featured h3{color:var(--gold-light)}

/* ── footer: the sales footer, static links; the legal pages' link group flows inside .footer-meta ── */
.footer .nav-logo{text-decoration:none}
.footer-links a{color:var(--t2);text-decoration:none}
.footer-legal{display:contents}
.footer-meta .footer-login{appearance:none;-webkit-appearance:none;background:none;border:0;margin:0;padding:4px 2px;font:inherit;color:var(--gold-light);cursor:pointer;display:inline-flex;align-items:center;min-height:44px}
.footer-meta .footer-login:hover{text-decoration:underline}
/* light mode: the sales --gold-light reads 2.7–3.2:1; the darker --gold3 token keeps these small links above 4.5:1 */
[data-mode="light"] .footer-meta a,[data-mode="light"] .footer-meta .footer-login,[data-mode="light"] .siy-note a,[data-mode="light"] .siy-mask-card.is-out h3{color:var(--gold3)}
[data-mode="light"][data-theme="gold"] .footer-meta a,[data-mode="light"][data-theme="gold"] .footer-meta .footer-login,[data-mode="light"][data-theme="gold"] .siy-note a,[data-mode="light"][data-theme="gold"] .siy-mask-card.is-out h3{color:#7a5b14}

/* ── legal pages: legal.css reads the old token names; map them onto the sales tokens ── */
.legal-page{--surface:var(--bg2);--muted:var(--t2);--line:var(--border);--line-strong:var(--border2);--text:var(--t1);--quiet:var(--t2);--gold-soft:var(--gold-glow)}
.legal-page body,body.legal-page{background:var(--bg);color:var(--t1);font-family:var(--font)}
/* legal links in the light gold theme: the sales gold (#a08028) is 3.5:1 on the page; the other light themes already pass */
[data-mode="light"][data-theme="gold"] body.legal-page{--gold:#7a5b14}
body.legal-page .legal-main{font-family:var(--font)}
/* shorter lines on the legal pages: about 20 Arabic words per line was tiring to read (36em is about 576px at 16px) */
.legal-main p,.legal-main li{max-width:36em}

/* ── responsive ── */
@media(max-width:920px){
  .siy-twins,.siy-mask{grid-template-columns:1fr;gap:12px}
  .siy-twins-arrow{transform:rotate(-90deg)}
}
@media(max-width:620px){
  .siy-doc{padding:24px 18px 18px;font-size:14.5px;line-height:1.95}
  .siy-doc::before{inset:7px}
  .siy-doc-row{flex-direction:column;gap:0}
  .siy-doc-badge{right:14px}
  .siy-doc-sm{padding:18px 16px 14px}
  .siy-mask-card{padding:16px 16px;font-size:15px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* ── brand: the final logo (paper + nib) replaces the drawn pen; «صياغة» is set in El Messiri (local file, OFL) ── */
.brand-mark{width:40px;height:40px;border-radius:0!important;background:none!important;box-shadow:none!important;filter:drop-shadow(0 6px 14px var(--gold-glow))}
.brand-mark img{display:block;width:100%;height:100%;object-fit:contain}
[data-mode="light"] .brand-mark{filter:drop-shadow(0 3px 8px rgba(20,26,43,.28))}
.brand-text{font-family:'El Messiri',var(--font);font-weight:700;letter-spacing:0}
@media(max-width:620px){.navbar .brand-mark{width:32px!important;height:32px!important}}

/* ── contrast (WCAG AA: 4.5:1 for small text, 3:1 for large). Quiet lines (legal pages' --quiet, the footer
   support line, the price units) use a calm mid-grey between --t2 and --t3 where color-mix() is supported, and
   plain --t2 elsewhere (a var() inside color-mix() would otherwise fail at computed time and inherit the body
   colour). Light mode: gold text on white or on the cream chips uses the deeper golds already in the palette. ── */
.footer-meta,.siy-pricing-price span{color:var(--t2)}
@supports (color:color-mix(in srgb,red 50%,blue)){
  .legal-page{--quiet:color-mix(in srgb,var(--t2) 65%,var(--t3))}
  .footer-meta,.siy-pricing-price span{color:color-mix(in srgb,var(--t2) 65%,var(--t3))}
}
[data-mode="light"] .siy-pricing-price strong,[data-mode="light"] .siy-pricing-card h3{color:var(--gold3)}
[data-mode="light"] .siy-token{color:#7a5b14}

/* ── contrast, light mode: the small gold text on the cream chips, cards and page (kicker, plan badges, saving lines,
   the second twin caption, the current nav link) was #b8942e at 2.2–2.9:1; #7a5b14 (the deep gold .siy-token already uses)
   reaches at least 4.5:1 on every one of these backgrounds. Gold theme only: the other light themes keep their own accent. ── */
[data-mode="light"][data-theme="gold"] .siy-pricing-kicker,
[data-mode="light"][data-theme="gold"] .siy-pricing-badge,
[data-mode="light"][data-theme="gold"] .siy-pricing-save,
[data-mode="light"][data-theme="gold"] .siy-twins figure:last-child figcaption,
[data-mode="light"][data-theme="gold"] .nav-links a[aria-current="page"]{color:#7a5b14}

/* ── no gold glow in dark mode (calm, no shine): the hero title keeps its colour but loses the gold halo
   (--hero-shadow, pricing-inline-2.css), and the twins arrow gets a neutral shadow instead of the gold one. ── */
[data-mode="dark"]{--hero-shadow:none}
[data-mode="dark"] .siy-twins-arrow{box-shadow:0 6px 16px rgba(0,0,0,.35)}