/* Homepage product proof and the surrounding section backgrounds. */
.homeJobProof { scroll-margin-top: 88px; }
.homeJobProof > h2 { max-width: 740px; text-wrap: balance; color: var(--Base-100); }
.homeJobProof > p.sectionSubtitle { max-width: 640px; margin-bottom: 44px; font-size: 20px; line-height: 1.6; color: #bdc8c1; }
.homeProductFeatures { padding-top: 72px; padding-bottom: 72px; background: var(--Base-100); }
.homeProductFeatures .proofGrid { margin-top: 0; }
.homePricing { background: #f3f7f4; border-color: #e1e9e3; scroll-margin-top: 88px; }

.homeJobPreview { max-width: 1080px; margin: 0 auto; text-align: left; }
.homeJobFrame { padding: 28px; border: 1px solid #ffffff1a; border-radius: 22px; background: #ffffff05; }
.homeJobWindow { overflow: hidden; border: 1px solid #dde5df; border-radius: 12px; background: #fff; box-shadow: 0 14px 30px #253e2e0d; color: #17251e; font: 400 14px/1.5 Inter, sans-serif; }
.homeJobTopbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 28px; }
.homeJobIdentity { display: flex; align-items: center; gap: 12px; }
.homeJobIdentity > strong { font-size: 19px; font-weight: 600; letter-spacing: -.4px; }
.homeJobSymbol { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 8px; color: #477b5e; background: #eef5f0; }
.homeJobSymbol svg { width: 20px; height: 20px; }
.homeJobStatus { display: flex; align-items: center; gap: 7px; padding: 5px 10px; border: 1px solid #e6e3f5; border-radius: 6px; background: #f5f3fc; color: #675899; font-size: 12px; white-space: nowrap; }
.homeJobStatus::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.homeJobTabs { display: flex; gap: 24px; padding: 0 28px; border-bottom: 1px solid #e9eeea; color: #7c857f; font-size: 12px; }
.homeJobTabs > span { padding: 4px 0 14px; }
.homeJobTabs > .homeJobTabActive { color: #0a7955; box-shadow: 0 2px 0 #0a7955; font-weight: 500; }
.homeJobBody { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
.homeJobActivity { padding: 24px 28px 14px; }
.homeJobActivityHeading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.homeJobActivityHeading h3 { margin: 0; font: 600 15px/1.5 Inter, sans-serif; }
.homeJobActivityHeading > span { color: #87908a; font-size: 11px; }
.homeJobEvents { list-style: none; margin: 0; padding: 0; }
.homeJobEvent { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; position: relative; align-items: start; column-gap: 12px; padding-bottom: 21px; }
.homeJobEvent:not(:last-child)::after { content: ""; position: absolute; top: 32px; bottom: 2px; left: 14px; border-left: 1px solid #e5ebe6; }
.homeJobEventIcon { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: 1px solid #e6ebe7; border-radius: 50%; background: #f8faf8; color: #6c8878; }
.homeJobEventIcon svg { width: 15px; height: 15px; }
.homeJobEvent > div { padding-top: 1px; }
.homeJobEvent strong { display: block; font-size: 13px; line-height: 1.5; font-weight: 500; }
.homeJobEvent > div > span { display: block; margin-top: 3px; color: #7e8982; font-size: 11px; line-height: 1.5; }
.homeJobEvent time { padding-top: 3px; color: #869189; font-size: 11px; font-variant-numeric: tabular-nums; }
.homeJobEvent--latest .homeJobEventIcon { border-color: #d4e9dc; color: #087c56; background: #e6f4ec; }
.homeJobEvent--latest strong { color: #087c56; }
.homeJobDetails { display: flex; flex-direction: column; gap: 22px; padding: 26px 28px; border-left: 1px solid #e9eeea; background: #fafcfb; }
.homeJobLabel { display: block; margin-bottom: 11px; color: #7c8980; font-size: 10px; line-height: 1.5; font-weight: 500; letter-spacing: 1px; text-transform: uppercase; }
.homeJobPerson > div { display: flex; align-items: center; gap: 12px; }
.homeJobPerson strong { font-size: 14px; line-height: 1.5; font-weight: 500; }
.homeJobAvatar { display: flex; flex-shrink: 0; align-items: center; justify-content: center; width: 36px; height: 36px; border: 1px solid #d7e7dc; border-radius: 50%; background: #edf5f0; color: #367750; font-size: 11px; }
.homeJobAvatar--customer { border-color: #e4e0f1; background: #f1eef8; color: #7c6aa3; }
.homeJobNext { margin-top: auto; padding-top: 20px; border-top: 1px solid #e8eee9; }
.homeJobNext > strong { display: block; font-size: 13px; line-height: 1.6; font-weight: 500; }
.homeJobNext > span:last-child { color: #7c8980; font-size: 11px; }
.homeJobProgress { display: block; height: 4px; margin: 15px 0 9px; border-radius: 8px; background: #e3ece6; }
.homeJobProgress > i { display: block; width: 50%; height: 100%; border-radius: inherit; background: #72a88a; }
.homeJobNotes { display: grid; grid-template-columns: 1.3fr 1fr; gap: 24px; padding: 22px 56px 0; color: #bdc8c1; font-size: 13px; line-height: 1.6; }
.homeJobNotes > span { display: flex; align-items: center; gap: 9px; }
.homeJobNotes svg { width: 16px; height: 16px; flex: 0 0 16px; color: #34d399; }

@media (max-width: 900px) {
  .homeJobFrame { padding: 18px; }
  .homeJobTopbar { padding: 18px 22px; }
  .homeJobActivity, .homeJobDetails { padding-left: 22px; padding-right: 22px; }
  .homeJobNotes { padding-left: 40px; padding-right: 40px; }
}

@media (max-width: 640px) {
  .homeJobProof > p.sectionSubtitle { margin-bottom: 28px; font-size: 17px; }
  .homeJobFrame { padding: 10px; border-radius: 16px; }
  .homeJobTopbar { padding: 16px; gap: 8px; }
  .homeJobIdentity { gap: 8px; }
  .homeJobIdentity > strong { font-size: 16px; }
  .homeJobSymbol { display: none; }
  .homeJobStatus { font-size: 10px; padding: 4px 7px; }
  .homeJobTabs { padding: 0 16px; gap: 18px; font-size: 11px; }
  .homeJobTabs > span:nth-last-child(-n+2) { display: none; }
  .homeJobBody { grid-template-columns: minmax(0, 1fr); }
  .homeJobActivity { padding: 20px 16px 0; }
  .homeJobEvent { column-gap: 9px; }
  .homeJobEvent strong { font-size: 12px; }
  .homeJobEvent > div > span { font-size: 10px; }
  .homeJobEvent time { font-size: 10px; }
  .homeJobDetails { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 12px; border-left: 0; border-top: 1px solid #e9eeea; padding: 20px 16px; }
  .homeJobLabel { font-size: 9px; letter-spacing: .5px; }
  .homeJobPerson > div { gap: 7px; }
  .homeJobPerson strong { font-size: 12px; }
  .homeJobAvatar { width: 27px; height: 27px; font-size: 9px; }
  .homeJobNext { grid-column: 1 / -1; padding-top: 16px; }
  .homeJobNotes { grid-template-columns: minmax(0, 1fr); gap: 9px; padding: 17px 10px 0; font-size: 12px; }
}