/* ═══════════════════════════════════════════════════════════════════════════
   sketch — Pages
   تنسيقات الصفحات الداخلية: المسار · قصتنا · الباقات · تواصل.
   ═════════════════════════════════════════════════════════════════════════ */

/* ═══ ترويسة الصفحة ══════════════════════════════════════════════════════ */
.page-hero{
  background:var(--ink); color:var(--paper); position:relative; overflow:hidden;
  padding:160px var(--space-gutter) 90px;
}
.page-hero .wrap{ position:relative; z-index:2; }

.page-title{
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(30px, 4.6vw, 62px); line-height:1.28; letter-spacing:-.02em;
  text-wrap:balance; max-width:18ch;
  animation:title-in .55s var(--ease) backwards;
}
.page-title .w-sys{
  color:var(--violet);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--violet) 45%, transparent);
  padding:.04em .16em; margin-inline:-.04em; white-space:nowrap;
}
.page-lead{
  margin-top:22px; max-width:52ch; font-size:clamp(15px,1.3vw,17px);
  line-height:1.95; color:var(--text-muted); text-wrap:pretty;
  animation:rise .5s var(--ease) .2s backwards;
}
.page-specs{
  margin-top:44px; display:flex; gap:clamp(24px,4vw,56px); flex-wrap:wrap;
  padding-top:26px; border-top:1px solid var(--line-dark);
  animation:rise .5s var(--ease) .3s backwards;
}

/* ═══ المسار: الماستان ═══════════════════════════════════════════════════ */
.dd-figure{
  margin-top:60px; display:flex; flex-direction:column; align-items:center; gap:16px;
  padding:50px 30px; background:var(--white); border:1px solid var(--line);
}
.dd-svg{ width:min(100%,420px); }
.dd-svg path{
  fill:none; stroke:var(--violet); stroke-width:2;
  stroke-dasharray:400; stroke-dashoffset:400;
  animation:draw 1.6s var(--ease) forwards;
}
.dd-svg .dot{ fill:var(--violet); }
.dd-phases{ display:flex; width:min(100%,420px); }
.dd-phases span{ flex:1; text-align:center; font-size:10px; color:var(--grey); letter-spacing:.06em; }
@keyframes draw{ to{ stroke-dashoffset:0; } }

/* ═══ المراحل ════════════════════════════════════════════════════════════ */
.stage-list{ margin-top:50px; border-top:1px solid var(--line-dark); }
.stage{
  position:relative; display:grid; align-items:start;
  grid-template-columns:82px minmax(0,1fr) minmax(0,240px);
  gap:clamp(18px,3vw,44px);
  padding:clamp(28px,3.4vw,44px) clamp(10px,1.6vw,20px);
  border-bottom:1px solid var(--line-dark);
  transition:background var(--dur-fast) ease;
}
.stage:hover{ background:color-mix(in srgb, var(--paper) 5%, transparent); }

.stage-mark{ display:flex; flex-direction:column; gap:7px; padding-top:.3em; }
.stage-num{ font-size:13px; color:var(--violet); }
.stage-en{ font-size:8.5px; letter-spacing:.16em; color:var(--grey); }

.stage-name{ font-family:var(--font-display); font-weight:800; font-size:clamp(22px,2.6vw,32px); }
.stage-lede{ margin-top:8px; font-size:15px; color:var(--violet); font-weight:500; }
.stage-body{ margin-top:14px; font-size:14.5px; line-height:1.95; color:var(--grey-on-dark); max-width:56ch; text-wrap:pretty; }

.stage-out{
  padding:16px 18px; border-inline-start:2px solid var(--violet);
  background:color-mix(in srgb, var(--violet) 10%, transparent);
}
.stage-out .mono{ font-size:9px; letter-spacing:.14em; color:var(--violet); }
.stage-out p{ margin-top:7px; font-size:13.5px; line-height:1.8; color:var(--paper); }

@media (max-width:860px){
  .stage{ grid-template-columns:60px minmax(0,1fr); }
  .stage-out{ grid-column:2; }
}

/* ═══ الحدود ═════════════════════════════════════════════════════════════ */
.limits-section{ background:var(--paper-dim); }
.limit-list{ margin-top:52px; display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line); }
.limit{ background:var(--paper); padding:30px 28px; }
.limit-no{
  font-family:var(--font-display); font-weight:700; font-size:18px;
  display:flex; align-items:center; gap:11px;
}
.limit-x{
  width:15px; height:15px; flex:none; border:1.5px solid var(--grey); border-radius:2px; position:relative;
}
.limit-x::after{
  content:''; position:absolute; inset:-1px;
  background:linear-gradient(45deg, transparent 44%, var(--grey) 44%, var(--grey) 56%, transparent 56%);
}
.limit-why{ margin-top:12px; font-size:14px; line-height:1.9; color:var(--grey); }
@media (max-width:760px){ .limit-list{ grid-template-columns:1fr; } }

/* ═══ قصتنا ══════════════════════════════════════════════════════════════ */
.story{ margin-top:50px; max-width:760px; }
.chapter{ display:grid; grid-template-columns:52px 1fr; gap:24px; padding-block:32px; border-bottom:1px dashed var(--line); }
.chapter:last-child{ border-bottom:none; }
.chapter-num{ font-size:22px; color:var(--violet); line-height:1; padding-top:.2em; }
.chapter-title{ font-family:var(--font-display); font-weight:700; font-size:clamp(19px,2.2vw,25px); line-height:1.5; }
.chapter-body{ margin-top:12px; font-size:15.5px; line-height:2.05; color:#2a2a2a; text-wrap:pretty; }
@media (max-width:620px){ .chapter{ grid-template-columns:1fr; gap:10px; } }

.pair-list{ margin-top:44px; display:flex; flex-direction:column; gap:14px; max-width:820px; }
.pair{
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  padding:16px 20px; background:rgba(255,255,255,.09); border-radius:var(--radius);
}
.pair-from{ color:rgba(255,255,255,.6); font-size:14.5px; }
.pair-arrow{ color:var(--ink); font-size:17px; }
.pair-to{ color:#fff; font-weight:600; font-size:15.5px; }

/* ═══ الفريق ═════════════════════════════════════════════════════════════ */
.team-grid{
  margin-top:56px; display:grid; grid-template-columns:repeat(4,1fr); gap:18px;
}
.member{
  border:1px solid var(--line); background:var(--white);
  padding:26px 22px 24px; position:relative; overflow:hidden;
  transition:border-color var(--dur-fast) ease, transform var(--dur-fast) ease;
}
.member:hover{ border-color:var(--violet); transform:translateY(-4px); }
.member.is-lead{ grid-column:span 2; }

/* ألوان هايلايتر خلف كل بطاقة — استثناء موثّق للقاعدة الذهبية (README §2) */
.member::before{
  content:''; position:absolute; inset-inline-start:0; top:0; bottom:0; width:4px;
  background:var(--tone);
}
.tone-a{ --tone:#FFCF9C; } .tone-b{ --tone:#FFE45E; } .tone-c{ --tone:#7EE8FA; }
.tone-d{ --tone:#FFB4A2; } .tone-e{ --tone:#C9A7FF; } .tone-f{ --tone:#FFD6E8; }
.tone-g{ --tone:#A8E6A3; }

.member-nick{ font-size:9px; letter-spacing:.1em; color:var(--violet); }
.member-name{ font-family:var(--font-display); font-weight:800; font-size:21px; margin-top:10px; }
.member-role{ font-size:10px; letter-spacing:.08em; color:var(--grey); margin-top:4px; }
.member-bio{ margin-top:14px; font-size:13.5px; line-height:1.9; color:var(--grey); }

@media (max-width:1000px){ .team-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .team-grid{ grid-template-columns:1fr; } .member.is-lead{ grid-column:span 1; } }

/* ═══ جدول المقارنة ══════════════════════════════════════════════════════ */
.table-scroll{ margin-top:50px; overflow-x:auto; }
.cmp{ width:100%; min-width:620px; border-collapse:collapse; }
.cmp th, .cmp td{ padding:15px 16px; text-align:start; border-bottom:1px solid var(--line-dark); }
.cmp thead th{
  font-family:var(--font-display); font-weight:700; font-size:16px;
  border-bottom-color:var(--violet);
}
.cmp thead th:first-child{ font-family:var(--font-mono); font-size:10px; letter-spacing:.12em; color:var(--grey); font-weight:400; }
.cmp tbody th{ font-weight:400; font-size:14px; color:var(--grey-on-dark); }
.cmp-cell{ text-align:center; }
.cmp-mark{ display:inline-block; width:13px; height:13px; border:1.5px solid var(--grey); border-radius:2px; position:relative; }
.cmp-cell.is-yes .cmp-mark{ background:var(--violet); border-color:var(--violet); }
.cmp-cell.is-partial .cmp-mark{ background:linear-gradient(135deg, var(--violet) 50%, transparent 50%); border-color:var(--violet); }
.cmp-cell.is-no .cmp-mark::after{
  content:''; position:absolute; inset:-1px;
  background:linear-gradient(45deg, transparent 44%, currentColor 44%, currentColor 56%, transparent 56%);
}
.cmp-closer-row td{ font-size:13px; line-height:1.75; color:var(--paper); vertical-align:top; }
.cmp-closer-row th, .cmp-closer-row td{ border-bottom:none; padding-top:22px; }
.cmp-closer-row th{ color:var(--violet); font-weight:600; }

/* ═══ الأسئلة ════════════════════════════════════════════════════════════ */
.faq-list{ margin-top:50px; max-width:820px; border-top:1px solid var(--line); }
.faq{ border-bottom:1px solid var(--line); }
.faq summary{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:22px 4px; cursor:pointer; list-style:none;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq-q{ font-family:var(--font-display); font-weight:700; font-size:16.5px; line-height:1.6; }
.faq-icon{ width:13px; height:13px; flex:none; position:relative; }
.faq-icon::before, .faq-icon::after{
  content:''; position:absolute; background:var(--violet); transition:transform var(--dur-fast) var(--ease);
}
.faq-icon::before{ inset-inline:0; top:50%; height:1.5px; }
.faq-icon::after{ inset-block:0; left:50%; width:1.5px; margin-inline-start:-.75px; }
.faq[open] .faq-icon::after{ transform:scaleY(0); }
.faq-a{ padding:0 4px 24px; font-size:14.5px; line-height:2; color:var(--grey); max-width:64ch; }

/* ═══ التواصل ════════════════════════════════════════════════════════════ */
.contact-layout{ display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,.8fr); gap:clamp(30px,5vw,70px); align-items:start; }

.lead-form{ margin-top:34px; display:flex; flex-direction:column; gap:20px; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.field{ display:flex; flex-direction:column; gap:8px; }
.field label, .field legend{ font-size:13.5px; font-weight:500; }
.req{ color:var(--violet); }
.field input, .field select, .field textarea{
  font-family:var(--font-ar); font-size:14.5px; color:var(--ink);
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  padding:12px 14px; width:100%;
  transition:border-color var(--dur-fast) ease;
}
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--violet); }
.field input[aria-invalid="true"]{ border-color:var(--err); }
.field textarea{ resize:vertical; line-height:1.8; }
.field-err{ font-size:12px; color:var(--err); }

.choice-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:4px; }
.choice input{ position:absolute; opacity:0; width:0; height:0; }
.choice-box{
  display:block; padding:14px 16px; border:1px solid var(--line);
  border-radius:var(--radius); background:var(--white); cursor:pointer;
  transition:border-color var(--dur-fast) ease, background var(--dur-fast) ease;
}
.choice:hover .choice-box{ border-color:var(--violet); }
.choice input:checked + .choice-box{ border-color:var(--violet); background:var(--violet-soft); }
.choice input:focus-visible + .choice-box{ outline:2px solid var(--violet); outline-offset:2px; }
.choice-name{ display:block; font-size:14px; font-weight:600; }
.choice-hint{ display:block; margin-top:4px; font-size:12px; color:var(--grey); }

.field-consent .consent{ display:flex; align-items:flex-start; gap:11px; font-weight:400; }
.consent input{ width:auto; margin-top:.25em; accent-color:var(--violet); flex:none; }
.consent span{ font-size:13px; line-height:1.8; color:var(--grey); }

.form-msg{ margin-top:22px; padding:14px 18px; border-inline-start:3px solid; font-size:14px; line-height:1.8; }
.form-msg.is-ok{ border-color:var(--ok); background:color-mix(in srgb, var(--ok) 10%, transparent); color:var(--ok); }
.form-msg.is-err{ border-color:var(--err); background:color-mix(in srgb, var(--err) 8%, transparent); color:var(--err); }
.form-note{ font-size:10px; letter-spacing:.06em; color:var(--grey); }

.contact-side{ display:flex; flex-direction:column; gap:18px; position:sticky; top:100px; }
.side-card{ border:1px solid var(--line); background:var(--white); padding:24px 22px; }
.side-card .mono{ font-size:10px; letter-spacing:.14em; color:var(--violet); }
.contact-list{ margin-top:16px; display:flex; flex-direction:column; gap:14px; }
.contact-list li{ display:flex; flex-direction:column; gap:4px; }
.contact-list .mono{ font-size:8.5px; letter-spacing:.14em; color:var(--grey); }
.contact-list a:hover{ color:var(--violet); }
.next-steps{ margin-top:16px; display:flex; flex-direction:column; gap:12px; counter-reset:s; }
.next-steps li{ display:flex; gap:11px; font-size:13.5px; line-height:1.8; color:var(--grey); }
.next-steps .mono{ color:var(--violet); font-size:11px; flex:none; padding-top:.2em; }
.side-note{ font-size:12px; line-height:1.8; color:var(--grey); padding-inline-start:4px; }

@media (max-width:900px){
  .contact-layout{ grid-template-columns:1fr; }
  .contact-side{ position:static; }
}
@media (max-width:620px){
  .field-row, .choice-grid{ grid-template-columns:1fr; }
}

/* ═══ الخاتمة المشتركة ═══════════════════════════════════════════════════ */
.closing{ background:var(--ink); color:#fff; text-align:center; padding:100px var(--space-gutter); }
.closing h2{
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(24px,4vw,40px); max-width:620px; margin:0 auto; line-height:1.55;
}
.closing h2 .hl{ color:var(--violet); }
.closing .btn{ margin-top:34px; }

@media (prefers-reduced-motion: reduce){
  .page-title, .page-lead, .page-specs{ animation:none !important; }
  .dd-svg path{ stroke-dashoffset:0; animation:none; }
}