/* صفحة الحالة: فكرة ← مشكلة ← ما بنيناه ← قرارات ← ما يحصل عليه ← التالي */
.c-hero{padding-block:clamp(40px,6vw,80px) 0}
.crumb{display:inline-flex;gap:10px;font-size:14px;color:var(--w-55);margin-block-end:clamp(32px,5vw,56px);border-block-end:1px solid var(--w-14);padding-block-end:3px}
.c-title{display:grid;grid-template-columns:1fr auto;gap:24px 48px;align-items:end;margin-block-end:clamp(32px,4vw,48px)}
.c-title h1{font-size:clamp(56px,10vw,140px)}
.c-title .idea{font-size:clamp(20px,2vw,26px);line-height:1.6;color:var(--w-70);max-inline-size:30ch;margin-block-start:6px}
.c-title .tags{justify-content:flex-end;max-inline-size:340px}
.c-hero .cover{aspect-ratio:21/9;border-radius:22px}
.c-hero .cover .wm{font-size:clamp(64px,12vw,180px)}
.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-block-start:28px;font-size:14px}
.facts div{border-block-start:1px solid var(--w-14);padding-block-start:12px}
.facts dt{color:var(--w-55)}
.facts dd{color:var(--white)}

.two{display:grid;grid-template-columns:1fr 1.3fr;gap:clamp(28px,5vw,96px);align-items:start}
.two .h-l{max-inline-size:14ch}
.two p+p{margin-block-start:16px}
.body-l{font-size:clamp(18px,1.5vw,20px);line-height:1.85;color:var(--w-70)}
.paper .body-l{color:var(--k-70)}
.pains{display:grid;gap:0;margin-block-start:8px}
.pains li{list-style:none;display:grid;grid-template-columns:44px 1fr;gap:12px;padding-block:18px;border-block-end:1px solid var(--w-14);color:var(--w-70)}
.pains li .num{color:var(--white);font-size:13px;padding-block-start:4px}

/* مسرح الواجهة الحية */
.stage{border-radius:26px;padding:clamp(20px,4vw,56px);display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,390px);gap:clamp(24px,4vw,64px);align-items:center}
.stage .try{display:grid;gap:18px;align-content:center}
.stage .try h3{font-size:clamp(24px,2.6vw,34px)}
.stage .try ol{list-style:none;display:grid;gap:10px;counter-reset:t}
.stage .try li{counter-increment:t;display:grid;grid-template-columns:30px 1fr;gap:10px;font-size:16px;line-height:1.7}
.stage .try li::before{content:counter(t,decimal-leading-zero);font-family:var(--lat);font-size:12px;padding-block-start:4px;opacity:.7}
.phone{position:relative;inline-size:100%;max-inline-size:390px;margin-inline:auto;aspect-ratio:390/780;border-radius:40px;padding:12px;background:#000;box-shadow:0 0 0 1px rgba(255,255,255,.12),0 30px 80px rgba(0,0,0,.45)}
.phone .scr{position:relative;inline-size:100%;block-size:100%;border-radius:30px;overflow:hidden}
.phone .notch{position:absolute;inset-block-start:20px;left:50%;transform:translateX(-50%);inline-size:96px;block-size:24px;border-radius:999px;background:#000;z-index:5}
.wide{grid-template-columns:1fr}
.wide .screen{border-radius:18px;overflow:hidden;box-shadow:0 0 0 1px rgba(255,255,255,.1)}
.cap{font-size:13px;color:var(--w-55);margin-block-start:14px;text-align:center}

/* القرارات */
.decs{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,40px)}
.dec{border-block-start:1px solid var(--k-14);padding-block-start:22px}
.dec .num{font-size:13px;color:var(--k-70)}
.dec h3{font-size:clamp(21px,2vw,26px);margin-block:10px 10px;line-height:1.4}
.dec p{color:var(--k-70);font-size:16px}

/* ما يحصل عليه */
.gets{display:grid;grid-template-columns:repeat(2,1fr);gap:0 clamp(24px,4vw,64px)}
.gets li{list-style:none;display:flex;gap:14px;align-items:baseline;padding-block:18px;border-block-end:1px solid var(--w-14);font-size:17px}
.gets li::before{content:"";flex:none;inline-size:7px;block-size:7px;border-radius:50%;border:1.5px solid var(--white);transform:translateY(-2px)}

/* التالي */
.next{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,64px);align-items:center}
.next .acts{display:flex;gap:12px;flex-wrap:wrap;margin-block-start:28px}
.next-card .cover{aspect-ratio:16/10}
.next-card .meta{display:flex;justify-content:space-between;margin-block-start:14px;font-size:14px;color:var(--w-55)}
.disc{margin-block-start:clamp(56px,7vw,96px);padding-block-start:20px;border-block-start:1px solid var(--w-14);font-size:13px;line-height:1.8;color:var(--w-55);max-inline-size:80ch}

@media (max-width:900px){
  .c-title{grid-template-columns:1fr}
  .c-title .tags{justify-content:flex-start}
  .facts{grid-template-columns:1fr 1fr}
  .two,.next{grid-template-columns:1fr}
  .stage{grid-template-columns:1fr}
  .decs{grid-template-columns:1fr}
  .gets{grid-template-columns:1fr}
}
@media (max-width:520px){
  .stage{padding:14px;border-radius:20px}
  .phone{border-radius:34px;padding:8px}
  .phone .scr{border-radius:27px}
  .c-hero .cover{aspect-ratio:4/3}
}