/* ============================================================
   JISM — shared styles for the standalone pages
   (About, Contact, Privacy, Refund, Delivery)
   Mirrors the retro-modern design tokens of the landing app
   (landing/src/styles.css) so these hand-written static pages
   match the brand without pulling in the Vite bundle.
   ============================================================ */

:root{
  --green:#3EA15B;
  --green-d:#1E7A41;
  --green-dd:#13532F;
  --green-pale:#CFE7D6;
  --cream:#F4EDDC;
  --paper:#FBF7EC;
  --bone:#ECE5CE;
  --ink:#16140E;
  --ink-soft:#3a362b;
  --butter:#CFE7D6;
  --line:#16140E;

  --font-display:"Bricolage Grotesque",system-ui,sans-serif;
  --font-body:"Hanken Grotesk",system-ui,sans-serif;
  --font-mono:"Space Mono",ui-monospace,monospace;
  --font-ar:"Cairo",system-ui,sans-serif;

  --bw:2.5px;
  --sh:5px 5px 0 var(--ink);
  --sh-lg:8px 8px 0 var(--ink);
  --r:20px;
  --maxw:760px;
}

/* Dark theme — same flip as the landing: neutral near-black ground, cream text,
   green only as an accent. Shared with the site via localStorage 'jism.theme'. */
html.dark{
  --cream:#161616;
  --paper:#1F1F1F;
  --bone:#262626;
  --ink:#F4EDDC;
  --ink-soft:#C7C2B6;
  --green:#3EA15B;
  --green-d:#7FCF97;
  --green-dd:#7FCF97;
  --green-pale:rgba(127,207,151,.16);
  --butter:rgba(127,207,151,.16);
  --line:#F4EDDC;
  --sh:3px 3px 0 rgba(0,0,0,.6);
  --sh-lg:6px 6px 0 rgba(0,0,0,.6);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--cream);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  line-height:1.65;
}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}

/* paper grain on the whole page (same texture as the landing) */
body::before{
  content:"";position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:.04;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- typography ---------- */
.display{font-family:var(--font-display);font-weight:800;line-height:.98;letter-spacing:-.02em}
.eyebrow{
  font-family:var(--font-mono);font-weight:700;text-transform:uppercase;
  letter-spacing:.18em;font-size:.72rem;color:var(--green-d);
}

/* ===========================================================
   NAV
   =========================================================== */
.lp-nav{position:sticky;top:0;z-index:100;background:var(--cream);border-bottom:var(--bw) solid var(--ink)}
.lp-nav-in{max-width:var(--maxw);margin:0 auto;padding:0 24px;height:70px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.lp-brand{display:flex;align-items:center;flex:none}
.lp-brand img{height:52px;width:auto;display:block}
.lp-brand .logo-dark{display:none}
html.dark .lp-brand .logo-light{display:none}
html.dark .lp-brand .logo-dark{display:block}
.lp-nav-actions{display:flex;align-items:center;gap:12px}
/* language switch — identical to the landing's .lang-switch (flat mono pill) */
.lang-switch{font-family:var(--font-mono);font-weight:700;font-size:.78rem;border:2px solid var(--ink);border-radius:999px;background:var(--paper);color:var(--ink);padding:7px 13px;white-space:nowrap;text-decoration:none;display:inline-flex;align-items:center;transition:background .15s ease,color .15s ease}
.lang-switch:hover{background:var(--ink);color:var(--paper)}
/* "Home" pill — mirrors the landing's nav green CTA: flat in the bar (no hard
   shadow), dims slightly on hover/press. */
.lp-nav .btn--sm{box-shadow:none}
.lp-nav .btn--sm:hover{transform:none;box-shadow:none;filter:brightness(.93)}
.lp-nav .btn--sm:active{transform:none;box-shadow:none;filter:brightness(.88)}
.theme-toggle{display:grid;place-items:center;width:40px;height:40px;border:2px solid var(--ink);border-radius:999px;background:var(--paper);font-size:1.05rem;line-height:1;color:var(--ink);cursor:pointer;transition:background .15s ease,color .15s ease;flex-shrink:0}
.theme-toggle:hover{background:var(--ink);color:var(--paper)}

/* ===========================================================
   PAGE BODY
   =========================================================== */
.lp-main{max-width:var(--maxw);margin:0 auto;padding:clamp(40px,6vw,72px) 24px clamp(64px,9vw,110px)}
.page-label{
  display:inline-flex;align-items:center;gap:.45em;
  font-family:var(--font-mono);font-size:.72rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.12em;padding:6px 13px;border:2px solid var(--ink);border-radius:999px;
  background:var(--green-pale);color:var(--green-d);margin-bottom:1.25rem;
}
.lp-main h1{font-family:var(--font-display);font-weight:800;line-height:1.04;letter-spacing:-.02em;
  font-size:clamp(2.2rem,5vw,3.4rem);margin:0 0 .4em}
.lead{font-size:clamp(1.05rem,1.6vw,1.25rem);color:var(--ink-soft);font-weight:500;max-width:54ch;margin:0}
.meta{
  color:var(--ink-soft);opacity:.8;font-family:var(--font-mono);font-size:.82rem;
  margin:1.4rem 0 2.6rem;padding-bottom:2rem;border-bottom:2px dashed rgba(127,127,127,.35);
}
.lp-main h2{font-family:var(--font-display);font-weight:800;font-size:1.35rem;color:var(--ink);margin:2.6rem 0 .7rem}
.lp-main h3{font-family:var(--font-display);font-weight:800;font-size:1.08rem;color:var(--ink);margin:1.6rem 0 .5rem}
.lp-main p{color:var(--ink-soft);font-size:1.02rem;margin:0 0 .85rem}
.lp-main ul,.lp-main ol{color:var(--ink-soft);font-size:1.02rem;padding-inline-start:1.4rem;margin:0 0 .95rem}
.lp-main li{margin-bottom:.5rem}
.lp-main strong{color:var(--ink);font-weight:700}
a.inline{color:var(--green-d);font-weight:700;border-bottom:2px solid transparent;transition:border-color .15s ease}
a.inline:hover{border-bottom-color:var(--green-d)}

/* card primitive (matches landing .card) */
.lp-card{
  background:var(--paper);border:var(--bw) solid var(--ink);
  border-radius:var(--r);box-shadow:var(--sh);
  padding:1.4rem 1.6rem;margin-top:2.4rem;
}
.lp-card p{margin:0}

/* contact rows */
.contact-rows{display:flex;flex-direction:column;gap:1rem;margin-top:.4rem}
.contact-row{display:flex;align-items:flex-start;gap:.9rem}
.contact-row .ci{flex:none;width:42px;height:42px;display:grid;place-items:center;font-size:1.2rem;
  border:2px solid var(--ink);border-radius:12px;background:var(--green-pale)}
.contact-row .cl{font-family:var(--font-mono);font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;opacity:.6;display:block;margin-bottom:1px}
.contact-row .cv{font-weight:700;color:var(--ink);font-size:1.05rem}

/* buttons (matches landing .btn) */
.btn{
  display:inline-flex;align-items:center;gap:.55em;
  font-family:var(--font-body);font-weight:800;font-size:1rem;
  padding:14px 24px;border:var(--bw) solid var(--ink);border-radius:999px;
  background:var(--paper);color:var(--ink);box-shadow:var(--sh);
  transition:transform .12s ease, box-shadow .12s ease;white-space:nowrap;
}
.btn:hover{transform:translate(-2px,-2px);box-shadow:var(--sh-lg)}
.btn:active{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--ink)}
.btn--green{background:var(--green);color:#fff}
.btn--sm{padding:10px 18px;font-size:.92rem}
.btn .wa{width:21px;height:21px;flex:none}

/* ===========================================================
   ABOUT HERO — green blob + mascot (the landing's signature figure)
   =========================================================== */
.about-hero{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;margin-bottom:1rem}
.about-figure{position:relative;display:grid;place-items:center;min-height:300px}
.about-blob{position:absolute;width:min(290px,90%);aspect-ratio:1;border-radius:50%;
  background:var(--green);border:var(--bw) solid var(--ink);z-index:0}
.about-blob::after{content:"";position:absolute;inset:16px;border-radius:50%;border:2px solid rgba(0,0,0,.28)}
.about-mascot{position:relative;z-index:2;width:215px;filter:drop-shadow(5px 5px 0 rgba(0,0,0,.18));animation:bob 3.4s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-12px)}}
@media (prefers-reduced-motion:reduce){.about-mascot{animation:none}}
@media(max-width:720px){
  .about-hero{grid-template-columns:1fr;gap:8px;text-align:center}
  .lead{margin-inline:auto}
  .about-figure{min-height:280px;order:-1}
}

/* value/feature chips on the about page */
.about-points{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:1.2rem}
.about-point{background:var(--paper);border:var(--bw) solid var(--ink);border-radius:14px;box-shadow:3px 3px 0 var(--ink);padding:16px 18px}
.about-point .pe{font-size:1.45rem;line-height:1}
.about-point h3{margin:10px 0 4px;font-family:var(--font-display);font-size:1.05rem}
.about-point p{margin:0;font-size:.92rem}
@media(max-width:520px){.about-points{grid-template-columns:1fr}}

/* ===========================================================
   FOOTER  (matches landing .footer)
   =========================================================== */
.lp-footer{background:var(--ink);color:var(--cream);padding:48px 0 28px;border-top:var(--bw) solid var(--ink)}
html.dark .lp-footer{background:#101010;color:var(--ink-soft)}
.lp-footer-in{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.lp-footer-cols{display:flex;flex-wrap:wrap;gap:36px;margin-bottom:34px}
.lp-footer-col h5{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.12em;font-size:.72rem;color:var(--green);margin:0 0 12px}
.lp-footer-col a{display:block;padding:5px 0;font-weight:600;opacity:.85;line-height:1.35}
.lp-footer-col a:hover{opacity:1;color:var(--butter)}
.lp-footer-brand{max-width:240px}
.lp-footer-brand img{height:46px;width:auto}
.lp-footer-brand p{opacity:.8;margin:12px 0 0;font-weight:500;font-size:.92rem}
.lp-footer-bot{border-top:1.5px solid rgba(255,255,255,.18);padding-top:20px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.82rem;opacity:.7;font-family:var(--font-mono)}
html.dark .lp-footer-bot{border-top-color:rgba(244,237,220,.16)}

/* ===========================================================
   ARABIC / RTL — Cairo everywhere (same as the landing).
   dir="rtl" on <html> mirrors the layout; logical properties
   (padding-inline-start, etc.) flip automatically.
   =========================================================== */
html[lang="ar"]{--font-display:"Cairo",system-ui,sans-serif;--font-body:"Cairo",system-ui,sans-serif}
html[lang="ar"] .display{letter-spacing:0;line-height:1.18}
html[lang="ar"] .lp-main h1{line-height:1.2}
/* Space Mono has NO Arabic glyphs — every mono element that carries Arabic
   (page label, meta date, contact labels, footer headings/baseline) must fall
   to Cairo, not a random system Arabic face, or the page feels off. */
html[lang="ar"] .page-label,
html[lang="ar"] .meta,
html[lang="ar"] .contact-row .cl,
html[lang="ar"] .lp-footer-col h5,
html[lang="ar"] .lp-footer-bot{font-family:var(--font-ar)}
html[lang="ar"] .page-label{letter-spacing:.02em}
html[lang="ar"] .lp-footer-col h5{letter-spacing:.04em}
/* keep LTR snippets (email, phone, url, jism.health) reading left-to-right inside RTL text */
html[lang="ar"] [dir="ltr"]{unicode-bidi:isolate}