/* ============================================================
   HAANK CRM — product page layer (loaded only on /crm and /ar/crm)
   Sits on top of styles.css and reuses its tokens and primitives.
   ============================================================ */

/* ---------- hero: shorter than the homepage's full-viewport one ---------- */
.hero--crm{min-height:auto;padding:150px var(--gut) 76px}
.hero--crm .hero-h1{font-size:clamp(2.4rem,5.6vw,4.9rem);max-width:19ch}
.hero--crm .hero-sub{max-width:56ch}
.crumb{font-family:var(--mono);font-size:.76rem;letter-spacing:.12em;color:var(--grey);margin-bottom:22px}
.crumb a:hover{color:var(--gold)}
.crumb span{color:var(--gold);opacity:.7;margin:0 8px}

/* ---------- problem list ---------- */
.pains{max-width:var(--maxw);margin:36px auto 0;padding:0 var(--gut);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;list-style:none}
.pain{border:1px solid var(--hair);border-left:2px solid rgba(229,169,60,.55);border-radius:0 14px 14px 0;
  background:var(--navy);padding:20px 22px;color:var(--grey);font-size:.98rem;line-height:1.6}
.pain b{color:var(--cream);font-weight:500;display:block;margin-bottom:6px;font-family:var(--disp);font-size:1.06rem}

/* ---------- comparison table ---------- */
.cmp-wrap{max-width:var(--maxw);margin:40px auto 0;padding:0 var(--gut);overflow-x:auto}
.cmp{width:100%;border-collapse:collapse;min-width:620px;font-size:.96rem}
.cmp caption{text-align:start;color:var(--grey);font-family:var(--mono);font-size:.74rem;
  letter-spacing:.14em;text-transform:uppercase;padding-bottom:14px}
.cmp th,.cmp td{padding:16px 18px;border-bottom:1px solid var(--hair-2);text-align:start;vertical-align:top}
.cmp thead th{font-family:var(--mono);font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--grey);font-weight:400;border-bottom:1px solid var(--hair)}
.cmp thead th.ours{color:var(--gold)}
.cmp tbody th{font-weight:500;color:var(--cream);font-family:var(--disp);font-size:1rem}
.cmp td{color:var(--grey)}
.cmp td.ours{color:var(--cream);background:rgba(229,169,60,.05);
  border-left:1px solid rgba(229,169,60,.22);border-right:1px solid rgba(229,169,60,.22)}
.cmp tbody tr:last-child td.ours{border-bottom:1px solid rgba(229,169,60,.22)}
.cmp .yes{color:var(--gold);font-weight:600}

/* ---------- who it's for ---------- */
.who{max-width:var(--maxw);margin:36px auto 0;padding:0 var(--gut);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
.who-card{background:var(--navy);border:1px solid var(--hair);border-radius:16px;padding:24px;
  transition:border-color .25s var(--e),transform .25s var(--e)}
.who-card:hover{border-color:rgba(229,169,60,.5);transform:translateY(-3px)}
.who-card h3{font-size:1.12rem;margin-bottom:8px;color:var(--cream)}
.who-card p{color:var(--grey);font-size:.9rem;line-height:1.6}
.who-card .n{font-family:var(--mono);font-size:.72rem;color:var(--gold);letter-spacing:.14em;display:block;margin-bottom:12px}

/* ---------- FAQ ---------- */
.faq{max-width:900px;margin:36px auto 0;padding:0 var(--gut)}
.faq details{border-top:1px solid var(--hair)}
.faq details:last-of-type{border-bottom:1px solid var(--hair)}
.faq summary{list-style:none;cursor:pointer;padding:24px 44px 24px 0;position:relative;
  font-family:var(--disp);font-size:clamp(1.02rem,1.9vw,1.24rem);color:var(--cream);font-weight:500}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;inset-inline-end:8px;top:50%;transform:translateY(-50%);
  color:var(--gold);font-family:var(--mono);font-size:1.4rem;line-height:1;transition:transform .25s var(--e)}
.faq details[open] summary::after{content:"–"}
.faq summary:hover{color:var(--gold)}
.faq .a{color:var(--grey);padding:0 44px 26px 0;font-size:1rem;line-height:1.75;max-width:70ch}

/* ---------- closing price note ---------- */
.pricebar{max-width:var(--maxw);margin:44px auto 0;padding:0 var(--gut)}
.pricebar-in{border:1px solid rgba(229,169,60,.34);background:rgba(229,169,60,.06);border-radius:18px;
  padding:28px 32px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.pricebar .t{font-family:var(--disp);font-size:clamp(1.2rem,2.6vw,1.7rem);color:var(--cream);max-width:34ch}
.pricebar .t b{color:var(--gold);font-weight:500}
.pricebar .s{color:var(--grey);font-size:.9rem;margin-top:8px;font-family:var(--mono)}

/* RTL: the comparison table's accent borders and breadcrumb mirror automatically via
   logical properties, but the pain cards' physical border needs flipping. */
html[dir="rtl"] .pain{border-left:1px solid var(--hair);border-right:2px solid rgba(229,169,60,.55);
  border-radius:14px 0 0 14px}
html[dir="rtl"] .faq summary{padding:24px 0 24px 44px}
html[dir="rtl"] .faq .a{padding:0 0 26px 44px}