/* ============================================================
   Project-specific components for the CPQ vs Revenue Cloud
   decision guide. Loaded AFTER leanscale.css — reuses tokens,
   never forks the base.
   ============================================================ */

/* ---------- lineage cards (name untangler) ---------- */
.lineage{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:8px}
.lin{background:#fff;border:1px solid var(--ls-light-gray);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:22px 22px;transition:transform .2s,box-shadow .2s,border-color .2s}
.lin:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift);border-color:var(--ls-medium-purple)}
.lin__term{font-size:1.12rem;font-weight:800;letter-spacing:-.02em;color:var(--ls-dark-purple);margin:0 0 4px}
.lin__tag{display:inline-block;font-size:10.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  padding:3px 9px;border-radius:100px;margin:0 0 12px}
.lin__tag--old{background:var(--ls-purple-soft);color:var(--ls-strong-purple)}
.lin__tag--new{background:var(--ls-lime);color:var(--ls-dark-purple)}
.lin__tag--dead{background:#eceaec;color:#595959}
.lin__b{font-size:.94rem;line-height:1.55;color:var(--ls-dark-gray);margin:0}
.lin__b b{color:var(--ls-dark-purple);font-weight:800}
.lin--focus{border-color:var(--ls-strong-purple);box-shadow:var(--shadow-lift)}

/* ---------- lifecycle timeline ---------- */
.tl{position:relative;margin:14px 0 8px;padding-left:4px}
.tl__row{display:grid;grid-template-columns:130px 1fr;gap:22px;position:relative;padding:0 0 30px 0}
.tl__row:last-child{padding-bottom:4px}
.tl__row:before{content:"";position:absolute;left:139px;top:8px;bottom:-4px;width:2px;background:var(--ls-light-gray)}
.tl__row:last-child:before{display:none}
.tl__when{text-align:right;font-size:13px;font-weight:800;color:var(--ls-strong-purple);letter-spacing:-.01em;padding-top:2px}
.tl__when small{display:block;font-size:11px;font-weight:600;color:var(--ls-dark-gray);letter-spacing:0}
.tl__body{position:relative;padding-left:26px}
.tl__body:before{content:"";position:absolute;left:-4px;top:5px;width:12px;height:12px;border-radius:50%;
  background:var(--ls-strong-purple);box-shadow:0 0 0 4px var(--ls-lime)}
.tl__row--soft .tl__body:before{background:#fff;border:2px solid var(--ls-medium-purple);box-shadow:0 0 0 4px #fff}
.tl__h{font-size:1.05rem;font-weight:800;color:var(--ls-dark-purple);margin:0 0 4px;letter-spacing:-.01em}
.tl__t{font-size:.94rem;line-height:1.55;color:var(--ls-dark-gray);margin:0}
.tl__t b{color:var(--ls-strong-purple);font-weight:800}

/* ---------- two-column comparison table ---------- */
.cmp{background:#fff;border:1px solid var(--ls-light-gray);border-radius:var(--radius);
  box-shadow:var(--shadow);overflow:hidden;margin-top:8px}
.cmp__head{display:grid;grid-template-columns:1fr 1.15fr 1.15fr}
.cmp__head > div{padding:18px 20px;font-weight:800;font-size:13px;letter-spacing:.04em;text-transform:uppercase}
.cmp__head .cmp__dim{color:var(--ls-dark-gray)}
.cmp__head .cmp__cpq{color:var(--ls-dark-gray);border-left:1px solid var(--ls-light-gray)}
.cmp__head .cmp__rc{color:#fff;background:linear-gradient(135deg,var(--ls-dark-purple),var(--ls-strong-purple))}
.cmp__row{display:grid;grid-template-columns:1fr 1.15fr 1.15fr;border-top:1px solid var(--ls-light-gray)}
.cmp__row > div{padding:16px 20px;font-size:13.5px;line-height:1.5}
.cmp__row .cmp__dim{font-weight:800;color:var(--ls-dark-purple)}
.cmp__row .cmp__cpq{color:var(--ls-dark-gray);border-left:1px solid var(--ls-light-gray)}
.cmp__row .cmp__rc{color:var(--ls-ink);background:var(--ls-purple-soft)}
.cmp__row .cmp__rc b{color:var(--ls-strong-purple);font-weight:800}
.cmp code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;background:#fff;
  border:1px solid var(--ls-light-gray);border-radius:5px;padding:1px 5px;color:var(--ls-dark-purple)}
.cmp__row .cmp__rc code{background:#fff}

/* long identifiers must wrap, never clip, at any width */
code{overflow-wrap:anywhere;word-break:break-word}
.insight code{background:#fff;border:1px solid #d9c7e0;border-radius:5px;padding:1px 5px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--ls-dark-purple)}

/* ---------- myth-buster card ---------- */
.myths{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:8px}
.myth{background:#fff;border:1px solid var(--ls-light-gray);border-left:4px solid var(--ls-lime-deep);
  border-radius:var(--radius);box-shadow:var(--shadow);padding:24px 26px}
.myth__lbl{font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:#9a7bab;margin:0 0 10px}
.myth__claim{font-size:1.02rem;font-weight:700;color:var(--ls-dark-gray);text-decoration:line-through;
  text-decoration-color:var(--ls-medium-purple);margin:0 0 12px;line-height:1.4}
.myth__truth{font-size:.96rem;line-height:1.6;color:var(--ls-ink);margin:0}
.myth__truth b{color:var(--ls-strong-purple);font-weight:800}
.myth__truth .ok{color:var(--ls-dark-purple);font-weight:800}

/* ---------- verdict / decision cards ---------- */
.verdict__when{font-size:12px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
  margin:14px 0 12px;padding-top:12px;border-top:1px solid var(--ls-light-gray)}
.rec--1 .verdict__when,.rec--2 .verdict__when{color:var(--ls-strong-purple)}
.rec--3 .verdict__when{color:var(--ls-lime);border-color:rgba(255,255,255,.18)}
.rec__head{font-size:1.28rem;font-weight:800;letter-spacing:-.02em;color:var(--ls-dark-purple);margin:0 0 4px}
.rec--3 .rec__head{color:#fff}
.rec__sub{font-size:12.5px;font-weight:700;color:var(--ls-dark-gray);margin:0 0 6px}
.rec--3 .rec__sub{color:var(--ls-medium-purple)}

/* quote cards */
.quotes{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:8px}
.quote{background:#fff;border:1px solid var(--ls-light-gray);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:26px 26px;transition:transform .2s,box-shadow .2s,border-color .2s}
.quote:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift);border-color:var(--ls-medium-purple)}
.quote__mark{font-size:2.4rem;line-height:.6;color:var(--ls-lime-deep);font-weight:800;font-family:Georgia,serif}
.quote__t{font-size:1.05rem;line-height:1.5;color:var(--ls-dark-purple);font-weight:600;margin:6px 0 14px}
.quote__t em{font-style:normal;background:var(--ls-lime);padding:0 3px;border-radius:3px}
.quote__src{font-size:12px;font-weight:700;color:var(--ls-strong-purple);text-transform:uppercase;letter-spacing:.05em}

@media(max-width:960px){
  .lineage{grid-template-columns:1fr}
  .myths,.quotes{grid-template-columns:1fr}
  .cmp__head,.cmp__row{grid-template-columns:1fr}
  .cmp__head .cmp__dim{display:none}
  .cmp__row .cmp__dim{background:var(--ls-off-white);border-top:1px solid var(--ls-light-gray)}
  .cmp__row .cmp__cpq,.cmp__row .cmp__rc{border-left:none}
  .cmp__row .cmp__cpq:before{content:"CPQ — ";font-weight:800;color:var(--ls-dark-purple)}
  .cmp__row .cmp__rc:before{content:"Revenue Cloud — ";font-weight:800;color:var(--ls-strong-purple)}
}
@media(max-width:640px){
  .tl__row{grid-template-columns:96px 1fr;gap:14px}
  .tl__row:before{left:105px}
  .insight{flex-direction:column;gap:8px}
}