/* Hero only: cropped iPhone showing a WhatsApp chat. Section 2 keeps the flat frame.
   Inside the phone the face is the system UI stack. The page outside stays IBM Plex.
   Arabic: the phone is RTL (guest green on the inline end, which is the left).
   English: the phone is LTR (guest green on the right). */

.hero .phone-card{
  width:100%;
  max-width:400px;
  background:#EFEFEF;
  border-radius:28px;
  padding:18px 14px 0;
  overflow:hidden;
}
.hero .demo-label{max-width:400px}
.hero .iphone{
  height:668px;
  margin-bottom:-56px;
  padding:8px;
  border-radius:48px;
  background:#0c0c0e;
  box-shadow:0 0 0 1px #242428, 0 16px 36px rgba(28,24,40,.10);
  display:flex;
  flex-direction:column;
  font-family:"SF Pro Text","SF Pro Display",-apple-system,BlinkMacSystemFont,"Noto Sans Arabic","Segoe UI",sans-serif;
  font-synthesis:weight;
  -webkit-font-smoothing:antialiased;
}
.hero .iphone .rp-player,
.hero .iphone .rp-watch{
  flex:1;
  min-height:0;
  display:flex;
  flex-direction:column;
}
html.js-motion .hero .iphone .rp-live,
html:not(.js-motion) .hero .iphone .rp-final{
  flex:1;
  min-height:0;
  display:flex;
  flex-direction:column;
}
.hero .iphone .wa{
  flex:1;
  min-height:0;
  width:100%;
  max-width:none;
  height:auto;
  border:0;
  border-radius:40px;
  background-color:#EFE7DE;
  background-image:url("wa-doodle.svg");
  background-size:220px 220px;
  position:relative;
  overflow:hidden;
  color:#111b21;
  padding-bottom:56px;
  box-sizing:border-box;
}

/* status bar stays physical LTR: time on the left, icons on the right, like iOS */
.hero .ios-status{
  direction:ltr;
  flex:none;
  height:52px;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  padding:0 18px 6px;
  position:relative;
  z-index:4;
  color:#111;
}
.hero .ios-time{
  font-size:16px;
  line-height:20px;
  font-weight:600;
  letter-spacing:-0.03em;
  font-variant-numeric:tabular-nums;
  width:52px;
}
.hero .ios-island{
  position:absolute;
  z-index:5;
  inset-inline-start:50%;
  inset-block-start:10px;
  width:108px;
  height:32px;
  margin-inline-start:-54px;
  border-radius:20px;
  background:#000;
}
.hero .ios-sys{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:5px;
  width:74px;
  color:#111;
}
.hero .ios-sys svg{display:block}

/* floating glass pills: back on the inline start, call on the inline end, name centred */
.hero .wa-bar{
  flex:none;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:8px;
  margin:0 10px 4px;
  min-height:44px;
  position:relative;
  z-index:3;
  background:transparent;
  border:0;
}
.hero .wa-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:36px;
  border-radius:999px;
  background:rgba(255,255,255,.58);
  -webkit-backdrop-filter:blur(22px) saturate(1.8);
  backdrop-filter:blur(22px) saturate(1.8);
  border:0.5px solid rgba(255,255,255,.72);
  box-shadow:0 1px 2px rgba(11,20,26,.10), inset 0 0 0 0.5px rgba(60,50,40,.10);
  color:#111;
}
.hero .wa-back{
  justify-self:start;
  gap:2px;
  padding-inline:8px 12px;
  min-width:58px;
}
.hero .wa-back svg{display:block}
html[lang=ar] .hero .wa-back svg{transform:scaleX(-1)}
.hero .wa-count{
  font-size:17px;
  line-height:22px;
  font-weight:600;
  letter-spacing:-0.02em;
  font-variant-numeric:tabular-nums;
}
.hero .wa-call{
  justify-self:end;
  width:auto;
  gap:3px;
  padding-inline:10px 8px;
}
.hero .wa-call svg{display:block}
.hero .wa-call .wa-chev{display:block}
html[lang=ar] .hero .wa-call .wa-chev{transform:scaleX(-1)}
.hero .wa-id{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-width:0;
  justify-self:center;
}
.hero .wa-av{
  flex:none;
  width:40px;
  height:40px;
  border-radius:50%;
  background:#F3E6D0;
  color:#3A3228;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:11px;
  line-height:13px;
  font-weight:600;
  letter-spacing:0;
  box-shadow:none;
}
.hero .wa-id .nm{
  font-size:16px;
  line-height:20px;
  font-weight:700;
  color:#111b21;
  letter-spacing:-0.01em;
  white-space:nowrap;
}
html[lang=en] .hero .wa-id .nm{letter-spacing:-0.02em}
.hero .hd-chip{display:none}

/* thread */
.hero .wa-body{
  background:transparent;
  padding:4px 12px 8px;
  scrollbar-width:none;
}
.hero .wa-body::-webkit-scrollbar{width:0;height:0;display:none}
.hero .wa-body::before{content:none;display:none;height:0;background:transparent}
.hero .wa-body .scroll{
  margin-block-start:auto;
  gap:8px;
  padding-block:6px 4px;
}
.hero .b.g + .b.g,
.hero .b.o + .b.o{margin-block-start:-6px}
.hero .wa-day{
  display:inline-flex;
  align-self:center;
  margin-block:6px 8px;
  padding:4px 10px;
  border:0;
  border-radius:8px;
  background:#fff;
  box-shadow:0 1px 0.5px rgba(11,20,26,.13);
  color:#54656f;
  font-family:"IBM Plex Sans Arabic","IBM Plex Sans",sans-serif;
  font-size:13px;
  line-height:18px;
  font-weight:600;
}

.hero .b{
  position:relative;
  max-width:86%;
  padding:6px 10px 5px;
  border:0;
  border-radius:16px;
  font-family:"IBM Plex Sans Arabic","IBM Plex Sans",sans-serif;
  font-size:17px;
  line-height:20px;
  font-weight:600;
  color:#111b21;
  box-shadow:0 1px 0.5px rgba(11,20,26,.13);
  overflow-wrap:break-word;
  text-align:start;
}
.hero .b::after{content:none;display:none}
.hero .b .tx{display:inline}
.hero .b .meta{
  float:inline-end;
  display:inline-flex;
  align-items:center;
  gap:3px;
  margin-block:6px -2px;
  margin-inline-start:12px;
  font-size:11px;
  line-height:14px;
  font-weight:400;
  color:#8696a0;
  font-variant-numeric:tabular-nums;
}
.hero .b.g{
  align-self:flex-end;
  background:#D9FDD3;
}
.hero .b.g:not(:has(+ .b.g)){border-end-end-radius:5px}
.hero .b.g .meta{color:#5E8A78}
.hero .b.g .meta::after{
  content:"";
  width:16px;
  height:11px;
  background:url("wa-ticks.svg") center / 16px 11px no-repeat;
}
.hero .b.o{
  align-self:flex-start;
  background:#fff;
}
.hero .b.o:not(.typing):not(:has(+ .b.o)){border-end-start-radius:5px}
/* tail only on the last bubble of a run; the path bulges toward x=0 */
.hero .b.g:not(:has(+ .b.g))::before,
.hero .b.o:not(.typing):not(:has(+ .b.o))::before{
  content:"";
  position:absolute;
  inset-block-end:-1px;
  width:12px;
  height:16px;
  background:#fff;
  clip-path:path("M12 0 C12 8 7 14 0 16 L12 16 Z");
}
.hero .b.g:not(:has(+ .b.g))::before{
  inset-inline-end:-8px;
  inset-inline-start:auto;
  background:#D9FDD3;
}
html[lang=en] .hero .b.g:not(:has(+ .b.g))::before{transform:scaleX(-1)}
.hero .b.o:not(.typing):not(:has(+ .b.o))::before{
  inset-inline-start:-8px;
  inset-inline-end:auto;
  background:#fff;
}
html[lang=ar] .hero .b.o:not(.typing):not(:has(+ .b.o))::before{transform:scaleX(-1)}
.hero .b.typing{
  display:inline-flex;
  flex-direction:row;
  align-items:center;
  gap:4px;
  width:auto;
  padding:12px 14px 11px;
}
.hero .b.typing i{background:#9aa3a8;width:7px;height:7px}
.hero .b.typing::before{content:none}

/* link preview */
.hero .b.wa-card{
  max-width:92%;
  padding:4px 4px 2px;
}
.hero .wa-preview{
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:8px;
  min-width:196px;
  padding:6px;
  border-radius:8px;
  background:#F0F2F5;
}
.hero .wa-thumb{
  flex:none;
  width:52px;
  height:52px;
  border-radius:8px;
  background:#F6F1E8 url("wa-menu.svg") center / cover no-repeat;
  box-shadow:inset 0 0 0 0.5px rgba(48,44,64,.12);
}
.hero .wa-card-tx{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  min-width:0;
  gap:1px;
  text-align:start;
}
.hero .wa-card-title{
  font-size:14.5px;
  line-height:18px;
  font-weight:700;
  color:#111b21;
}
.hero .wa-card-desc{
  font-size:13px;
  line-height:17px;
  font-weight:400;
  color:#667781;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:100%;
}
.hero .wa-card-dom{
  font-size:12px;
  line-height:16px;
  font-weight:400;
  color:#027EB5;
  white-space:nowrap;
}

/* composer stays physical left to right, in Arabic too: + | field | camera | mic */
.hero .wa-compose{
  direction:ltr;
  flex:none;
  display:flex;
  align-items:center;
  gap:8px;
  margin:2px 8px 12px;
  z-index:3;
}
html[lang=ar] .hero .wa-field{direction:rtl}
.hero .wa-plus,
.hero .wa-cam,
.hero .wa-mic{
  flex:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.hero .wa-plus svg,
.hero .wa-cam svg,
.hero .wa-mic svg{display:block}
.hero .wa-plus{
  width:34px;
  height:34px;
  border-radius:50%;
  background:rgba(255,255,255,.94);
  color:#54656f;
  box-shadow:0 1px 0.5px rgba(11,20,26,.13);
}
.hero .wa-cam{
  width:28px;
  height:28px;
  color:#54656f;
}
.hero .wa-field{
  flex:1;
  min-width:0;
  height:36px;
  padding-inline:14px;
  border-radius:18px;
  background:#fff;
  box-shadow:0 1px 0.5px rgba(11,20,26,.13);
  display:flex;
  align-items:center;
}
.hero .wa-ph{
  flex:1;
  min-width:0;
  font-size:16px;
  line-height:20px;
  color:#8696a0;
  white-space:nowrap;
  overflow:hidden;
}
.hero .wa-mic{
  width:36px;
  height:36px;
  border-radius:50%;
  background:#1FA855;
  color:#fff;
}
.hero .ios-home{
  position:absolute;
  z-index:4;
  inset-inline-start:50%;
  inset-block-end:6px;
  width:112px;
  height:5px;
  margin-inline-start:-56px;
  border-radius:3px;
  background:#111;
}

@media (max-width:767px){
  .hero .demo-label{display:flex}
  .hero .hd-chip{display:none}
  .hero .phone-card{max-width:none;padding:14px 10px 0;border-radius:24px}
  .hero .iphone{height:604px;margin-bottom:-52px;border-radius:44px;padding:7px}
  .hero .iphone .wa{border-radius:37px;height:auto;max-width:none;padding-bottom:48px}
  .hero .ios-island{width:96px;height:30px;margin-inline-start:-48px}
  .hero .b{font-size:17px;line-height:20px;font-weight:600}
  .hero .wa-day{display:inline-flex}
  .hero .wa-body{padding:4px 10px 6px}
  .hero .wa-body .scroll{margin-block-start:auto}
  .hero .wa-id .nm{font-size:15px}
}
@media (max-width:767px) and (max-height:720px){
  .hero .wa-day{display:inline-flex}
  .hero .iphone{height:560px;margin-bottom:-52px}
}

/* phone: a smaller crop, with air around it. Desktop stays as approved. */
@media (max-width:480px){
  .hero{padding-block:32px 96px}
  .hero .eyebrow{margin-block-end:12px}
  .hero .lead{margin-block-start:20px}
  .hero .acts{margin-block-start:32px}
  .hero .demo{
    width:75vw;
    max-width:75vw;
    align-self:center;
    margin-inline:auto;
    margin-block-start:48px;
  }
  .hero .demo-label{
    width:100%;
    max-width:none;
    margin-block-end:32px;
  }
  .hero .phone-card{
    width:100%;
    max-width:none;
    height:528px;
    padding:0;
    border-radius:0;
    background:transparent;
    overflow:hidden;
    -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 calc(100% - 72px),transparent 100%);
    mask-image:linear-gradient(to bottom,#000 0%,#000 calc(100% - 72px),transparent 100%);
  }
  .hero .iphone{
    height:680px;
    margin-bottom:0;
    box-shadow:none;
  }
  .hero .wa-body .scroll{margin-block-start:0}
  .hero .trust{margin-block-start:48px}
}

/* desktop: phone top lines up with the headline, and the section crops the bottom */
@media (min-width:1024px){
  .hero{padding-block-end:0;overflow:hidden}
  .hero .demo{
    align-self:stretch;
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-rows:44px minmax(0,1fr);
    align-items:center;
    column-gap:8px;
    width:100%;
    min-width:0;
    margin-block-start:18px;
  }
  .hero .demo-label{
    grid-column:1;
    grid-row:1;
    margin:0;
    max-width:none;
    width:auto;
  }
  .hero .ctrls{
    grid-column:2;
    grid-row:1;
    margin:0;
  }
  .hero .phone-card{
    grid-column:1 / -1;
    grid-row:2;
    position:relative;
    align-self:start;
    justify-self:stretch;
    width:100%;
    max-width:100%;
    height:auto;
    aspect-ratio:0.62;
    min-height:0;
    padding:0;
    overflow:hidden;
    border-start-start-radius:28px;
    border-start-end-radius:28px;
    border-end-start-radius:0;
    border-end-end-radius:0;
    background:#EFEFEF;
  }
  .hero .iphone{
    position:absolute;
    top:10px;
    inset-inline:10px;
    width:auto;
    height:calc(100% + 40px);
    margin:0;
  }
  .hero .iphone .wa{padding-bottom:52px}
}
.hero .b .meta{color:#5F6E78} .hero .b.g .meta{color:#4A6E60} .hero .wa-card-desc{color:#56646D} .hero .wa-card-dom{color:#006A99}