/* ============================================================
   YOUNGHAIR — clarity pass
   מה שנוסף כדי שגולש יבין בתוך 5 שניות מה YoungHair עושה:
   שורת הגדרה בהירו, סקשן מיצוב, וחלוקת האחריות מול הרופא.
   נטען אחרון, מרחיב את main/polish/rev-v11 ולא משכפל אותם.
   ============================================================ */

/* ---------- הירו: הגדרה + שורת מיצוב ---------- */
.hero__brandline {
  display: inline-flex;
  align-items: center;
  margin: 0 0 18px;
  padding: 8px 16px;
  border: 1px solid var(--gold-border, rgba(201,165,121,.32));
  border-radius: 999px;
  background: var(--gold-faint, rgba(201,165,121,.14));
  color: #6E5326;
  font-size: clamp(12px, 1vw, 14px);
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 1.35;
}
.hero__micro {
  margin: 12px 0 0;
  font-size: 13.5px;
  color: var(--gray-500, #5A6779);
  font-weight: 500;
}
.hero__strap {
  margin: 18px 0 30px;
  padding-inline-start: 16px;
  border-inline-start: 3px solid var(--gold, #C9A579);
  font-size: clamp(14px, 1.2vw, 16.5px);
  font-weight: 600;
  color: var(--ink-soft, #1E293B);
  letter-spacing: -.005em;
}

/* ---------- סקשן מיצוב ---------- */
.section--positioning {
  padding-top: clamp(64px, 8vw, 118px);
  padding-bottom: clamp(64px, 8vw, 118px);
  background:
    radial-gradient(70% 60% at 50% 0%, rgba(219,234,254,.55) 0%, transparent 65%),
    linear-gradient(180deg, #FFFFFF 0%, var(--off-white, #FAFBFC) 100%);
}
.positioning { max-width: 920px; margin-inline: auto; text-align: center; }
.positioning .display { margin-bottom: 20px; }
.positioning__body {
  font-size: var(--text-lead, 18px);
  line-height: 1.7;
  color: var(--gray-700, #334155);
  max-width: 68ch;
  margin: 0 auto 42px;
}
.pillars {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
}
.pillar {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 24px 16px; border-radius: 20px; text-align: center;
  background: linear-gradient(180deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,.58) 100%);
  border: 1px solid rgba(255,255,255,.7);
  box-shadow: 0 2px 4px rgba(15,23,42,.04), 0 1px 2px rgba(15,23,42,.03);
}
.pillar__num { font-size: 12px; font-weight: 700; letter-spacing: .08em; color: var(--gold, #C9A579); }
.pillar__name { font-size: clamp(18px,1.8vw,22px); font-weight: 800; color: var(--ink, #0F172A); letter-spacing: -.02em; }
.pillar__sub { font-size: 13px; color: var(--gray-500, #5A6779); line-height: 1.5; max-width: 22ch; }

/* ---------- חלוקת אחריות ---------- */
.roles {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px;
  max-width: 940px; margin-inline: auto;
}
.roles__col {
  padding: 30px 28px; border-radius: 24px;
  background: linear-gradient(180deg, rgba(255,255,255,.94) 0%, rgba(255,255,255,.62) 100%);
  border: 1px solid rgba(255,255,255,.7);
  box-shadow: 0 4px 12px rgba(15,23,42,.06), 0 2px 4px rgba(15,23,42,.04);
}
.roles__title {
  margin: 0 0 18px; padding-bottom: 14px;
  border-bottom: 1px solid var(--gray-200, #E2E8F0);
  font-size: clamp(17px,1.7vw,20px); font-weight: 800; letter-spacing: -.02em;
}
.roles__title--yh  { color: var(--blue-600, #2563EB); }
.roles__title--doc { color: #8A6A38; }
.roles__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.roles__list li {
  position: relative; padding-inline-start: 26px;
  font-size: 14.5px; line-height: 1.55; color: var(--gray-700, #334155);
}
.roles__list li::before {
  content: ''; position: absolute; inset-inline-start: 0; top: 7px;
  width: 8px; height: 8px; border-radius: 50%;
}
.roles__col:first-child .roles__list li::before { background: var(--blue-500, #3B82F6); opacity: .6; }
.roles__col:last-child  .roles__list li::before { background: var(--gold, #C9A579); opacity: .8; }

/* מונח לועזי שנשאר בסוגריים אחרי המונח העברי */
.term-en { font-size: .88em; opacity: .72; white-space: nowrap; }

@media (max-width: 1024px) { .pillars { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767px) {
  .hero__brandline { font-size: 12px; padding: 7px 13px; }
  .hero__strap { font-size: 14px; margin-bottom: 24px; }
  .pillars { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .pillar { padding: 18px 12px; }
  .pillar__sub { font-size: 12px; }
  .roles { grid-template-columns: 1fr; gap: 14px; }
  .roles__col { padding: 24px 22px; }
}