@charset "UTF-8";

/* =========================
   CREATACRM JOBS PAGE
   Extends landing-page.css + sales-page.css
========================= */

.menu a.is-active {
  color: var(--sales-blue, #2C86D3);
}

a.journey-step {
  text-decoration: none;
  color: inherit;
  display: block;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

a.journey-step:hover {
  border-color: rgba(44, 134, 211, 0.35);
  box-shadow: 0 10px 26px rgba(44, 134, 211, 0.12);
  transform: translateY(-2px);
}

/* Customer → Quote → Sale → Job → Tasks → Process → Invoice */
.jobs-lifecycle-track {
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.jobs-lifecycle-track .journey-step {
  padding: 16px 10px;
}

.jobs-lifecycle-track .journey-step h3 {
  font-size: 14px;
  line-height: 1.35;
}

.jobs-lifecycle-track .journey-step p {
  font-size: 12px;
}

.jobs-hero-composition,
.jobs-section-composition {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}

.sales-hero-visual .jobs-hero-composition {
  max-width: 100%;
}

/* Inline descriptive body links */
.sales-section-intro a,
.sales-copy a {
  color: var(--sales-blue, #2C86D3);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.sales-section-intro a:hover,
.sales-copy a:hover {
  color: #1f6fb5;
}

/* Relation / capability cards */
.jobs-relation-card,
.sales-media .split-card {
  width: 100%;
  background: #fff;
  border: 1px solid var(--sales-border, rgba(44, 134, 211, 0.12));
  box-shadow: 0 12px 32px rgba(44, 134, 211, 0.1);
  border-radius: 18px;
  padding: 34px;
}

.sales-media .split-card h3,
.jobs-relation-card h3 {
  margin: 0 0 18px;
  font-size: 22px;
}

.sales-media .split-card ul,
.jobs-relation-card ul {
  margin: 0;
  padding-left: 22px;
}

.sales-media .split-card li,
.jobs-relation-card li {
  margin-bottom: 12px;
  color: #52637A;
  line-height: 1.5;
}

/* Section monitor (board / AI) */
.jobs-board-monitor,
.crm-section-monitor {
  max-width: 100%;
}

.crm-section-monitor .pc-monitor-bezel {
  padding: 12px 12px 16px;
  border-radius: 16px;
}

.crm-section-monitor .pc-monitor-base {
  width: 150px;
}

/* Mobile phone frame */
.jobs-phone-mockup {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 12px 0;
}

.iphone-mockup {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 16px;
}

.iphone-frame {
  position: relative;
  width: min(260px, 78%);
  padding: 12px;
  background: linear-gradient(160deg, #2a2f38 0%, #11151c 55%, #000 100%);
  border-radius: 42px;
  box-shadow:
    0 0 0 2px #3a404c,
    0 0 0 5px #0b0d11,
    0 24px 50px rgba(7, 23, 53, 0.28);
}

.iphone-frame img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 32px;
  background: #fff;
}

@media (max-width: 1100px) {
  .jobs-lifecycle-track {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .jobs-lifecycle-track {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .jobs-hero-monitor,
  .jobs-ai-monitor {
    max-width: 100%;
  }

  .jobs-ai-monitor .pc-monitor-screen img {
    max-height: 70vh;
    width: auto;
    max-width: 100%;
    margin: 0 auto;
    object-fit: contain;
    object-position: top center;
    background: #fff;
  }
}