/* FAWZ apps-v5 — sober iPhone 15 frame + page chrome. No theatrical shadows. */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
img{display:block;max-width:100%;height:auto}
button,input{font:inherit;border:0;background:none;color:inherit;padding:0}
svg{display:block}
:focus{outline:none}

:root{
  --sw:393px;
  --sh:852px;
  --bezel:10px;
  --outer-r:54px;
  --inner-r:44px;
  --frame:#0B0B0C;
  --page:#F2F2F4;
  --ink:#111113;
  --muted:#6B6B70;
}

body{
  background:var(--page);
  color:var(--ink);
  font-family:PlexAr,Inter,system-ui,sans-serif;
  min-height:100vh;
}

/* —— page heading —— */
.page-head{
  text-align:center;
  padding:40px 24px 20px;
}
.page-head h1{
  font-size:28px;
  font-weight:700;
  letter-spacing:-.03em;
  line-height:1.2;
}
.page-head p{
  margin-top:6px;
  font-size:15px;
  line-height:1.45;
  color:var(--muted);
  font-weight:400;
}
body.embed .page-head{padding:14px 20px 6px}
body.embed .page-head h1{font-size:22px}
body.embed .page-head p{font-size:13px;margin-top:3px}
body.embed .stage-wrap{padding-bottom:12px}
@media (min-width:601px){
  body.embed .stage{--fit:0.56}
  body.embed .stage-wrap{height:calc((var(--sh) + var(--bezel)*2 + 8px) * var(--fit) + 12px)}
}

/* —— 5-up stage —— */
.stage-wrap{
  display:flex;
  justify-content:center;
  overflow:hidden;
  padding:0 0 56px;
}
.stage{
  display:flex;
  flex-direction:row;
  align-items:flex-start;
  gap:18px;
  width:max-content;
  padding:4px 8px 8px;
  transform-origin:top center;
  direction:ltr; /* screens 1→5 from the left, like a product row */
}

/* Fit five 413px-wide devices onto a 1440 desktop with modest margins. */
@media (min-width:601px){
  .stage{--fit:0.64}
  .stage{transform:scale(var(--fit))}
  .stage-wrap{height:calc((var(--sh) + var(--bezel)*2 + 8px) * var(--fit) + 56px)}
}

/* —— device —— */
.device{
  width:calc(var(--sw) + var(--bezel)*2);
  height:calc(var(--sh) + var(--bezel)*2);
  flex:0 0 auto;
  position:relative;
}
.chassis{
  width:100%;height:100%;
  background:var(--frame);
  border-radius:var(--outer-r);
  padding:var(--bezel);
  position:relative;
  box-shadow:inset 0 0 0 1px #2A2A2C;
}
.hw{position:absolute;background:#1A1A1C;width:3px;border-radius:1px}
.hw.silent{height:22px;left:-2px;top:118px;border-radius:1px 0 0 1px}
.hw.volup{height:52px;left:-2px;top:166px;border-radius:1px 0 0 1px}
.hw.voldn{height:52px;left:-2px;top:226px;border-radius:1px 0 0 1px}
.hw.power{height:82px;right:-2px;top:196px;border-radius:0 1px 1px 0}

.screen{
  width:var(--sw);height:var(--sh);
  border-radius:var(--inner-r);
  overflow:hidden;
  position:relative;
  display:flex;
  flex-direction:column;
  background:#000;
  isolation:isolate;
  direction:rtl; /* app UI stays Arabic even if the stage row is LTR */
}

.island{
  position:absolute;top:11px;left:50%;transform:translateX(-50%);
  width:126px;height:37px;background:#000;border-radius:20px;z-index:40;
}
.island::after{
  content:"";position:absolute;right:22px;top:50%;transform:translateY(-50%);
  width:10px;height:10px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#1a3348 0 30%,#07070c 65%,#000 100%);
}

/* Status bar stays LTR, as on real iOS even inside Arabic apps. */
.sb{
  direction:ltr;
  height:54px;padding:14px 28px 0;
  display:flex;justify-content:space-between;align-items:flex-start;
  font-family:Inter,system-ui,sans-serif;
  font-size:16px;font-weight:600;letter-spacing:-.03em;
  position:relative;z-index:30;flex-shrink:0;
  color:#111;
}
.sb.light{color:#fff}
.sb .time{min-width:54px;padding-top:4px}
.sb-ic{display:flex;gap:6px;align-items:center;padding-top:6px}
.sb-ic svg{display:block;fill:currentColor}
.batt{
  width:27px;height:13px;border:1.2px solid currentColor;border-radius:3.5px;
  opacity:.9;position:relative;box-sizing:border-box;padding:1.5px;
}
.batt::after{
  content:"";position:absolute;right:-3px;top:3.5px;
  width:1.6px;height:4.5px;border-radius:0 1px 1px 0;
  background:currentColor;opacity:.5;
}
.batt i{display:block;height:100%;border-radius:1.5px;background:currentColor}

.app{flex:1;min-height:0;display:flex;flex-direction:column;position:relative;z-index:1;overflow:hidden}
.app-scroll{flex:1;min-height:0;overflow:hidden;position:relative;display:flex;flex-direction:column}
.app-scroll > *{flex-shrink:0}

.home-ind{
  position:absolute;bottom:8px;left:50%;transform:translateX(-50%);
  width:134px;height:5px;border-radius:3px;background:#111;opacity:.28;
  z-index:35;pointer-events:none;
}
.home-ind.light{background:#fff;opacity:.35}

.tabbar{
  flex-shrink:0;
  display:flex;justify-content:space-around;align-items:flex-start;
  padding:6px 6px 28px;
  background:#F9F9F9;
  border-top:0.5px solid rgba(60,60,67,.18);
  position:relative;z-index:10;
}
.tabbar .tab{
  display:flex;flex-direction:column;align-items:center;gap:2px;
  font-size:10px;font-weight:500;letter-spacing:0;
  color:#8E8E93;min-width:58px;
  position:relative;
}
.tabbar .tab.on{color:var(--brand,#111)}
.tabbar .tab svg{width:24px;height:24px}
.tabbar .badge{
  position:absolute;top:-2px;left:18px;
  min-width:16px;height:16px;padding:0 4px;
  background:#FF3B30;color:#fff;
  border-radius:8px;font-family:Inter,sans-serif;
  font-size:10px;font-weight:700;line-height:16px;text-align:center;
}

/* Dimmed backdrop used when a sheet is open */
.dim{
  position:absolute;inset:0;background:rgba(0,0,0,.4);z-index:20;
}

/* Native-ish bottom sheet */
.sheet{
  position:absolute;left:0;right:0;bottom:0;z-index:25;
  background:#fff;
  border-radius:14px 14px 0 0;
  padding:0 0 28px;
  display:flex;flex-direction:column;
}
.grabber{
  width:36px;height:5px;border-radius:3px;background:#C6C6C8;
  margin:8px auto 4px;
}

/* Shared iOS bits available to every app */
.hair{height:0.5px;background:rgba(60,60,67,.22);margin:0}
.chev{
  width:8px;height:8px;border-top:2px solid #C7C7CC;border-right:2px solid #C7C7CC;
  transform:rotate(-135deg); /* points to the start side in RTL */
  flex-shrink:0;
}
.chev.ltr{transform:rotate(45deg)}

/* Mobile: one phone at a time, full width, scroll-snap. */
@media (max-width:600px){
  .page-head{padding:24px 16px 12px}
  .page-head h1{font-size:24px}
  .page-head p{font-size:14px}
  .stage-wrap{
    overflow:visible;
    height:auto;
    padding:0 0 32px;
  }
  .stage{
    transform:none;
    width:auto;
    max-width:100%;
    overflow-x:auto;
    overflow-y:hidden;
    scroll-snap-type:x mandatory;
    scroll-padding:16px;
    justify-content:flex-start;
    gap:12px;
    padding:0 16px 12px;
    -webkit-overflow-scrolling:touch;
  }
  .device{
    scroll-snap-align:center;
    --mw:min(var(--sw) + var(--bezel)*2, calc(100vw - 32px));
    width:var(--mw);
    height:calc(var(--mw) * (var(--sh) + var(--bezel)*2) / (var(--sw) + var(--bezel)*2));
  }
  .chassis{
    width:calc(var(--sw) + var(--bezel)*2);
    height:calc(var(--sh) + var(--bezel)*2);
    transform:scale(calc((100vw - 32px) / (var(--sw) + var(--bezel)*2)));
    transform-origin:top left;
  }
  @media (min-width:425px){
    .chassis{transform:scale(1)}
    .device{
      width:calc(var(--sw) + var(--bezel)*2);
      height:calc(var(--sh) + var(--bezel)*2);
    }
  }
}