/* ============================================
   מאשרים בקליק — LIVE product case study
   Built on the pf- design system (portfolio-redesign.css).
   Distinct "LIVE / PAID" treatment vs the concept case studies.
   ============================================ */

.csl-wrap { background: var(--pf-surface-2); }

/* ---------- Breadcrumb bar (matches de-Netflixed chrome) ---------- */
.csl-bar {
  position: sticky; top: 0; z-index: 900;
  display: flex; align-items: center; gap: 14px;
  height: 52px; padding: 0 24px;
  background: rgba(246,247,251,0.82);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--pf-line-soft);
}
.csl-bar__back { display: inline-flex; align-items: center; gap: 6px; color: var(--pf-ink-soft); font-size: 0.85rem; font-weight: 600; }
.csl-bar__back:hover { color: var(--pf-ink); }
.csl-bar__back svg { width: 18px; height: 18px; }
.csl-bar__crumb { font-size: 0.82rem; color: var(--pf-ink-soft); }
.csl-bar__crumb strong { color: var(--pf-ink); }

/* ---------- Hero ---------- */
.csl-hero { padding: 64px 0 40px; }
.csl-hero__inner {
  max-width: var(--pf-maxw); margin: 0 auto; padding: 0 24px;
  display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px; align-items: center;
}
.csl-live {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: #0a7d3c; background: rgba(22,163,74,0.1); border: 1px solid rgba(22,163,74,0.28);
  border-radius: 100px; padding: 6px 14px; margin-bottom: 20px;
}
.csl-live::before { content:''; width: 8px; height: 8px; border-radius: 50%; background:#16a34a; box-shadow: 0 0 0 4px rgba(22,163,74,0.22); }
.csl-hero__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.csl-tag { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.04em; color: var(--pf-ink-soft); background: var(--pf-surface); border: 1px solid var(--pf-line); padding: 4px 11px; border-radius: 100px; }
.csl-hero__title { font-size: clamp(2.1rem, 4.4vw, 3.2rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.06; color: var(--pf-ink); margin-bottom: 16px; }
.csl-hero__title .hl { color: var(--pf-accent); }
.csl-hero__desc { font-size: 1.08rem; line-height: 1.65; color: var(--pf-ink-soft); max-width: 560px; margin-bottom: 26px; }
.csl-hero__desc strong { color: var(--pf-ink); font-weight: 600; }
.csl-meta { display: flex; flex-wrap: wrap; gap: 30px; }
.csl-meta__label { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--pf-ink-soft); margin-bottom: 4px; }
.csl-meta__value { font-size: 0.95rem; font-weight: 700; color: var(--pf-ink); }

/* hero phones */
.csl-hero__phones { display: flex; justify-content: center; align-items: flex-end; }
.csl-phone { width: 210px; border-radius: 30px; overflow: hidden; border: 7px solid #14130f; background: #14130f; box-shadow: 0 26px 56px rgba(20,20,43,0.28); }
.csl-phone img { width: 100%; display: block; }
.csl-phone--back { width: 180px; transform: translateX(34px) translateY(-18px) rotate(6deg) scale(0.9); opacity: 0.94; }
.csl-phone--front { position: relative; z-index: 2; }
@media (max-width: 860px) {
  .csl-hero__inner { grid-template-columns: 1fr; gap: 28px; }
  .csl-hero__phones { margin-top: 6px; }
}

/* ---------- Real stats bar ---------- */
.csl-stats { background: linear-gradient(135deg,#17181c 0%,#2b2723 100%); color:#fff; }
.csl-stats__inner {
  max-width: var(--pf-maxw); margin: 0 auto; padding: 34px 24px;
  display: grid; grid-template-columns: repeat(4,1fr); gap: 24px;
}
.csl-stat__num { font-size: clamp(1.8rem, 3.4vw, 2.4rem); font-weight: 800; letter-spacing: -0.02em; }
.csl-stat__label { font-size: 0.84rem; color: rgba(255,255,255,0.62); margin-top: 2px; }
@media (max-width: 700px) { .csl-stats__inner { grid-template-columns: repeat(2,1fr); gap: 20px; } }

/* ---------- Sections ---------- */
.csl-section { padding: 60px 0; }
.csl-section--surface { background: var(--pf-surface); border-top: 1px solid var(--pf-line-soft); border-bottom: 1px solid var(--pf-line-soft); }
.csl-inner { max-width: var(--pf-maxw); margin: 0 auto; padding: 0 24px; }
.csl-inner--narrow { max-width: 820px; }
.csl-eyebrow { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--pf-accent); }
.csl-h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 800; letter-spacing: -0.02em; color: var(--pf-ink); margin: 10px 0 14px; line-height: 1.1; }
.csl-lead { font-size: 1.08rem; line-height: 1.7; color: var(--pf-ink-soft); max-width: 720px; }
.csl-lead strong { color: var(--pf-ink); font-weight: 600; }
.csl-p { font-size: 1.02rem; line-height: 1.7; color: var(--pf-ink-soft); max-width: 720px; margin-top: 14px; }
.csl-p strong { color: var(--pf-ink); font-weight: 600; }

/* pull quote */
.csl-quote { max-width: 860px; margin: 8px 0 0; padding-left: 20px; border-left: 3px solid var(--pf-accent);
  font-size: clamp(1.2rem,2.1vw,1.5rem); font-weight: 700; line-height: 1.4; letter-spacing: -0.01em; color: var(--pf-ink); }
.csl-quote .hl { color: var(--pf-accent); }

/* before/after two-col */
.csl-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 28px; }
.csl-col { background: var(--pf-surface); border: 1px solid var(--pf-line); border-radius: 16px; padding: 26px; }
.csl-section--surface .csl-col { background: var(--pf-surface-2); }
.csl-col__tag { display:inline-block; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 4px 11px; border-radius: 100px; margin-bottom: 14px; }
.csl-col__tag--before { color:#b42318; background: rgba(217,45,32,0.08); }
.csl-col__tag--after { color:#0a7d3c; background: rgba(22,163,74,0.09); }
.csl-list { list-style:none; padding:0; margin:0; }
.csl-list li { position: relative; padding-left: 24px; margin-bottom: 11px; font-size: 0.96rem; line-height: 1.55; color: var(--pf-ink-soft); }
.csl-list li::before { content:''; position:absolute; left:2px; top:9px; width:7px; height:7px; border-radius:50%; background: var(--pf-ink-soft); }
.csl-list--after li::before { background:#16a34a; }
@media (max-width: 700px) { .csl-cols { grid-template-columns: 1fr; } }

/* feature grid (the spec) */
.csl-feats { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; margin-top: 30px; }
.csl-feat { background: var(--pf-surface); border: 1px solid var(--pf-line); border-radius: 14px; padding: 24px; }
.csl-section--surface .csl-feat { background: var(--pf-surface-2); }
.csl-feat__icon { width: 42px; height: 42px; border-radius: 11px; background: var(--pf-accent-soft); color: var(--pf-accent); display:flex; align-items:center; justify-content:center; margin-bottom: 14px; }
.csl-feat__icon svg { width: 21px; height: 21px; }
.csl-feat__title { font-size: 1.05rem; font-weight: 700; color: var(--pf-ink); margin-bottom: 6px; }
.csl-feat__desc { font-size: 0.9rem; line-height: 1.55; color: var(--pf-ink-soft); }
@media (max-width: 820px) { .csl-feats { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 520px) { .csl-feats { grid-template-columns: 1fr; } }

/* screens showcase — phone-sized, not stretched */
.csl-screens { display: grid; grid-template-columns: repeat(3,1fr); gap: 26px; margin-top: 30px; }
.csl-screen { display:flex; flex-direction:column; align-items: center; text-align: center; }
.csl-screen__frame { width: 100%; max-width: 240px; border-radius: 26px; overflow: hidden; border: 6px solid #14130f; background:#14130f; box-shadow: 0 18px 40px rgba(20,20,43,0.18); }
.csl-screen__frame img { width:100%; display:block; }
.csl-screen__cap { margin-top: 16px; max-width: 260px; }
.csl-screen__title { font-size: 1rem; font-weight: 700; color: var(--pf-ink); margin-bottom: 4px; }
.csl-screen__desc { font-size: 0.88rem; line-height: 1.5; color: var(--pf-ink-soft); }
@media (max-width: 820px) { .csl-screens { grid-template-columns: 1fr; } .csl-screen__frame { max-width: 220px; } }

/* desktop / web-admin screenshots */
.csl-desk { margin-top: 30px; display: flex; flex-direction: column; gap: 40px; }
.csl-deskshot__frame { border-radius: 14px; overflow: hidden; border: 1px solid var(--pf-line); box-shadow: 0 18px 44px rgba(23, 24, 28, 0.14); background: var(--pf-surface); }
.csl-deskshot__frame img { width: 100%; display: block; }
.csl-deskshot__cap { margin-top: 14px; }
.csl-deskshot__title { font-size: 1.05rem; font-weight: 700; color: var(--pf-ink); margin-bottom: 4px; }
.csl-deskshot__desc { font-size: 0.9rem; line-height: 1.55; color: var(--pf-ink-soft); max-width: 660px; }

/* demo video */
.csl-video { margin-top: 28px; }
.csl-video video {
  width: 100%; max-width: 900px; margin: 0 auto; display: block;
  border-radius: 16px; border: 1px solid var(--pf-line);
  box-shadow: 0 18px 44px rgba(23, 24, 28, 0.16); background: #14130f;
}

/* 0 to 100 timeline */
.csl-steps { margin-top: 30px; display: flex; flex-direction: column; gap: 0; }
.csl-step { display: grid; grid-template-columns: 44px 1fr; gap: 18px; position: relative; padding-bottom: 26px; }
.csl-step:not(:last-child)::before { content:''; position:absolute; left:21px; top:40px; bottom:0; width:2px; background: var(--pf-line); }
.csl-step__dot { width: 44px; height: 44px; border-radius: 50%; background: var(--pf-accent-soft); color: var(--pf-accent); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:0.95rem; }
.csl-step__title { font-size: 1.05rem; font-weight: 700; color: var(--pf-ink); margin-bottom: 4px; }
.csl-step__desc { font-size: 0.94rem; line-height: 1.6; color: var(--pf-ink-soft); max-width: 640px; }
.csl-step__desc strong { color: var(--pf-ink); font-weight: 600; }

/* competitor comparison */
.csl-compare { margin-top: 28px; border: 1px solid var(--pf-line); border-radius: 16px; overflow: hidden; background: var(--pf-surface); }
.csl-section--surface .csl-compare { background: var(--pf-surface-2); }
.csl-crow { display: grid; grid-template-columns: 1.1fr 2.2fr 0.9fr; gap: 18px; padding: 15px 22px; border-bottom: 1px solid var(--pf-line-soft); align-items: center; }
.csl-crow:last-child { border-bottom: none; }
.csl-crow--head { background: rgba(20,20,43,0.035); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--pf-ink-soft); }
.csl-crow__name { font-weight: 700; color: var(--pf-ink); font-size: 0.95rem; }
.csl-crow__offer { font-size: 0.86rem; color: var(--pf-ink-soft); line-height: 1.5; }
.csl-crow__price { font-weight: 700; color: var(--pf-ink); font-size: 0.9rem; }
.csl-crow__price small { display:block; font-weight: 500; color: var(--pf-ink-soft); font-size: 0.76rem; }
@media (max-width: 640px) { .csl-crow { grid-template-columns: 1fr; gap: 4px; } .csl-crow--head { display: none; } .csl-crow__name { margin-top: 4px; } }

.csl-insight { margin-top: 26px; background: var(--pf-accent-soft); border: 1px solid rgba(37,99,235,0.22); border-radius: 14px; padding: 22px 26px; }
.csl-insight__k { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--pf-accent); margin-bottom: 8px; }
.csl-insight p { font-size: 1rem; line-height: 1.65; color: var(--pf-ink); }
.csl-insight strong { font-weight: 700; }

/* insight tiles */
.csl-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 28px; }
.csl-tile { background: var(--pf-surface); border: 1px solid var(--pf-line); border-radius: 14px; padding: 22px 24px; }
.csl-section--surface .csl-tile { background: var(--pf-surface-2); }
.csl-tile__num { font-size: 1.7rem; font-weight: 800; letter-spacing: -0.02em; color: var(--pf-accent); margin-bottom: 8px; line-height: 1.1; }
.csl-tile__label { font-size: 0.86rem; line-height: 1.5; color: var(--pf-ink-soft); }
@media (max-width: 760px) { .csl-tiles { grid-template-columns: 1fr; } }

.csl-col p { font-size: 0.94rem; line-height: 1.6; color: var(--pf-ink-soft); margin: 0; }

/* characterization spec panel */
.csl-spec { margin-top: 26px; background: var(--pf-surface); border: 1px solid var(--pf-line); border-left: 3px solid var(--pf-accent); border-radius: 14px; padding: 26px 28px; }
.csl-section--surface .csl-spec { background: var(--pf-surface-2); }
.csl-spec__title { font-weight: 800; color: var(--pf-ink); font-size: 1.12rem; margin-bottom: 4px; }
.csl-spec__sub { font-size: 0.92rem; color: var(--pf-ink-soft); }
.csl-spec__grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 2px 32px; margin-top: 16px; }
@media (max-width: 640px) { .csl-spec__grid { grid-template-columns: 1fr; } }

/* next project */
.csl-next { border-top: 1px solid var(--pf-line-soft); background: var(--pf-surface); }
.csl-next__inner { max-width: var(--pf-maxw); margin: 0 auto; padding: 36px 24px; display:flex; align-items:center; justify-content:space-between; gap: 20px; flex-wrap: wrap; }
.csl-next__label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--pf-accent); }
.csl-next__title { font-size: 1.3rem; font-weight: 800; color: var(--pf-ink); letter-spacing: -0.02em; }

/* ---------- Mobile ---------- */
@media (max-width: 560px) {
  .csl-hero { padding: 40px 0 30px; }
  .csl-hero__inner { gap: 24px; }
  .csl-hero__phones { overflow: hidden; }
  .csl-hero__phones .csl-phone--back { display: none; }
  .csl-hero__phones .csl-phone--front { width: 200px; transform: none; }
  .csl-meta { gap: 18px 26px; }
  .csl-section { padding: 44px 0; }
  .csl-stats__inner { padding: 26px 24px; }
  .csl-quote { font-size: 1.15rem; padding-left: 16px; }
  .csl-crow__price { text-align: left; }
  .csl-next__inner { flex-direction: column; align-items: flex-start; gap: 16px; }
  .csl-next__inner .pf-btn { width: 100%; justify-content: center; }
}