/* ============================================================
   /crm, the Shop CRM page.
   Loaded after agency.css. Real screenshots of the product in
   browser and phone frames, on the same night islands as the rest of
   the agency pages. The device frames are night in both site themes.
   ============================================================ */

.crm-page {
  --crm-frame: var(--night-2);
  --crm-frame-line: var(--gold-faint);
  --crm-dot: var(--night-line-2);
  --crm-shadow: 0 50px 90px -40px rgba(0, 0, 0, 0.75), 0 18px 36px -24px rgba(0, 0, 0, 0.55);
}

/* ---------------------------------------------------------- frames */
.crm-frame {
  position: relative;
  border-radius: var(--radius-card);
  border: 1px solid var(--crm-frame-line);
  background: var(--crm-frame);
  box-shadow: var(--crm-shadow);
  overflow: hidden;
}
.crm-frame-bar {
  display: flex; align-items: center; gap: 6px;
  height: 30px; padding-inline: 12px;
  border-bottom: 1px solid var(--crm-frame-line);
}
.crm-frame-bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--crm-dot); }
.crm-frame-bar span {
  margin-left: 10px; padding: 3px 12px; border-radius: 6px;
  font-size: 0.7rem; color: var(--ivory-2); background: var(--night-line);
}
.crm-frame img, .crm-phone img { display: block; width: 100%; height: auto; }

.crm-phone {
  position: relative;
  width: 100%;
  padding: 7px;
  border-radius: 34px;
  background: var(--night);
  border: 1px solid var(--crm-frame-line);
  box-shadow: var(--crm-shadow);
}
.crm-phone picture { display: block; border-radius: 27px; overflow: hidden; }

/* ---------------------------------------------------------- hero */
.crm-hero { padding-block: clamp(3.5rem, 2rem + 5vw, 6rem) 0; overflow: hidden; }
.crm-hero-grid {
  display: grid; grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(2rem, 4vw, 4rem); align-items: center;
}
.crm-hero h1 {
  margin-top: 1rem;
  font-size: clamp(2.3rem, 1.2rem + 3.6vw, 4.2rem);
  font-weight: var(--w-display); letter-spacing: -0.04em; line-height: 0.98;
  max-width: 14ch;
}
.crm-hero .lede { margin-top: 1.4rem; max-width: 44ch; color: var(--nv-soft); font-size: var(--text-lede); line-height: 1.55; }
.crm-hero-note { margin-top: 1rem; font-size: 0.9rem; color: var(--nv-soft); }
.crm-hero-note strong { color: var(--nv-ink); font-weight: 600; }

.crm-hero-visual { position: relative; padding-bottom: clamp(3rem, 6vw, 5rem); }
.crm-hero-visual .crm-frame { transform: translateY(18px); }
.crm-hero-visual .crm-phone {
  position: absolute; right: clamp(-1rem, -2vw, 0rem); bottom: 0;
  width: clamp(140px, 24%, 210px);
}

/* The facts strip closes the hero band. */
.crm-facts {
  display: grid; grid-template-columns: repeat(4, 1fr);
  margin-top: clamp(2.5rem, 5vw, 4rem);
  border-top: 1px solid var(--nv-line);
}
.crm-facts li { padding: 1.3rem 1rem 1.6rem 0; }
.crm-facts li + li { padding-left: 1.2rem; border-left: 1px solid var(--nv-line); }
.crm-facts strong {
  display: block; font-family: var(--font-display); font-weight: var(--w-display);
  font-size: clamp(1.35rem, 1rem + 1.2vw, 1.9rem); letter-spacing: -0.03em; color: var(--nv-ink);
}
.crm-facts span { display: block; margin-top: 0.2rem; font-size: 0.9rem; color: var(--nv-soft); }

/* ---------------------------------------------------------- tour */
.crm-tour { display: grid; gap: clamp(4rem, 3rem + 5vw, 7.5rem); }
.crm-row {
  display: grid; grid-template-columns: 0.8fr 1.2fr;
  gap: clamp(2rem, 5vw, 5rem); align-items: center;
}
.crm-row--flip { grid-template-columns: 1.2fr 0.8fr; }
.crm-row--flip .crm-row-copy { order: 2; }
.crm-row-n {
  font-family: var(--font); font-size: 0.72rem; font-weight: var(--w-medium);
  letter-spacing: var(--track-label); text-transform: uppercase; color: var(--clay);
}
.crm-row h2 { margin-top: 0.8rem; font-size: clamp(1.7rem, 1.2rem + 1.9vw, 2.6rem); letter-spacing: -0.03em; max-width: 18ch; }
.crm-row-copy > p { margin-top: 1rem; color: var(--ink-soft); font-size: 1.06rem; line-height: 1.6; max-width: 46ch; }
.crm-row .check-list { margin-top: 1.4rem; }

/* Two phones side by side for the quote row. */
.crm-pair { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem, 3vw, 2rem); max-width: 520px; margin-inline: auto; }
.crm-pair .crm-phone:last-child { transform: translateY(2.5rem); }
.crm-solo { max-width: 300px; margin-inline: auto; }

/* ---------------------------------------------------------- steps */
.crm-how .ag-steps p a { color: var(--clay); font-weight: var(--w-medium); text-decoration: underline; text-underline-offset: 0.18em; }

/* ---------------------------------------------------------- price */
.crm-price-wrap {
  display: grid; grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(2rem, 5vw, 5rem); align-items: start;
}
.crm-price-wrap .check-list { margin-top: 1.6rem; grid-template-columns: 1fr 1fr; gap: 0.8rem 1.5rem; }
.crm-price {
  position: sticky; top: var(--sticky-top);
  padding: clamp(1.6rem, 1.2rem + 1.5vw, 2.4rem);
  border-radius: var(--radius);
  border: 1px solid var(--hair);
  background: var(--card);
  box-shadow: var(--shadow);
}
.crm-price-k {
  font-family: var(--font); font-size: 0.72rem; font-weight: var(--w-medium);
  letter-spacing: var(--track-label); text-transform: uppercase; color: var(--clay);
}
.crm-price-amt { display: flex; align-items: baseline; gap: 0.35rem; margin-top: 0.8rem; }
.crm-price-amt strong {
  font-family: var(--font-display); font-weight: var(--w-display); letter-spacing: -0.04em; font-variant-numeric: lining-nums tabular-nums;
  font-size: clamp(3rem, 2.2rem + 3vw, 4.4rem); line-height: 1; color: var(--ink);
}
.crm-price-amt span { color: var(--ink-soft); font-size: 1.05rem; }
.crm-price > p { margin-top: 0.7rem; color: var(--ink-soft); line-height: 1.55; }
.crm-price .btn { width: 100%; justify-content: center; margin-top: 1.4rem; }
.crm-price-small { margin-top: 1rem; font-size: 0.86rem; color: var(--ink-soft); line-height: 1.5; }
.crm-price-small a { color: var(--clay); font-weight: 600; }
.crm-price-terms { margin-top: 1.2rem; padding-top: 1.1rem; border-top: 1px solid var(--hair); display: grid; gap: 0.5rem; font-size: 0.9rem; color: var(--ink-soft); }
.crm-price-terms strong { color: var(--ink); font-weight: 600; }

/* ---------------------------------------------------------- faq */
.crm-faq .faq-list { margin-inline: auto; }

/* ---------------------------------------------------------- responsive */
@media (max-width: 960px) {
  .crm-hero-grid, .crm-row, .crm-row--flip, .crm-price-wrap { grid-template-columns: 1fr; }
  .crm-row--flip .crm-row-copy { order: 0; }
  .crm-hero-visual { margin-top: 0.5rem; }
  .crm-price { position: static; }
}
@media (max-width: 760px) {
  .crm-facts { grid-template-columns: 1fr 1fr; }
  .crm-facts li:nth-child(3) { padding-left: 0; border-left: 0; }
  .crm-facts li:nth-child(n + 3) { border-top: 1px solid var(--nv-line); }
  .crm-price-wrap .check-list { grid-template-columns: 1fr; }
  .crm-hero-visual .crm-phone { width: 32%; right: -0.25rem; }
  .crm-pair .crm-phone:last-child { transform: translateY(1.5rem); }
}

@media (prefers-reduced-motion: reduce) {
  .crm-hero-visual .crm-frame, .crm-pair .crm-phone:last-child { transform: none; }
}

/* The header is sticky, so in-page jumps land below it. */
.crm-page #tour, .crm-page #how, .crm-page #pricing { scroll-margin-top: clamp(96px, 12vh, 132px); }

/* Paper & Night (v2.1): the price card is the one ivory card on the page. */
.crm-price { border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.crm-facts { border-top-color: var(--gold-soft); }
.crm-phone picture { border-radius: 27px; }
/* `.crm-row-copy > p` sizes the body copy; the row label keeps label size. */
.crm-row-copy > .crm-row-n { margin-top: 0; font-size: 0.72rem; line-height: 1.4; color: var(--clay); }

/* Row 08: two real dashboard panels stacked, the calls panel offset. */
.crm-stack { display: grid; gap: 1rem; }
.crm-stack .crm-frame:last-child { margin-left: 12%; }
@media (max-width: 640px) { .crm-stack .crm-frame:last-child { margin-left: 0; } }