/* ==========================================================================
   WafiTo — page design system (all pages except the Khutwa product page,
   which keeps its own conversion-focused identity).
   Tokens taken verbatim from design_handoff_wafito_website/README.md.
   Pairs with shell.css (nav + footer).
   ========================================================================== */
:root{
  --paper:#F6F0E4;
  --surface:#FCF9F2;
  --border:#DED0B4;
  --hair:#EAE0C8;
  --ink:#362D22;
  --ink-soft:#5C503D;
  --muted:#8C7E64;
  --primary:#B8863A;          /* WafiTo mango */
  --primary-dark:#A6752E;
  --secondary:#C8693A;        /* Khutwa terracotta — product-specific only */
  --secondary-dark:#B55A2E;
  --plate:#3A3024;            /* book-plate surface */
  --plate-cream:#F4ECDC;
  --plate-gold:#E0B66A;
  --plate-muted:#A89473;
  --ease:cubic-bezier(.4,0,.2,1);
  --shadow-card:0 20px 44px -28px rgba(58,48,36,.4);
  --shadow-gold:0 16px 32px -16px rgba(184,134,58,.55);
  --shadow-terra:0 16px 32px -16px rgba(200,105,58,.5);
  --f-ar:'Cairo',sans-serif;
  --f-body:'IBM Plex Sans Arabic',sans-serif;
  --f-label:'Space Grotesk',ui-monospace,monospace;
  --f-quote:'Newsreader',Georgia,serif;
}
html[data-theme="dark"]{
  --paper:#201A12; --surface:#2A2216; --border:#4A3D28; --hair:#3B2F1E;
  --ink:#F1E7D4; --ink-soft:#D6C6A6; --muted:#998A6B;
  --primary:#E5BE72; --primary-dark:#EFD08C;
  --secondary:#E0834F; --secondary-dark:#EC9564;
  --shadow-card:0 20px 44px -28px rgba(0,0,0,.6);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth; direction:rtl;}
body{
  margin:0; min-height:100vh; display:flex; flex-direction:column;
  background:var(--paper); color:var(--ink);
  font-family:var(--f-body); line-height:1.6; -webkit-font-smoothing:antialiased;
  background-image:
    radial-gradient(circle at 88% 2%, rgba(184,134,58,.08), transparent 42%),
    radial-gradient(circle at 8% 96%, rgba(200,105,58,.06), transparent 40%);
  background-attachment:fixed;
}
main{flex:1;}
a{color:var(--primary); text-underline-offset:.22em;}
a:hover{color:var(--primary-dark);}
img{max-width:100%; display:block;}
::selection{background:rgba(184,134,58,.25);}
.wrap{max-width:1180px; margin:0 auto; padding:0 clamp(20px,5vw,56px);}
.en{font-family:var(--f-label); direction:ltr; unicode-bidi:isolate;}

/* ---------- shared type ---------- */
.kicker{font-family:var(--f-label); letter-spacing:.28em; font-size:12px;
  color:var(--muted); text-transform:uppercase; direction:ltr; display:inline-block;}
.kicker-ar{font-family:var(--f-label); letter-spacing:.2em; font-size:12px;
  color:var(--muted); text-transform:uppercase; display:inline-block;}
.quote{font-family:var(--f-quote); font-style:italic; font-size:26px; color:var(--primary);}

/* ---------- buttons ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  font-family:var(--f-ar); font-weight:800; font-size:16px; padding:1.05em 1.9em;
  border-radius:14px; text-decoration:none; border:none; cursor:pointer;
  transition:background-color .22s var(--ease), color .22s var(--ease),
             border-color .22s var(--ease), transform .22s var(--ease);}
.btn-primary{background:var(--primary); color:#fff; box-shadow:var(--shadow-gold);}
.btn-primary:hover{background:var(--primary-dark); color:#fff;}
.btn-primary:active{transform:scale(.97);}
.btn-terra{background:var(--secondary); color:#fff; box-shadow:var(--shadow-terra);}
.btn-terra:hover{background:var(--secondary-dark); color:#fff;}
.btn-terra:active{transform:scale(.97);}
.btn-ghost{border:2px dashed var(--border); color:var(--ink); background:transparent;}
.btn-ghost:hover{border-color:var(--primary); color:var(--primary);}
html[data-theme="dark"] .btn-primary, html[data-theme="dark"] .btn-terra{color:#201A12;}
.btn-row{display:flex; flex-wrap:wrap; gap:16px;}

/* ---------- page scaffolding ---------- */
.page-head{max-width:1180px; margin:0 auto;
  padding:clamp(48px,7vw,88px) clamp(20px,5vw,56px) 20px;
  text-align:center; display:flex; flex-direction:column; align-items:center;}
.page-head h1{font-family:var(--f-ar); font-weight:800; font-size:clamp(2rem,5vw,3rem);
  margin:18px 0 0; color:var(--ink); text-wrap:balance;}
.page-head p{max-width:52ch; font-size:clamp(1rem,2.2vw,1.15rem); color:var(--ink-soft); margin:16px 0 0;}
.sec{max-width:1180px; margin:0 auto; padding:80px clamp(20px,5vw,56px);}
.sec-split{display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:56px; align-items:center;}
.rule{max-width:1180px; margin:0 auto; padding:0 clamp(20px,5vw,56px);}
.rule > div{border-top:2px dashed var(--border);}
h2.sec-title{font-family:var(--f-ar); font-weight:800;
  font-size:clamp(1.7rem,3.6vw,2.3rem); margin:14px 0 22px; color:var(--ink);}
.lead{font-size:17px; color:var(--ink-soft); margin:0 0 16px;}

/* ---------- home hero ---------- */
.hero{max-width:1180px; margin:0 auto;
  padding:clamp(56px,9vw,120px) clamp(20px,5vw,56px) clamp(40px,7vw,72px);
  text-align:center; display:flex; flex-direction:column; align-items:center;}
.hero .kicker{letter-spacing:.32em; font-size:13px;}
.hero h1{font-family:var(--f-ar); font-weight:900; font-size:clamp(2.4rem,6.4vw,3.8rem);
  line-height:1.15; margin:24px 0 0; max-width:16ch; color:var(--ink); text-wrap:balance;}
.hero > p{max-width:52ch; font-size:clamp(1.05rem,2.4vw,1.25rem); color:var(--ink-soft); margin:22px 0 0;}
.hero .btn-row{justify-content:center; margin-top:36px;}

/* ---------- mango panel ---------- */
.mark-panel{display:flex; align-items:center; justify-content:center; padding:48px;
  background:var(--surface); border-radius:24px; border:1px solid var(--border);}
.mark-panel img{width:160px; height:160px; object-fit:contain; opacity:.9;}

/* ---------- Khutwa book plate (product-specific visual) ---------- */
.plate{width:min(320px,80vw); aspect-ratio:3/4; background:var(--plate);
  border-radius:20px; box-shadow:0 40px 70px -30px rgba(58,48,36,.55);
  padding:36px 28px; display:flex; flex-direction:column; align-items:center;
  text-align:center; color:var(--plate-cream);}
.plate .k{font-family:var(--f-label); letter-spacing:.3em; font-size:12px; color:var(--plate-gold);}
.plate .t{font-family:var(--f-ar); font-weight:900; font-size:clamp(40px,9vw,64px);
  color:var(--plate-cream); margin:18px 0;}
.plate .line{display:flex; align-items:center; gap:10px; width:100%; margin-bottom:18px;}
.plate .line span.l{flex:1; border-top:1px dashed rgba(224,182,106,.5);}
.plate .line span.t2{font-family:var(--f-label); font-size:11px; color:#C9B88E; direction:ltr;}
.plate .pill{font-size:14px; color:#E7DDC9; border:1px dashed rgba(224,182,106,.5);
  border-radius:999px; padding:8px 16px;}
.plate .foot{margin-top:auto; padding-top:22px; width:100%;
  border-top:2px dashed rgba(224,182,106,.35);}
.plate .foot .v{font-family:var(--f-ar); font-weight:700; font-size:14px; color:var(--plate-cream);}
.plate .foot .a{font-size:12.5px; color:var(--plate-muted);}

/* ---------- cards / catalogue ---------- */
.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:28px;}
.card{background:var(--surface); border:1px solid var(--border); border-radius:24px;
  padding:clamp(24px,3.4vw,32px); transition:transform .22s var(--ease), border-color .22s var(--ease);}
.card:hover{transform:translateY(-4px);}
a.card{display:block; text-decoration:none; color:inherit;}
a.card:hover{border-color:var(--primary); color:inherit;}
.card h3{font-family:var(--f-ar); font-weight:800; font-size:clamp(1.4rem,3vw,1.7rem);
  margin:14px 0 10px; color:var(--ink);}
.card p{font-size:15.5px; color:var(--ink-soft); margin:0;}
.card .more{display:inline-block; margin-top:18px; font-family:var(--f-ar);
  font-weight:700; font-size:15px; color:var(--primary);}
.card-plate{display:flex; justify-content:center; margin-bottom:22px;}
.card-plate .plate{width:min(210px,60vw); padding:24px 18px;}
.card-plate .plate .t{font-size:clamp(30px,7vw,42px); margin:12px 0;}
.card-plate .plate .pill{font-size:11.5px; padding:6px 12px;}

/* empty / growth state — intentional, never "coming soon" */
.card-open{border:2px dashed var(--border); background:transparent; border-radius:24px;
  padding:clamp(28px,4vw,40px); display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center; gap:10px; min-height:220px;}
.card-open .plus{width:44px; height:44px; border-radius:999px; border:2px dashed var(--border);
  display:flex; align-items:center; justify-content:center; color:var(--muted);
  font-size:22px; font-family:var(--f-label); line-height:1;}
.card-open h3{font-family:var(--f-ar); font-weight:800; font-size:1.25rem; margin:6px 0 0; color:var(--ink);}
.card-open p{max-width:38ch; font-size:14.5px; color:var(--ink-soft); margin:0;}

.band{max-width:1180px; margin:0 auto; padding:0 clamp(20px,5vw,56px) 96px;}
.band-in{border:2px dashed var(--border); border-radius:24px; padding:clamp(32px,5vw,48px);
  text-align:center; display:flex; flex-direction:column; align-items:center; gap:10px;}
.band-in h3{font-family:var(--f-ar); font-weight:800; font-size:clamp(1.3rem,2.6vw,1.6rem);
  margin:6px 0 0; color:var(--ink);}
.band-in p{max-width:48ch; font-size:15.5px; color:var(--ink-soft); margin:0;}

/* ---------- reading column (About / legal) ---------- */
.read{max-width:680px; margin:0 auto; padding:20px clamp(20px,5vw,56px) 40px;}
.read section{padding-top:40px; margin-top:40px; border-top:2px dashed var(--border);}
.read section:first-of-type{border-top:none; margin-top:0; padding-top:8px;}
.read h2{font-family:var(--f-ar); font-weight:700; font-size:21px; margin:0 0 12px; color:var(--ink);}
.read p{font-size:16px; color:var(--ink-soft); margin:0 0 14px; line-height:1.85;}
.read ul{margin:0 0 16px; padding-inline-start:1.15em; color:var(--ink-soft); font-size:16px; line-height:1.85;}
.read li{margin-bottom:10px;}
.read strong{color:var(--ink);}
.principles{list-style:none; margin:0; padding:0;}
.principles li{display:flex; gap:16px; align-items:flex-start; margin-bottom:18px;}
.principles .n{font-family:var(--f-label); font-size:13px; color:var(--primary);
  font-weight:600; flex:none; padding-top:3px;}
.pullquote{text-align:center; padding:56px clamp(20px,5vw,56px) 0;}

/* ---------- legal: sticky TOC + content ---------- */
.legal-grid{max-width:1180px; margin:0 auto; padding:20px clamp(20px,5vw,56px) 40px;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:48px; align-items:start;}
.toc{position:sticky; top:88px;}
.toc h2{font-family:var(--f-label); font-size:12px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--muted); margin:0 0 14px; font-weight:600;}
.toc ol{list-style:none; margin:0; padding:0; counter-reset:t; display:flex; flex-direction:column; gap:10px;}
.toc li{counter-increment:t;}
.toc a{font-size:14px; color:var(--muted); text-decoration:none; display:flex; gap:8px;
  transition:color .22s var(--ease);}
.toc a::before{content:counter(t,decimal-leading-zero); font-family:var(--f-label);
  font-size:11px; color:var(--border); flex:none; padding-top:2px;}
.toc a:hover{color:var(--primary);}
.legal-body{max-width:680px;}
.legal-body section{scroll-margin-top:96px; padding-top:36px; margin-top:36px;
  border-top:2px dashed var(--border);}
.legal-body section:first-of-type{border-top:none; margin-top:0; padding-top:0;}
.legal-body h2{font-family:var(--f-ar); font-weight:700; font-size:21px; margin:0 0 12px; color:var(--ink);}
.legal-body p, .legal-body li{font-size:16px; color:var(--ink-soft); line-height:1.85;}
.legal-body p{margin:0 0 14px;}
.legal-body ul{margin:0 0 16px; padding-inline-start:1.15em;}
.legal-body li{margin-bottom:10px;}
.legal-body strong{color:var(--ink);}
.updated{font-family:var(--f-label); font-size:13px; color:var(--muted); margin:14px 0 0; direction:rtl;}

/* ---------- FAQ accordion ---------- */
.faq-group{max-width:720px; margin:0 auto; padding:32px clamp(20px,5vw,56px) 4px;}
.faq-group > .kicker-ar{letter-spacing:.14em; margin-bottom:16px; display:block;}
.faq-item{border-bottom:1px solid var(--hair);}
.faq-q{width:100%; text-align:right; background:none; border:none; cursor:pointer;
  padding:20px 0; display:flex; align-items:center; justify-content:space-between; gap:16px;
  font-family:var(--f-ar); font-weight:700; font-size:16.5px; color:var(--ink);}
.faq-q .ic{flex:none; display:inline-block; color:var(--primary); font-size:20px; direction:ltr;
  transition:transform .3s var(--ease); line-height:1;}
.faq-q[aria-expanded="true"] .ic{transform:rotate(45deg);}
.faq-a{display:grid; grid-template-rows:0fr; transition:grid-template-rows .32s var(--ease);}
.faq-a.open{grid-template-rows:1fr;}
.faq-a > div{overflow:hidden;}
.faq-a p{margin:0 0 20px; font-size:15.5px; color:var(--ink-soft); max-width:60ch; line-height:1.85;}

/* ---------- contact ---------- */
.contact-cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:20px;}
.contact-card{background:var(--surface); border:1px solid var(--border); border-radius:20px;
  padding:28px; display:flex; flex-direction:column; gap:8px; text-decoration:none; color:inherit;
  transition:transform .22s var(--ease), border-color .22s var(--ease);}
.contact-card:hover{transform:translateY(-4px); border-color:var(--primary); color:inherit;}
.contact-card .lb{font-family:var(--f-label); font-size:11.5px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--muted); direction:ltr;}
.contact-card .vl{font-family:var(--f-ar); font-weight:800; font-size:1.15rem; color:var(--ink);
  direction:ltr; word-break:break-word;}
.contact-card .hn{font-size:14px; color:var(--muted);}

/* ---------- 404 ---------- */
.nf{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:clamp(56px,10vw,110px) clamp(20px,5vw,56px); gap:14px;}
.nf img{width:88px; height:88px; object-fit:contain; opacity:.9; margin-bottom:6px;}
.nf .code{font-family:var(--f-label); font-size:13px; letter-spacing:.3em; color:var(--muted); direction:ltr;}
.nf h1{font-family:var(--f-ar); font-weight:900; font-size:clamp(1.8rem,5vw,2.8rem);
  margin:6px 0 0; color:var(--ink); max-width:18ch; text-wrap:balance;}
.nf p{max-width:44ch; color:var(--ink-soft); margin:0;}
.nf .btn-row{justify-content:center; margin-top:22px;}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .card, .contact-card, .btn, .faq-a, .faq-q .ic{transition:none;}
  .card:hover, .contact-card:hover{transform:none;}
}