/* Additions to the stylesheet copied from lpori.com/business-focus (styles.css stays untouched):
   the four stories as on the proof page, the system simulator's frame, and the WhatsApp note that replaces the form. */

#flowbiz-page .cases .section-heading,#flowbiz-page .system .section-heading{max-width:800px;margin-inline:auto}

/* ---- four stories, before and after: the rules of proof.flowbiz.co.il, scoped to this section ---- */
#flowbiz-page .cases{--paper2:#FFFEFB;--flag:#0038B8;--note:#DDE9FC}
#flowbiz-page .cases .case-list{max-width:1120px;margin:44px auto 0;text-align:right}
#flowbiz-page .cases .cs{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:34px;align-items:center;padding-block:28px;border-top:2px dashed var(--sky)}
#flowbiz-page .cases .cs:nth-of-type(even) .cs-fig{order:2}
#flowbiz-page .cases .cs-fig{background:var(--paper2);border-radius:20px;padding:10px;box-shadow:0 12px 26px rgba(45,62,102,.12)}
#flowbiz-page .cases .scene{display:block;width:100%;height:auto}
#flowbiz-page .cases .cs.st-after .scene.after{animation:fb-pop .45s ease}
@keyframes fb-pop{from{transform:scale(.96);opacity:.4}to{transform:none;opacity:1}}
#flowbiz-page .cases .stk{display:grid}
#flowbiz-page .cases .stk>*{grid-area:1/1;min-width:0}
#flowbiz-page .cases .cs.st-before .p-after,#flowbiz-page .cases .cs.st-after .p-before{display:block;visibility:hidden}
#flowbiz-page .cases .cs-txt{align-self:start}
#flowbiz-page .cases .kicker{display:flex;align-items:center;gap:10px;color:var(--flag);font-weight:800;font-size:15.5px;letter-spacing:.02em}
#flowbiz-page .cases .kicker::after{content:"";width:44px;height:2px;background:var(--sky)}
#flowbiz-page .cases .cs h3{font-size:28px;line-height:1.2;font-weight:800;margin:6px 0 12px}
#flowbiz-page .cases .sw{display:inline-flex;border:2px solid var(--ink);border-radius:999px;overflow:hidden;background:var(--paper2);margin-bottom:12px}
#flowbiz-page .cases .sw button{border:0;background:none;padding:7px 20px;font-weight:800;cursor:pointer;color:inherit}
#flowbiz-page .cases .sw button[aria-pressed="true"]{background:var(--ink);color:var(--paper2)}
#flowbiz-page .cases .cs p{margin:0 0 8px;font-size:19px;line-height:1.65}
#flowbiz-page .cases .aft{background:var(--note);padding:12px 14px;border-radius:12px;font-size:19.5px}
#flowbiz-page .cases .section-cta{text-align:center;margin-top:44px}

/* ---- the system simulator (it renders inside a shadow root, with the interactive landing's own stylesheets) ---- */
#flowbiz-page .demo-host{width:min(1240px,calc(100% - 32px));margin:44px auto 0;min-height:640px}
#flowbiz-page .demo-after{max-width:860px;margin:30px auto 0;text-align:center}
#flowbiz-page .demo-after p{background:var(--tint);border-radius:16px;padding:14px 24px;margin:0;font-size:clamp(17.5px,1.55vw,21px);text-wrap:balance}
#flowbiz-page .demo-after p b{font-family:Rubik,sans-serif;font-weight:800}
#flowbiz-page .system-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 40px;max-width:1040px;margin:44px auto 0;text-align:right}
#flowbiz-page .system-item{display:grid;grid-template-columns:52px minmax(0,1fr);gap:18px;padding:30px 0;border-bottom:1px solid #8fb3ef40}
#flowbiz-page .system-item h3{font-size:23px;margin:6px 0 8px}
#flowbiz-page .system-item p{margin:0;font-size:19px;line-height:1.6}
#flowbiz-page .system-note{max-width:760px;margin:40px auto 0;text-align:center;font-weight:600}
#flowbiz-page .system .section-cta{text-align:center}

/* ---- the WhatsApp note in place of the form ---- */
#flowbiz-page .wa-paper{text-align:right}
#flowbiz-page .wa-steps{margin:0 0 26px;padding:0;list-style:none;counter-reset:wa}
#flowbiz-page .wa-steps li{counter-increment:wa;position:relative;padding:13px 46px 13px 0;border-top:1px solid #2d3e6614;font-size:19px;line-height:1.55}
#flowbiz-page .wa-steps li:first-child{border-top:0}
#flowbiz-page .wa-steps li:before{content:counter(wa);position:absolute;right:0;top:12px;width:32px;height:32px;display:grid;place-items:center;border:1.5px solid var(--sky);border-radius:4px 8px 4px 8px;font:700 16px Rubik,sans-serif;color:var(--blue);background:var(--canvas);box-shadow:2px 2px 0 #dce6f7}
#flowbiz-page .wa-bubble{background:#e4f5dc;border-radius:14px 14px 4px 14px;padding:14px 18px;margin:0 0 26px;font-size:18px;line-height:1.55;box-shadow:0 1px 1px #0000001f;color:#1c2b22}
#flowbiz-page .wa-bubble p{margin:0}
#flowbiz-page .wa-bubble p+p{margin-top:6px}
#flowbiz-page .wa-bubble .blank{border-bottom:1.5px dashed #5f6775;color:#5f6775;padding:0 6px}
#flowbiz-page .wa-paper .button{width:100%}

@media(max-width:1024px){
  #flowbiz-page .system-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:860px){
  #flowbiz-page .cases .cs{grid-template-columns:minmax(0,1fr);gap:20px}
  #flowbiz-page .cases .cs:nth-of-type(even) .cs-fig{order:0}
}
@media(max-width:767px){
  #flowbiz-page .cases .case-list{margin-top:28px}
  #flowbiz-page .cases .cs h3{font-size:25px}
  #flowbiz-page .cases .cs p{font-size:18px}
  #flowbiz-page .cases .aft{font-size:18.5px}
  #flowbiz-page .cases .section-cta{margin-top:32px}
  #flowbiz-page .demo-host{width:calc(100% - 20px);margin-top:28px}
  #flowbiz-page .system-grid{grid-template-columns:1fr;margin-top:24px}
  #flowbiz-page .system-item{grid-template-columns:38px minmax(0,1fr);gap:14px;padding:22px 0}
  #flowbiz-page .system-item h3{font-size:21px;margin-top:2px}
  #flowbiz-page .system-item p{font-size:18px}
  #flowbiz-page .wa-steps li{font-size:18px}
}