/* The guest CRM section. Sits between the journey and the property story.
   Two jobs: show the automation engine's real refusals as evidence, then
   price the product. Everything here uses site.css tokens. */

.crm-section{
  padding:clamp(82px,8vw,128px) var(--gutter);
  background:var(--mist);
  color:var(--ink);
  scroll-margin-top:var(--header-h);
}

.crm-head,
.crm-body,
.crm-plans{
  width:min(100%,var(--max));
  margin-inline:auto;
}

.crm-head{
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(300px,.72fr);
  align-items:end;
  gap:clamp(36px,6vw,92px);
  margin-bottom:clamp(40px,4.5vw,64px);
}

.crm-head h2{
  max-width:14ch;
  margin:0;
  font-size:clamp(3.2rem,5.6vw,5rem);
  line-height:.9;
  letter-spacing:-.04em;
}

.crm-head p{
  max-width:44ch;
  margin:0 0 5px;
  color:var(--muted);
  font-size:clamp(17px,1.45vw,21px);
  line-height:1.48;
}

.crm-body{
  display:grid;
  grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  gap:clamp(20px,2.4vw,34px);
  align-items:start;
  margin-bottom:clamp(34px,3.4vw,48px);
}

/* ---- the log ---- */

.crm-log{
  overflow:hidden;
  border-radius:16px;
  background:var(--white);
}

.crm-log-bar{
  display:flex;
  align-items:center;
  gap:10px;
  padding:15px 20px;
  border-bottom:1px solid var(--line);
  font-size:13px;
  font-weight:700;
}

.crm-log-bar span{
  width:9px;
  height:9px;
  border-radius:50%;
  background:var(--teal);
}

.crm-log-bar strong{
  font-weight:800;
  letter-spacing:.02em;
}

.crm-log-bar small{
  margin-left:auto;
  color:var(--muted);
  font-size:12px;
  font-weight:600;
}

.crm-log-rows{
  margin:0;
  padding:0;
  list-style:none;
}

.crm-log-rows li{
  display:grid;
  grid-template-columns:78px minmax(0,1fr) 84px minmax(0,1.5fr);
  gap:12px;
  align-items:center;
  padding:14px 20px;
  border-bottom:1px solid var(--line);
  font-size:13px;
  line-height:1.3;
}

.crm-log-rows li:last-child{border-bottom:0}

.crm-log-status{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:5px 0;
  border-radius:999px;
  font-size:11px;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
}

[data-status="sent"] .crm-log-status{background:#e4f7ff;color:#0b4f66}
[data-status="skipped"] .crm-log-status{background:#eee8ff;color:var(--teal-dark)}
[data-status="held"] .crm-log-status{background:var(--signal-yellow);color:var(--ink)}

.crm-log-guest{font-weight:700}

.crm-log-channel,
.crm-log-reason{
  color:var(--muted);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:12px;
}

/* The reason string is the whole point of the row, so it is allowed to wrap
   rather than truncate. Truncating it would hide the evidence. */
.crm-log-reason{overflow-wrap:anywhere}

.crm-log-note{
  max-width:46ch;
  margin:16px 2px 0;
  color:var(--muted);
  font-size:14px;
  font-weight:600;
  line-height:1.45;
}

/* ---- the rules ---- */

.crm-rules{
  display:grid;
  gap:12px;
  margin:0;
  padding:0;
  list-style:none;
}

.crm-rules li{
  padding:22px 24px;
  border-radius:16px;
  background:var(--white);
}

.crm-rules h3{
  margin:0 0 7px;
  font-size:clamp(17px,1.35vw,19px);
  line-height:1.22;
  letter-spacing:-.015em;
}

.crm-rules p{
  margin:0;
  color:var(--muted);
  font-size:14px;
  line-height:1.5;
}

/* ---- the plans ---- */

.crm-plans{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
  align-items:stretch;
}

.crm-plan{
  display:flex;
  flex-direction:column;
  padding:clamp(26px,2.6vw,36px);
  border-radius:16px;
  background:var(--white);
}

.crm-plan--portfolio{background:#eee8ff}

.crm-plan-title{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  font-size:clamp(21px,1.8vw,26px);
  font-weight:800;
  line-height:1;
  letter-spacing:-.02em;
}

.crm-plan-title small{
  min-height:30px;
  display:inline-flex;
  align-items:center;
  padding:6px 10px;
  border:1px solid currentColor;
  border-radius:999px;
  font-size:11px;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
}

.crm-plan-amount{
  display:flex;
  align-items:flex-end;
  gap:10px;
  margin:20px 0 12px;
}

.crm-plan-amount strong{
  font-size:clamp(2.6rem,3.4vw,3.4rem);
  line-height:.85;
  letter-spacing:-.04em;
}

.crm-plan-amount span{
  padding-bottom:3px;
  color:var(--muted);
  font-size:12px;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
}

.crm-plan-desc{
  max-width:34ch;
  margin:0 0 24px;
  color:var(--muted);
  font-size:15px;
  line-height:1.45;
}

.crm-plan>a{
  min-height:52px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  align-self:flex-start;
  margin-top:auto;
  padding:0 21px;
  border-radius:999px;
  background:var(--ink);
  color:var(--white);
  font-size:14px;
  font-weight:800;
  text-decoration:none;
}

.crm-plan--portfolio>a{background:var(--teal)}
.crm-plan>a:focus-visible{outline:3px solid var(--ink);outline-offset:4px}

.crm-plans-note{
  grid-column:1/-1;
  margin:6px 2px 0;
  color:var(--muted);
  font-size:14px;
  line-height:1.45;
}

@media (max-width: 999px){
  .crm-section{padding:73.08px 20px}

  .crm-head,
  .crm-body,
  .crm-plans{
    grid-template-columns:minmax(0,1fr);
  }

  .crm-head{gap:18px}
  .crm-head h2{max-width:none}

  /* The channel and reason columns stack under the guest so the reason
     string keeps its full width instead of squeezing to two words a line. */
  .crm-log-rows li{
    grid-template-columns:74px minmax(0,1fr);
    gap:8px 12px;
  }

  .crm-log-channel{grid-column:2}
  .crm-log-reason{grid-column:2}
}

/* Through-link to the full CRM page. */
.crm-head-link{
  display:inline-flex;
  align-items:center;
  justify-self:start;
  align-self:start;
  width:fit-content;
  gap:6px;
  margin-top:18px;
  font-size:16px;
  font-weight:750;
  text-decoration:none;
  border-bottom:2px solid currentColor;
  padding-bottom:2px;
}