/* Lookstep site styles, shared by English (/) and Arabic (/ar/). Brand: brand/visual-identity.md + tokens.json (09/11/2026).
   Logical properties (margin-inline, padding-inline, inset-inline) make RTL work without separate rules.
   Fonts are bundled locally in fonts/, unmodified, under the SIL Open Font License 1.1:
   IBM Plex Sans Arabic (fonts/OFL.txt) for text in Latin and Arabic, Amiri (fonts/OFL-Amiri.txt) for display. No external requests. */
@font-face{font-family:"Plex";src:url("fonts/ibm_plex_sans_arabic_regular.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Plex";src:url("fonts/ibm_plex_sans_arabic_semibold.ttf") format("truetype");font-weight:600 700;font-style:normal;font-display:swap}
@font-face{font-family:"Amiri";src:url("fonts/amiri_regular.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}

:root{
  --ground:#FAF7F4;--surface:#FFFDFB;--blush:#F3E3DD;--ink:#1F1A17;--muted:#6E625C;--accent:#96513F;--rose:#B76E5D;
  --champagne:#C9A46A;--line:#E9DDD6;--tag-bg:rgba(31,26,23,.72);--tag-ink:#FAF7F4;--warn-bg:#FBF0DC;--warn-ink:#5C4500;
  --shadow:0 18px 40px rgba(31,26,23,.10),0 2px 6px rgba(31,26,23,.06);
  --display:"Amiri","Times New Roman",serif;
  --text:"Plex",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Geeza Pro","Noto Sans Arabic",Tahoma,Arial,sans-serif;
  color-scheme:light dark
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --ground:#14110F;--surface:#1F1A17;--blush:#2A221E;--ink:#FAF7F4;--muted:#BDB0A8;--accent:#C9A46A;--rose:#D08A78;
  --line:#352C27;--warn-bg:#3A3010;--warn-ink:#F5E3A1;--shadow:0 18px 40px rgba(0,0,0,.45)}}
:root[data-theme="dark"]{--ground:#14110F;--surface:#1F1A17;--blush:#2A221E;--ink:#FAF7F4;--muted:#BDB0A8;--accent:#C9A46A;--rose:#D08A78;--line:#352C27;--warn-bg:#3A3010;--warn-ink:#F5E3A1;--shadow:0 18px 40px rgba(0,0,0,.45)}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--text);font-size:17px;line-height:1.65}
html[lang="ar"] body{line-height:1.85}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent);text-underline-offset:3px}
h1,h2{font-family:var(--display);font-weight:400;letter-spacing:-.005em}
h1{font-size:2rem;line-height:1.2;margin:0 0 12px}
h2{font-size:1.6rem;line-height:1.25;margin:40px 0 10px}
h3{font-size:1.02rem;font-weight:600;margin:20px 0 4px}
html[lang="ar"] h1,html[lang="ar"] h2{line-height:1.55}
html[lang="ar"] h3{line-height:1.5}
bdi{unicode-bidi:isolate}

/* Header and footer (all pages) */
header.site,footer.site{max-width:1040px;margin:0 auto;padding:18px 20px}
header.site{position:relative;display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;justify-content:space-between}
.brand{display:inline-flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink);direction:ltr}
.brand .icon{width:40px;height:40px;border-radius:10px;box-shadow:0 2px 8px rgba(150,81,63,.25)}
.brand .wordmark{height:30px;width:auto}
nav.site{display:flex;flex-wrap:wrap;gap:4px 18px;align-items:center}
nav.site a{color:var(--ink);text-decoration:none;font-size:.95rem;opacity:.82}
nav.site a:hover{opacity:1;color:var(--accent)}
nav.site a[aria-current="page"]{opacity:1;color:var(--accent)}
nav.site a.lang{border:1px solid var(--line);border-radius:999px;padding:1px 12px;opacity:1}
a[lang="ar"]{font-family:var(--text)}
main{max-width:1040px;margin:0 auto;padding:0 20px 40px}
footer.site{border-top:1px solid var(--line);color:var(--muted);font-size:.9rem;margin-top:16px;padding-top:22px;padding-bottom:36px}
footer.site nav{display:flex;flex-wrap:wrap;gap:4px 16px;margin-bottom:6px}
footer.site a{color:var(--muted)}

/* Text pages (privacy, terms, support, delete my data) */
article{max-width:780px;margin:8px auto 0;background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:32px 36px 20px;box-shadow:var(--shadow)}
article h1{font-size:2.1rem}
article h2{font-size:1.45rem;margin-top:30px}
.draft{background:var(--warn-bg);color:var(--warn-ink);border-radius:12px;padding:12px 16px;margin:0 0 22px;font-size:.95rem}
.muted{color:var(--muted);font-size:.92rem}
ul,ol{padding-inline-start:1.3em}
li{margin:4px 0}

/* Home page */
.home{max-width:1040px}
.hero{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;padding:28px 0 16px}
.hero h1{font-size:3.1rem;line-height:1.12;margin-bottom:18px;text-wrap:balance}
html[lang="ar"] .hero h1{font-size:2.75rem;line-height:1.5}
.hero .lead{font-size:1.15rem;color:var(--muted);margin:0 0 18px;max-width:32em}
.hero .tagline{font-family:var(--display);font-size:1.45rem;line-height:1.4;color:var(--accent);margin:0 0 26px;text-wrap:pretty}
.hero .tagline strong{font-weight:400}
.badge{display:inline-flex;align-items:center;gap:10px;border:1px solid var(--champagne);color:var(--ink);background:transparent;
  border-radius:999px;padding:9px 18px 9px 14px;font-size:.95rem;font-weight:600;cursor:default;user-select:text}
.badge::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--champagne);flex:none}
html[lang="ar"] .badge{padding:9px 14px 9px 18px}

.ba{position:relative;margin:0;justify-self:center;width:100%;max-width:420px}
.ba img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:24px;box-shadow:var(--shadow)}
.ba .pill{position:absolute;top:16px;font-size:.82rem;font-weight:600;line-height:1;padding:8px 13px;border-radius:999px;color:var(--tag-ink)}
.ba .before{inset-inline-start:16px;background:var(--tag-bg)}
.ba .after{inset-inline-end:16px;background:#96513F}
.ba .handle{position:absolute;top:50%;left:50%;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;background:#FAF7F4;
  box-shadow:0 4px 14px rgba(0,0,0,.25);display:grid;place-items:center;color:#1F1A17;font-size:15px;font-weight:600;letter-spacing:2px}
.ai-tag{display:inline-block;font-size:.8rem;font-weight:600;line-height:1;padding:7px 12px;border-radius:999px;background:var(--tag-bg);color:var(--tag-ink)}
.ba .ai-tag{position:absolute;bottom:16px;inset-inline-start:16px}

.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:36px 0 8px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:20px 22px}
.card h3{font-family:var(--display);font-weight:400;font-size:1.35rem;line-height:1.3;margin:0 0 6px;color:var(--ink)}
html[lang="ar"] .card h3{line-height:1.6}
.card p{margin:0;color:var(--muted);font-size:.95rem}

.how{display:grid;grid-template-columns:1fr 270px;gap:72px;align-items:center;margin-top:56px}
.how h2{font-size:2.1rem;margin:0 0 22px}
.photo h2{font-size:2.1rem}
.how ol{list-style:none;padding:0;margin:0;counter-reset:step}
.how li{counter-increment:step;position:relative;padding-inline-start:56px;margin:0 0 18px;min-height:40px}
.how li::before{content:counter(step);position:absolute;inset-inline-start:0;top:-6px;font-family:var(--display);font-size:2.2rem;line-height:1;color:var(--accent)}
.phone{margin:0;justify-self:center;width:100%;max-width:270px;text-align:center}
.phone .frame{border-radius:44px;padding:10px;background:#1F1A17;border:1px solid var(--line);box-shadow:var(--shadow)}
.phone img{border-radius:35px;width:100%}
.phone .ai-tag{margin-top:14px}

.photo{background:var(--blush);border-radius:22px;padding:6px 30px 22px;margin-top:44px}
.photo h2{margin-top:24px}
.fine{margin-top:28px}
.fine p{margin:6px 0}

@media (max-width:860px){
  .hero{grid-template-columns:1fr;gap:28px;padding-top:12px}
  .hero h1{font-size:2.35rem}
  html[lang="ar"] .hero h1{font-size:2.1rem}
  .ba{max-width:380px}
  .plans{grid-template-columns:1fr}
  .how{grid-template-columns:1fr;gap:32px}
}
@media (max-width:480px){
  body{font-size:16px}
  header.site{padding:14px 16px}
  main{padding:0 16px 32px}
  footer.site{padding-inline:16px}
  .brand .icon{width:34px;height:34px;border-radius:8px}
  .brand .wordmark{height:26px}
  nav.site{width:100%;gap:2px 12px;font-size:.92rem}
  nav.site a.lang{position:absolute;top:18px;padding:2px 12px}
  html[dir="ltr"] nav.site a.lang{right:16px}
  html[dir="rtl"] nav.site a.lang{left:16px}
  .how h2,.photo h2{font-size:1.75rem}
  .how{margin-top:40px}
  .hero h1{font-size:2rem}
  html[lang="ar"] .hero h1{font-size:1.8rem}
  .hero .tagline{font-size:1.25rem}
  article{padding:22px 18px 10px;border-radius:16px}
  article h1{font-size:1.7rem}
  .photo{padding:4px 18px 18px}
  .phone{max-width:260px}
}