/* آکادمی، عضویت در رصد، و فهرست ابزارها
   سیستم طراحی: design-system/nariman-yadollahi/MASTER.md */

/* ══ PAGE HEAD ══════════════════════════════════════════════════════ */
.page-head {
  padding: var(--space-2xl) 0 var(--space-lg);
  border-block-end: 1px solid var(--color-border);
}
.page-hl {
  font-size: var(--text-hero);
  font-weight: var(--weight-display);
  line-height: 1.35;
  max-width: 16ch;
  margin-bottom: var(--space-md);
}
.page-hl span { color: var(--color-accent); }
.page-lead { color: var(--color-fg-muted); max-width: 62ch; }

.notice {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-top: var(--space-md);
  padding: 14px var(--space-sm);
  border: 1px dashed var(--color-border-strong);
  border-radius: 12px;
  color: var(--color-fg-subtle);
  font-size: var(--text-small);
  max-width: 62ch;
}
.notice svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 3px; color: var(--color-fg-muted); }

/* ══ SUBSCRIBE ══════════════════════════════════════════════════════ */
.sub-form { max-width: 520px; margin-top: var(--space-lg); }
.sub-row { display: flex; gap: 10px; flex-wrap: wrap; }
.sub-row input[type="email"] {
  flex: 1 1 220px;
  min-height: 52px;
  padding: 14px 18px;
  border-radius: 12px;
  border: 1px solid var(--color-border-strong);
  background: var(--color-surface-2);
  color: var(--color-fg);
  font-family: inherit;
  font-size: 1rem;
}
.sub-row input[type="email"]::placeholder { color: var(--color-fg-subtle); }
.sub-row input[type="email"]:focus-visible { border-color: var(--color-accent); }
.sub-row input[aria-invalid="true"] { border-color: var(--color-danger); }
.sub-row .cta-btn { min-height: 52px; padding: 14px 32px; }
.sub-note { color: var(--color-fg-subtle); font-size: var(--text-small); margin-top: 12px; }
.sub-status { font-size: 0.9375rem; margin-top: 12px; min-height: 1.5em; }
.sub-status.err { color: var(--color-danger); }
.sub-status.ok  { color: var(--color-accent); }

/* اثبات اجتماعی — جای خالی تا رسیدن عددها */
.proof {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md);
  margin-top: var(--space-lg);
  padding-top: var(--space-lg);
  border-block-start: 1px solid var(--color-border);
}
.proof p { color: var(--color-fg-subtle); font-size: var(--text-small); }
.proof-logos { display: flex; flex-wrap: wrap; gap: 10px; }
.proof-slot {
  width: 92px; height: 40px;
  border: 1px dashed var(--color-border);
  border-radius: 8px;
  display: grid; place-items: center;
  color: var(--color-fg-subtle);
  font-size: 0.6875rem;
}

/* ══ ISSUE ANATOMY — دو بخش هر شماره ═══════════════════════════════ */
.anatomy { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); }
.part {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: 18px;
  padding: var(--space-md);
}
.part.pro { border-color: rgba(1,184,254,.4); background: var(--color-accent-faint); }
.part-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: var(--space-sm);
}
.part-head h3 { font-size: var(--text-h3); font-weight: bold; }
.part.pro .part-head h3 { color: var(--color-accent); }
.badge-pro {
  font-size: 0.75rem;
  font-weight: var(--weight-label);
  padding: 3px 12px;
  border-radius: 40px;
  background: var(--color-accent);
  color: var(--color-on-accent);
}
.part > p { color: var(--color-fg-muted); font-size: 0.9375rem; margin-bottom: var(--space-sm); }
.part ul { list-style: none; display: grid; gap: 10px; }
.part li {
  position: relative;
  padding-inline-start: 24px;
  color: var(--color-fg-muted);
  font-size: 0.9375rem;
  line-height: 1.8;
}
.part li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.6em;
  width: 13px; height: 7px;
  border-inline-start: 2px solid var(--color-accent);
  border-block-end: 2px solid var(--color-accent);
  transform: rotate(-45deg);
}

/* ══ ISSUE LIST — بایگانی شماره‌ها ══════════════════════════════════ */
.issues { display: grid; gap: 12px; }
.issue {
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
  flex-wrap: wrap;
  padding: var(--space-sm) var(--space-md);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  transition: border-color .25s ease-out;
}
.issue:hover { border-color: var(--color-accent); }
.issue-date { color: var(--color-fg-subtle); font-size: var(--text-small); min-width: 92px; }
.issue-title { font-weight: bold; flex: 1 1 260px; }
/* زمان مطالعه — خواننده باید بداند خودش را به چه می‌سپارد */
.issue-time { color: var(--color-fg-subtle); font-size: var(--text-small); }

/* ══ TOOLS ══════════════════════════════════════════════════════════ */
.tool-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); }
.tool {
  display: flex;
  flex-direction: column;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  padding: var(--space-md);
  transition: border-color .25s ease-out, transform .25s ease-out;
}
.tool:hover { border-color: var(--color-accent); transform: translateY(-3px); }
.tool[hidden] { display: none; }
.tool-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.tool h3 { font-size: 1.0625rem; font-weight: bold; }
.tool-tag {
  font-size: 0.75rem;
  color: var(--color-accent);
  background: var(--color-accent-faint);
  border-radius: 40px;
  padding: 3px 12px;
  white-space: nowrap;
}
.tool p { color: var(--color-fg-muted); font-size: 0.9375rem; flex-grow: 1; margin-bottom: var(--space-sm); }
.tool-use {
  padding-top: var(--space-sm);
  border-block-start: 1px solid var(--color-border);
  font-size: var(--text-small);
  color: var(--color-fg-subtle);
}
.tool-use strong { color: var(--color-fg-muted); font-weight: var(--weight-label); }

/* ══ COMPARE — رایگان در برابر پرو ═════════════════════════════════ */
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); align-items: start; }
.tier {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: 18px;
  padding: var(--space-md);
}
.tier.featured { border-color: var(--color-accent); border-width: 2px; background: var(--color-surface-3); }
.tier h3 { font-size: var(--text-h3); font-weight: bold; margin-bottom: 6px; }
.tier-for { color: var(--color-fg-subtle); font-size: var(--text-small); margin-bottom: var(--space-sm); }
.tier-price {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  padding-block: var(--space-sm);
  border-block: 1px solid var(--color-border);
  margin-bottom: var(--space-sm);
}
.tier-num { font-size: 1.75rem; font-weight: var(--weight-display); line-height: 1.3; }
.tier-unit { color: var(--color-fg-subtle); font-size: var(--text-small); }
.tier ul { list-style: none; display: grid; gap: 10px; margin-bottom: var(--space-md); flex-grow: 1; }
.tier li {
  position: relative;
  padding-inline-start: 24px;
  color: var(--color-fg-muted);
  font-size: 0.9375rem;
  line-height: 1.8;
}
.tier li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.6em;
  width: 13px; height: 7px;
  border-inline-start: 2px solid var(--color-accent);
  border-block-end: 2px solid var(--color-accent);
  transform: rotate(-45deg);
}
.tier li.off { color: var(--color-fg-subtle); }
.tier li.off::before {
  border: none; transform: none;
  inset-block-start: 0.85em;
  width: 12px; height: 2px;
  background: var(--color-border-strong);
}
.tier .cta-btn, .tier .btn-ghost { width: 100%; box-shadow: none; }

/* ══ FAQ ════════════════════════════════════════════════════════════ */
.faq { display: grid; gap: 12px; max-width: 68ch; }
.faq details {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color .25s ease-out;
}
.faq details[open] { border-color: var(--color-border-strong); }
.faq summary {
  cursor: pointer;
  padding: var(--space-sm) var(--space-md);
  font-weight: var(--weight-label);
  list-style: none;
  display: flex; align-items: center; gap: 12px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before {
  content: "";
  flex-shrink: 0;
  width: 9px; height: 9px;
  border-inline-end: 2px solid var(--color-accent);
  border-block-end: 2px solid var(--color-accent);
  transform: rotate(45deg);
  transition: transform .2s ease-out;
}
.faq details[open] summary::before { transform: rotate(-135deg); }
.faq summary:hover { color: var(--color-accent); }
.faq .answer { padding: 0 var(--space-md) var(--space-md); color: var(--color-fg-muted); font-size: 0.9375rem; }

/* ══ RESPONSIVE ═════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .tool-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .anatomy, .compare, .tool-grid { grid-template-columns: 1fr; }
  .sub-row .cta-btn { width: 100%; }
}