/* =====================================================================
   Home section 3: "One system, all connected"  (2026-10-01)
   ---------------------------------------------------------------------
   The hero owns the customer's journey (five steps). This section shows
   the machine behind it: the four parts, numbered 1 to 4 on the same 2px
   line and marker style as the Lead System page, so the two pages agree.
   It can be built with native Webflow elements using these classes; the
   CSS is written out here so it can also go in an Embed.
   ===================================================================== */
.os { background:#f2f5f3; padding:96px 0; }
.os-inner { max-width:1140px; margin:0 auto; padding:0 24px; }
.os h2 { font-family:Montserrat, sans-serif; font-weight:700; font-size:36px; line-height:1.2; color:#10303d; margin:0 0 16px; }
.os-intro { font-family:"Source Sans 3", sans-serif; font-size:18px; line-height:1.6; color:#10303d; max-width:62ch; margin:0 0 48px; }

/* Four parts on one line */
.os-parts { list-style:none; margin:0; padding:0; display:flex; gap:24px; position:relative; }
.os-parts::before { content:""; position:absolute; left:12.5%; right:12.5%; top:13px; height:2px; background:#76bc43; }   /* the line through the numbers */
.os-part { flex:1; position:relative; text-align:left; }
.os-num { position:relative; z-index:1; display:flex; align-items:center; justify-content:center; width:28px; height:28px;
          margin:0 auto 20px; border-radius:50%; background:#10303d; border:2px solid #76bc43; box-sizing:border-box;
          color:#fff; font-family:Montserrat, sans-serif; font-weight:800; font-size:13px; }
.os-card { background:#fff; border:1px solid #dfe6e9; border-radius:12px; padding:24px 22px 26px; min-height:228px; box-sizing:border-box; }   /* equal-looking cards at desktop */
.os-card img { width:40px; height:40px; display:block; margin:0 0 16px; }   /* plain (frameless) icons: the card is the frame */
.os-card h3 { font-family:Montserrat, sans-serif; font-weight:700; font-size:19px; line-height:1.3; color:#10303d; margin:0 0 8px; }
.os-card p { font-family:"Source Sans 3", sans-serif; font-size:17px; line-height:1.5; color:#10303d; margin:0; }
.os-link { display:inline-block; margin-top:36px; padding:8px 0; font-family:"Source Sans 3", sans-serif; font-weight:600; font-size:18px;
           color:#10303d; text-decoration:underline; text-decoration-color:#76bc43; text-decoration-thickness:2px; text-underline-offset:4px; }

/* Tablet: two by two, line hidden (it would cross between rows) */
@media (max-width:991px) {
  .os { padding:64px 0; }
  .os-parts { flex-wrap:wrap; row-gap:32px; }
  .os-part { flex:0 0 calc(50% - 12px); }
  .os-card { min-height:190px; }
  .os-parts::before { display:none; }
}
/* Phone: one column, the line runs down the left through the numbers */
@media (max-width:767px) {
  .os { padding:56px 0; }
  .os-inner { padding:0 20px; }
  .os h2 { font-size:28px; }
  .os-intro { font-size:17px; margin-bottom:32px; }
  .os-parts { display:block; }
  .os-parts::before { display:block; left:13px; right:auto; top:14px; bottom:40px; width:2px; height:auto; }
  .os-part { display:flex; gap:16px; align-items:flex-start; margin-bottom:16px; }
  .os-num { margin:0; flex:none; }
  .os-card { flex:1; padding:18px 18px 20px; min-height:0; }
  .os-card img { width:40px; height:40px; margin-bottom:12px; }
  .os-card h3 { font-size:18px; }
  .os-card p { font-size:16px; }
}