/* =====================================================================
   GlameBeauty CRM landing page — page-specific styles (extends style.css)
   ===================================================================== */

/* ---------- Breadcrumb ---------- */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 0.85rem; color: var(--muted); margin-bottom: 18px; }
.crumbs a { color: var(--muted); transition: color var(--t-micro); }
.crumbs a:hover { color: var(--green); }
.crumbs [aria-current="page"] { color: var(--ink); font-weight: 600; }

/* ---------- Hero ---------- */
.crm-hero .hero-title { font-size: clamp(2.4rem, 5vw, 4.3rem); }
.crm-hero-visual { position: relative; width: 100%; aspect-ratio: 1 / 0.86; }
.crm-hero-visual .blob { right: 0; top: 2%; width: 72%; }
.crm-hero-visual figure { position: absolute; margin: 0; }
.crm-hero-visual img { width: 100%; height: auto; }
.chv-dash { left: -4%; top: 12%; width: 92%; z-index: 2; }
.chv-dash img { filter: drop-shadow(0 30px 40px rgba(28, 49, 35, 0.22)); }
.chv-phone { right: -2%; bottom: -2%; width: 31%; z-index: 3; }
.chv-phone img { filter: drop-shadow(0 26px 34px rgba(28, 49, 35, 0.35)); }
.chv-chip { left: 2%; bottom: 6%; z-index: 4; }

/* ---------- Pains ---------- */
.pain-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 1.8vw, 22px); }
.pain { position: relative; padding: clamp(26px, 3vw, 38px); border-radius: var(--r-md); background: #fff; border: 1px solid var(--line); overflow: hidden; transition: transform var(--t-card) var(--ease), border-color var(--t-card); }
.pain::after { content: ""; position: absolute; right: -40px; top: -40px; width: 120px; height: 120px; border-radius: 50%; background: var(--mustard-tint); transition: transform 600ms var(--ease); }
.pain:hover { transform: translateY(-4px); border-color: var(--mustard); }
.pain:hover::after { transform: scale(1.4); }
.pain-ico { position: relative; z-index: 1; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 16px; background: var(--green); color: var(--mustard); margin-bottom: 22px; }
.pain-ico .ico { width: 26px; height: 26px; stroke-width: 1.7; }
.pain h3 { position: relative; z-index: 1; font-size: 1.25rem; margin-bottom: 8px; }
.pain p { position: relative; z-index: 1; color: var(--muted); }

/* ---------- Flow ---------- */
.flow { padding-top: 0; }
.flow-scroll { overflow-x: auto; border-radius: var(--r-lg); background: var(--grey); padding: clamp(16px, 3vw, 36px); scrollbar-width: thin; }
.flow-scroll img { min-width: 860px; width: 100%; height: auto; }

/* ---------- Features ---------- */
.section-head.center { text-align: center; display: grid; justify-items: center; }
.features { padding-top: clamp(40px, 6vw, 80px); }
.feat { display: grid; grid-template-columns: 1fr 1.15fr; align-items: center; gap: clamp(30px, 6vw, 90px); padding-block: clamp(30px, 5vw, 60px); }
.feat + .feat { border-top: 1px solid var(--line); }
.feat-rev .feat-copy { order: 2; }
.feat-copy { display: grid; gap: 16px; justify-items: start; }
.feat-copy .badge { gap: 6px; }
.feat-copy .h3 { font-size: clamp(1.7rem, 3vw, 2.4rem); line-height: 1.12; }
.feat-copy .h3 em { color: #C98F10; }
.feat-copy > p { color: var(--muted); font-size: 1.05rem; max-width: 480px; }
.feat-num { font-family: var(--f-serif); font-style: italic; font-size: 3.4rem; line-height: 1; color: var(--mustard); }
.feat-media { margin: 0; position: relative; border-radius: var(--r-lg); padding: clamp(18px, 3vw, 40px); overflow: hidden; }
.feat-media::before { content: ""; position: absolute; width: 60%; aspect-ratio: 1; border-radius: 50%; right: -18%; bottom: -36%; background: rgba(255,255,255,.28); }
.feat-media img { position: relative; width: 100%; height: auto; transition: transform 700ms var(--ease); }
.feat:hover .feat-media img { transform: scale(1.03) rotate(-0.4deg); }
.fm-mustard { background: var(--mustard); }
.fm-sage { background: var(--sage); }
.fm-grey { background: var(--grey); }
.fm-peach { background: var(--peach); }
.fm-green { background: var(--green); }
.fm-green::before { background: rgba(255,255,255,.07); }

/* ---------- Modes (tabs reuse .showcase) ---------- */
#modes .panel-media { padding: 0; }
#modes .pm-main { width: 100%; height: auto; border-radius: 22px; background: #fff; padding: clamp(6px, 1vw, 12px); box-shadow: 0 30px 60px -30px rgba(0,0,0,.5); }
#modes .panel-copy .btn { white-space: normal; text-align: left; }

/* ---------- Industries ---------- */
.ind-grid-3 { grid-template-columns: repeat(3, 1fr); }
.ind-img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 600ms var(--ease); }
.ind-link { overflow: hidden; }
.ind-link:hover .ind-img { transform: scale(1.05); }

/* ---------- Comparison ---------- */
.cmp-wrap { overflow-x: auto; border-radius: var(--r-lg); border: 1px solid var(--line); background: #fff; }
.cmp { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 0.98rem; }
.cmp th, .cmp td { padding: 18px 22px; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--line); }
.cmp tbody tr:last-child th, .cmp tbody tr:last-child td { border-bottom: 0; }
.cmp thead th { font-family: var(--f-head); font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); background: var(--grey); }
.cmp thead th.us { background: var(--green); color: var(--mustard); }
.cmp tbody th { font-family: var(--f-head); font-weight: 700; width: 28%; }
.cmp td { color: var(--muted); }
.cmp td.us { color: var(--ink); font-weight: 600; background: var(--mustard-tint); }
.cmp td .ico { display: inline-block; vertical-align: -4px; margin-right: 8px; width: 18px; height: 18px; }
.cmp .no { color: #C0392B; }
.cmp .yes { color: var(--green); stroke-width: 3; }

/* ---------- Footer wordmark variant ---------- */
.page-crm .wordmark { font-size: clamp(4rem, 18vw, 17rem); }

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width: 1023px) {
  .crm-hero-visual { max-width: 680px; margin-inline: auto; }
  .pain-grid { grid-template-columns: 1fr 1fr; }
  .feat, .feat-rev { grid-template-columns: 1fr; }
  .feat-rev .feat-copy { order: 0; }
  .feat-media { order: -1; }
  .ind-grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
  .crm-hero-visual { aspect-ratio: 1 / 0.95; }
  .chv-dash { left: 0; top: 10%; width: 100%; }
  .chv-phone { width: 36%; right: 0; bottom: 0; }
  .chv-chip { left: 0; bottom: 2%; transform: scale(0.88); transform-origin: left bottom; }
  .pain-grid { grid-template-columns: 1fr; }
  .feat-num { font-size: 2.6rem; }
  .ind-grid-3 { grid-template-columns: 1fr 1fr; }
  .cmp th, .cmp td { padding: 14px 16px; }
}

/* tighten vertical rhythm between comparison and steps */
.compare { padding-bottom: clamp(40px, 5vw, 70px); }
.compare + .why { padding-top: clamp(40px, 5vw, 70px); }