/* 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}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:4px}
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 h2,.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 h2,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}
}

/* Two-step flow (app design 12/11/2026: step 1 occasion rows, step 2 colours with a bottom dock, result with every colour named).
   The phone screens are drawn in HTML so they stay sharp and switch to RTL with the page. They always use the app's light palette.
   Shapes: equal-corner rounded rectangles and true circles only. */
.nw{white-space:nowrap}
.flow{margin-top:56px}
.flow h2{font-size:2.1rem;margin:0 0 6px}
.flow-lead{color:var(--muted);margin:0 0 26px;max-width:36em}
.shots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;align-items:start}
.shot{margin:0;display:flex;flex-direction:column;gap:16px;align-items:center}
.shot .frame{width:100%;max-width:290px;border-radius:40px;padding:9px;background:#1F1A17;box-shadow:var(--shadow)}
.shot figcaption{display:flex;gap:12px;align-items:flex-start;max-width:290px;width:100%;color:var(--muted);font-size:.95rem;line-height:1.55}
.shot figcaption strong{color:var(--ink);font-weight:600;display:block}
.shot .n{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:var(--surface);font-weight:600;font-size:.95rem;line-height:1}
.shot .n-done{background:var(--champagne);color:#1F1A17}

.scr{--i:#1F1A17;--m:#6B5E57;--l:#E6DCD5;--a:#96513F;--b:#F3E4DE;
  background:#FAF7F4;color:var(--i);border-radius:32px;padding:16px 13px 14px;min-height:540px;display:flex;flex-direction:column;
  font-size:12px;line-height:1.35;overflow-wrap:normal;word-break:normal;hyphens:none}
html[lang="ar"] .scr{line-height:1.5}
.scr p{margin:0}
.scr ul{list-style:none;margin:0;padding:0}
.scr small{font-size:11px;color:var(--m);display:block}
.scr b{font-weight:600}
.s-top{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:30px;margin-bottom:4px}
.s-top .back,.chev{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
html[dir="rtl"] .s-top .back,html[dir="rtl"] .chev{transform:scaleX(-1)}
.chev{color:var(--a)}
.s-photo{width:30px;height:30px;border-radius:50%;overflow:hidden;border:1px solid var(--l);flex:none}
.s-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 25%}
.s-label{font-size:10px;font-weight:600;letter-spacing:.04em;color:var(--a)}
html[lang="ar"] .s-label{letter-spacing:0}
.s-top .s-label{flex:1;text-align:center;margin-inline-end:24px}
.s-title{font-family:var(--display);font-size:21px;line-height:1.25;margin:2px 0 2px!important}
html[lang="ar"] .s-title{line-height:1.6}
.s-sub{color:var(--m)}
.occ{display:flex;flex-direction:column;gap:6px;margin-top:10px!important}
.occ li{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--l);border-radius:12px;padding:7px 10px;min-height:46px}
.o-txt{flex:1;min-width:0;display:flex;flex-direction:column}
.occ .o-txt b{font-family:var(--display);font-weight:400;font-size:14px;line-height:1.25}
.o-dots{display:flex;gap:4px;flex:none}
.o-dots .d{width:11px;height:11px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(31,26,23,.12)}
.s-or{display:flex;align-items:center;gap:8px;color:var(--m);font-weight:600;margin:10px 0 8px!important}
.s-or::before,.s-or::after{content:"";flex:1;height:1px;background:var(--l)}
.copy{display:flex;align-items:center;gap:10px;background:var(--b);border:1px solid var(--l);border-radius:12px;padding:9px 10px}
.copy .o-txt b{font-size:12.5px}
.fan{position:relative;width:40px;height:36px;flex:none}
.fan i{position:absolute;top:3px;width:22px;height:30px;border-radius:6px;border:2px solid #FAF7F4}
.fan i:nth-child(1){inset-inline-start:0;transform:rotate(-8deg)}
.fan i:nth-child(2){inset-inline-start:9px;top:1px}
.fan i:nth-child(3){inset-inline-start:18px;transform:rotate(8deg)}

.panel{background:#fff;border:1px solid var(--l);border-radius:12px;padding:10px 6px 8px;margin-top:10px}
.shades{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px 2px}
.shades li{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center}
.shades small{font-size:10.5px;line-height:1.3}
.ring{width:40px;height:40px;border-radius:50%;border:1px solid var(--l);display:grid;place-items:center}
.shades li.on .ring{border:2px solid var(--i)}
.sw{width:32px;height:32px;border-radius:50%}
.s-btn{display:flex;align-items:center;justify-content:center;text-align:center;min-height:32px;margin-top:8px;border:1px solid var(--l);border-radius:10px;background:#FAF7F4;font-weight:600;font-size:11px;padding:4px 8px}
.dock{margin-top:auto;border-top:1px solid var(--l);padding-top:6px}
.dock ul{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:2px}
.dock li{display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 0;border-radius:10px}
.dock li.on{background:var(--b)}
.dock small{color:var(--i);font-weight:600;font-size:10.5px}
.dd,.dd-adj{width:18px;height:18px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(31,26,23,.15)}
.dock li.on .dd{box-shadow:0 0 0 2px var(--i)}
.dd-adj{box-shadow:none;border:2px dashed var(--m);box-sizing:border-box}
.s-cta{display:flex;align-items:center;justify-content:center;min-height:40px;border-radius:999px;background:var(--i);color:#FAF7F4;font-weight:600;font-size:13px;margin-top:8px;text-align:center;padding:4px 10px}
.s-link{display:block;text-align:center;font-weight:600;margin-top:6px}

.res{padding-top:13px}
.ba-mini{position:relative;border-radius:20px;overflow:hidden;height:230px;margin-bottom:10px}
.ba-mini img{width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.ba-mini .pill{position:absolute;bottom:10px;font-size:10.5px;font-weight:600;line-height:1;padding:6px 10px;border-radius:999px}
.ba-mini .before{inset-inline-start:10px;background:#1F1A17;color:#FAF7F4}
.ba-mini .after{inset-inline-end:10px;background:#fff;color:#1F1A17}
.picks{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;margin:8px 0 6px!important}
.picks li{display:flex;flex-direction:column;align-items:center;gap:3px;text-align:center}
.picks b{font-size:11px}
.picks small{font-size:10.5px;line-height:1.3}
.pk{width:30px;height:30px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(31,26,23,.15)}
.res .s-cta{margin-top:auto}

/* A row of bare selfies: the cast is wide on purpose (skin tones, hair, outfits) */
.faces{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,2fr);gap:32px;align-items:center;margin-top:56px}
.faces h2{font-size:2.1rem;margin:0 0 8px}
.faces p{margin:0;color:var(--muted)}
.faces-row{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:10px}
.faces-row img{width:100%;aspect-ratio:2/3;object-fit:cover;border-radius:16px}

@media (max-width:980px){
  .shots{grid-template-columns:minmax(0,1fr);justify-items:center;gap:40px}
  .faces{grid-template-columns:minmax(0,1fr);gap:18px}
  .faces-row{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width:480px){
  .flow,.faces{margin-top:40px}
  .flow h2,.faces h2{font-size:1.75rem}
  .faces-row{gap:8px}
  .faces-row img{border-radius:12px}
}
.shot .n svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.scr{min-height:578px}
/* Step-by-step guide screen in How it works (replaces the old screenshot, which had an arched mirror and an on-screen tag) */
.how .shot .frame{max-width:270px}
.guide .scr{min-height:560px}
.g-img{border-radius:16px;overflow:hidden;height:150px;margin:2px 0 10px}
.g-img img{width:100%;height:100%;object-fit:cover;object-position:50% 33%}
.g-bar{height:4px;border-radius:2px;background:var(--l);margin-bottom:10px}
.g-bar i{display:block;height:100%;width:50%;border-radius:2px;background:var(--a)}
.g-text{font-size:12.5px;line-height:1.5;margin-top:4px!important}
.g-need{font-weight:600;margin-top:12px!important;color:var(--m)}
.g-tools{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px!important}
.g-tools li{border:1px solid var(--l);background:#fff;border-radius:999px;padding:4px 10px;font-size:11px}
.g-cols{display:flex;flex-wrap:wrap;gap:8px 14px;margin-top:12px!important}
.g-cols li{display:flex;align-items:center;gap:8px}
.g-cols .pk{width:24px;height:24px}
.g-cols small{color:var(--i);font-weight:600}
.g-nav{margin-top:auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:8px;align-items:center}
.g-nav .s-link,.g-nav .s-cta{margin:0}
.how .scr li{counter-increment:none;padding-inline-start:0;min-height:0;position:static}
.how .scr li::before{content:none}
.how .scr .g-tools li,.how .scr .g-cols li{margin:0}
.how .scr .g-tools li{padding:4px 10px}