/* =====================================================================
   Workflow Automation page — section styles (loads after bpa.css)
   ===================================================================== */

/* ---------- Hero: live approval card ---------- */
.wh-viz{position:relative;z-index:1;border-radius:120px 20px 120px 20px;overflow:hidden;aspect-ratio:3/2.15;
  background:radial-gradient(120% 100% at 30% 0%,#174A6E 0%,var(--navy) 46%,var(--navy-2) 100%);box-shadow:0 30px 60px -36px rgba(16,43,70,.7)}
.wh-viz::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(127,198,221,.2) 1px,transparent 1.3px);background-size:24px 24px}
.wh-card{position:absolute;left:9%;top:15%;width:54%;background:#fff;border-radius:16px;padding:16px 16px 14px;box-shadow:0 24px 40px -22px rgba(0,0,0,.6)}
.wh-top{display:flex;align-items:center;gap:10px}
.wh-av{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--paper);color:var(--turq);font-size:.7rem;font-weight:800}
.wh-top b{display:block;font-size:.88rem;font-weight:800;color:var(--navy);letter-spacing:-.01em}
.wh-top i{display:block;font-style:normal;font-size:.7rem;color:#6A7D88;margin-top:1px}
.wh-st{margin-left:auto;position:relative;display:inline-flex;align-items:center;gap:6px;font-size:.64rem;font-weight:800;padding:5px 9px;border-radius:999px;border:1px solid var(--turq);color:var(--turq);white-space:nowrap;transition:background .4s,border-color .4s,color .4s}
.wh-st em{width:6px;height:6px;border-radius:50%;background:currentColor;animation:wfPulse 1.4s ease-in-out infinite}
.wh-st .b{display:none}
.wh-viz.done .wh-st{background:var(--mint);border-color:var(--mint);color:var(--navy)}
.wh-viz.done .wh-st .a{display:none}.wh-viz.done .wh-st .b{display:inline}
.wh-viz.done .wh-st em{animation:none}
.wh-rows{display:grid;gap:8px;margin:16px 0 14px}
.wh-rows span{display:block;height:8px;width:var(--w);border-radius:4px;background:#E7EFF2}
.wh-act{display:flex;gap:8px}
.wh-act span{font-size:.7rem;font-weight:800;padding:8px 12px;border-radius:8px;border:1px solid var(--line-2);color:var(--navy)}
.wh-act .ok{background:var(--navy);border-color:var(--navy);color:#fff;transition:background .35s,color .35s}
.wh-viz.done .wh-act .ok{background:var(--mint);border-color:var(--mint);color:var(--navy)}
.wh-feed{list-style:none;margin:0;padding:0;position:absolute;right:7%;bottom:11%;width:48%;display:flex;flex-direction:column;gap:8px}
.wh-feed li{display:flex;align-items:center;gap:9px;font-size:.74rem;font-weight:700;color:#fff;padding:9px 12px;border-radius:12px;
  background:rgba(255,255,255,.08);border:1px solid rgba(127,198,221,.28);backdrop-filter:blur(6px);opacity:0;transform:translateX(14px);transition:opacity .45s var(--ease),transform .45s var(--ease),background .4s}
.wh-feed li.on{opacity:1;transform:none}
.wh-feed li:last-child.on{background:rgba(91,251,194,.16);border-color:rgba(91,251,194,.55)}
.wh-feed .fi{flex:none;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:rgba(91,251,194,.16);color:var(--mint)}
.wh-feed .fi svg{width:13px;height:13px}
@keyframes wfPulse{0%,100%{opacity:1}50%{opacity:.35}}
@media (max-width:620px){.wh-viz{border-radius:64px 14px 64px 14px;aspect-ratio:4/3.6}.wh-card{left:6%;top:8%;width:70%;padding:12px}.wh-feed{right:5%;bottom:6%;width:66%;gap:6px}.wh-feed li{padding:7px 10px;font-size:.68rem}.wh-act span{padding:6px 9px}.wh-st{font-size:.58rem}}

/* ---------- Signs: the stuck queue ---------- */
.wf-signs{background:var(--white)}
.sg{display:grid;gap:30px}
@media (min-width:1000px){.sg{grid-template-columns:minmax(0,36fr) minmax(0,64fr);gap:56px;align-items:center}.sg .sec-head{margin-bottom:0}}
.q{background:#fff;border:1px solid var(--line);border-radius:22px;box-shadow:0 30px 60px -44px rgba(16,43,70,.55);overflow:hidden}
.q-head{display:flex;align-items:center;gap:14px;padding:14px 20px;background:var(--paper);border-bottom:1px solid var(--line)}
.q-head b{font-size:.92rem;font-weight:800;color:var(--navy);letter-spacing:-.01em}
.q-dots{display:flex;gap:5px}.q-dots i{width:9px;height:9px;border-radius:50%;background:#C9D7DE}
.q-row{display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:center;padding:16px 20px;border-bottom:1px dashed var(--line-2);transition:background .3s var(--ease)}
.q-row:last-child{border-bottom:0}
.q-row:hover{background:#F7FBFC}
.q-ic{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:rgba(27,118,153,.09);color:var(--turq)}
.q-ic svg{width:20px;height:20px}
.q-tx b{display:block;font-size:.98rem;font-weight:800;color:var(--navy);letter-spacing:-.015em}
.q-tx span{display:block;margin-top:3px;font-size:.88rem;line-height:1.55;color:#4F6370}
.q-tag{display:inline-flex;align-items:center;gap:7px;font-size:.7rem;font-weight:800;padding:6px 11px;border-radius:999px;background:#FFF;border:1px solid var(--line-2);color:var(--navy);white-space:nowrap}
.q-tag em{width:7px;height:7px;border-radius:50%;background:var(--turq);box-shadow:0 0 0 0 rgba(27,118,153,.5);animation:qPing 2.2s ease-out infinite}
.q-row:nth-child(3) .q-tag em{animation-delay:.4s}.q-row:nth-child(4) .q-tag em{animation-delay:.8s}.q-row:nth-child(5) .q-tag em{animation-delay:1.2s}.q-row:nth-child(6) .q-tag em{animation-delay:1.6s}
@keyframes qPing{0%{box-shadow:0 0 0 0 rgba(27,118,153,.45)}70%,100%{box-shadow:0 0 0 7px rgba(27,118,153,0)}}
@media (max-width:620px){.q-row{grid-template-columns:auto 1fr;padding:14px 16px}.q-tag{grid-column:2;justify-self:start}.q-head{padding:12px 16px}}

/* ---------- Workflow in practice ---------- */
.wf-practice{background:var(--white)}
.wf{position:relative;width:min(1340px,calc(100vw - 32px));margin-left:calc(50% - min(670px,calc(50vw - 16px)));border:1px solid var(--line);border-radius:26px;padding:22px 24px 22px;
  background-color:#F7FBFC;background-image:radial-gradient(#C9DCE3 1.1px,transparent 1.3px);background-size:20px 20px}
.wf-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.wf .tagline{display:inline-flex;align-items:center;font-size:.72rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--turq-d)}
.wf-ctl{display:flex;gap:8px}
.wf-b{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;border:1px solid var(--line-2);background:#fff;color:var(--navy);cursor:pointer;transition:background .25s,color .25s,border-color .25s}
.wf-b:hover{background:var(--navy);color:#fff;border-color:var(--navy)}
.wf-b svg{width:15px;height:15px;fill:currentColor}
.wf-b .i-play{display:none}.wf-b[aria-pressed="true"] .i-play{display:block}.wf-b[aria-pressed="true"] .i-pause{display:none}
.wf-b:focus-visible,.wf-routes button:focus-visible{outline:2.5px solid var(--turq);outline-offset:2px}
.wf-routes{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 6px}
.wf-routes button{font:inherit;font-size:.8rem;font-weight:700;padding:8px 14px;border-radius:999px;border:1px solid var(--line-2);background:#fff;color:var(--navy);cursor:pointer;transition:background .25s,color .25s,border-color .25s}
.wf-routes button:hover{border-color:var(--turq)}
.wf-routes button[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:#fff}
.wf-routes button.main[aria-pressed="true"]{background:var(--turq);border-color:var(--turq)}
.wf-stage{margin-top:6px}
.wf-svg{display:block;width:100%;height:auto;font-family:inherit;overflow:visible}
.wf-m{display:none;max-width:460px;margin:0 auto}
@media (max-width:899px){.wf-d{display:none}.wf-m{display:block}.wf{padding:18px 14px}}
.wf-card{fill:#fff;stroke:#D2E1E7;stroke-width:1.5;transition:stroke .35s,stroke-width .35s,fill .35s}
.wf-ic circle{fill:#EAF4F7;transition:fill .35s}
.wf-ic{color:var(--turq)}
.wf-ic svg{transition:color .35s}
.wf-k{font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;fill:#7A8D97}
.wf-t{font-size:14px;font-weight:800;fill:var(--navy);letter-spacing:-.01em}
.wf-s{font-size:11.5px;fill:#566A76}
.wf-bt{font-size:13px;font-weight:700;fill:var(--navy)}
.wf-n{transition:opacity .4s var(--ease)}
.wf-n.is-off{opacity:.38}
.wf-n.is-done .wf-card{stroke:var(--turq)}
.wf-n.is-done .wf-ic circle{fill:var(--turq)}
.wf-n.is-done .wf-ic{color:#fff}
.wf-n.is-active .wf-card{stroke:var(--navy);stroke-width:2.2;filter:drop-shadow(0 10px 18px rgba(16,43,70,.18))}
.wf-n.is-active .wf-ic circle{fill:var(--mint)}
.wf-n.is-active .wf-ic{color:var(--navy)}
.wf-e{fill:none;stroke:#BFD0D8;stroke-width:2;stroke-dasharray:5 6;transition:stroke .35s,opacity .4s}
.wf-d .wf-e{marker-end:url(#wfAdg)}.wf-m .wf-e{marker-end:url(#wfAmg)}
.wf-e.is-done,.wf-e.is-live{stroke:var(--turq);stroke-dasharray:none}
.wf-d .wf-e.is-done,.wf-d .wf-e.is-live{marker-end:url(#wfAdt)}.wf-m .wf-e.is-done,.wf-m .wf-e.is-live{marker-end:url(#wfAmt)}
.wf-br,.wf-e:not([data-g="main"]),.wf-lab:not([data-g="main"]){opacity:0;pointer-events:none;transition:opacity .45s var(--ease)}
.wf[data-route="missing"] [data-g="missing"],.wf[data-route="changes"] [data-g="changes"],.wf[data-route="rejected"] [data-g="rejected"],
.wf[data-route="overdue"] [data-g="overdue"],.wf[data-route="failed"] [data-g="failed"]{opacity:1}
.wf-lab rect{fill:#fff;stroke:#D2E1E7}
.wf-lab text{font-size:11px;font-weight:700;fill:#4F6370}
.wf-lab.is-done rect{fill:var(--navy);stroke:var(--navy)}.wf-lab.is-done text{fill:#fff}
.wf-pill{opacity:0;transition:opacity .35s}
.wf-pill.on{opacity:1}
.wf-pill rect{fill:#fff;stroke:var(--turq);stroke-width:1.4;transition:fill .35s,stroke .35s}
.wf-pill text{font-size:11px;font-weight:800;fill:var(--turq)}
.wf-pill .pd{fill:var(--turq);animation:wfPulse 1.3s ease-in-out infinite}
.wf-pill.ok rect{fill:var(--mint);stroke:var(--mint)}.wf-pill.ok text,.wf-pill.ok .pd{fill:var(--navy)}.wf-pill.ok .pd{animation:none}
.wf-pill.bad rect{fill:var(--navy);stroke:var(--navy)}.wf-pill.bad text{fill:#fff}.wf-pill.bad .pd{fill:var(--mint);animation:none}
.wf-dot{fill:var(--mint);stroke:var(--navy);stroke-width:2.2;filter:drop-shadow(0 0 6px rgba(91,251,194,.9));opacity:0;transition:opacity .2s}
.wf-dot.on{opacity:1}
.wf-status{margin:14px 0 0;padding:12px 16px;border-radius:12px;background:#fff;border:1px solid var(--line);font-size:.9rem;line-height:1.5;color:#33485A;min-height:48px}
.wf-status b{color:var(--navy)}
.wf-note{margin:12px 0 0;font-size:.84rem;color:#4F6370}
@media (prefers-reduced-motion:reduce){.wf-pill .pd,.wh-st em,.q-tag em{animation:none}}

/* ---------- Outcomes: dark band ---------- */
.wf-out{position:relative;overflow:hidden;color:#fff;background:linear-gradient(150deg,#133C5E 0%,#0C2642 50%,#07192C 100%)}
.wf-out::before{content:"";position:absolute;right:-120px;top:-160px;width:520px;height:520px;border-radius:50%;background:radial-gradient(closest-side,rgba(91,251,194,.13),transparent);pointer-events:none}
.wf-out .clabel{background:transparent;border-color:rgba(255,255,255,.42);color:#fff}
.wf-out h2{color:#fff}
.wf-out .hi{display:inline;padding:0 3px;background:linear-gradient(var(--mint),var(--mint)) 0 88%/100% .3em no-repeat}
.wf-out .lede{color:rgba(255,255,255,.74)}
.ob{display:grid;gap:0}
@media (min-width:700px){.ob{grid-template-columns:1fr 1fr}}
@media (min-width:1100px){.ob{grid-template-columns:repeat(5,1fr)}}
.ob-i{position:relative;padding:26px 22px 26px 0;border-top:1px solid rgba(255,255,255,.12)}
@media (min-width:1100px){.ob-i{padding:6px 22px 8px;border-top:0;border-left:1px solid rgba(255,255,255,.12)}.ob-i:first-child{border-left:0;padding-left:0}}
.ob-n{display:block;font-size:.7rem;font-weight:800;letter-spacing:.1em;color:rgba(91,251,194,.75)}
.ob-ic{display:grid;place-items:center;width:48px;height:48px;margin-top:14px;border-radius:14px;border:1px solid rgba(91,251,194,.4);background:rgba(91,251,194,.08);color:var(--mint);transition:background .3s,color .3s}
.ob-ic svg{width:22px;height:22px}
.ob-i:hover .ob-ic{background:var(--mint);color:var(--navy)}
.ob-i h3{margin:18px 0 0;font-size:1.04rem;font-weight:800;letter-spacing:-.02em;line-height:1.3;color:#fff}
.ob-i p{margin:10px 0 0;font-size:.88rem;line-height:1.62;color:rgba(255,255,255,.72)}
.ob-m{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 28px;margin-top:40px;padding:18px 22px;border-radius:16px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12)}
.ob-m p{margin:0;font-size:.92rem;line-height:1.55;color:rgba(255,255,255,.85);max-width:62ch}
.ob-m ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.ob-m li{font-size:.74rem;font-weight:800;padding:7px 12px;border-radius:999px;border:1px solid rgba(91,251,194,.55);color:var(--mint)}

/* ---------- Industries: photo tiles ---------- */
.it{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(240px,78%);gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px;scrollbar-width:thin}
@media (min-width:760px){.it{grid-auto-columns:minmax(240px,44%)}}
@media (min-width:1100px){.it{grid-auto-flow:row;grid-template-columns:repeat(5,1fr);overflow:visible}}
.it:focus-visible{outline:2.5px solid var(--turq);outline-offset:4px;border-radius:12px}
.it-c{position:relative;scroll-snap-align:start;min-height:380px;border-radius:20px;overflow:hidden;isolation:isolate;display:flex;align-items:flex-end;background:var(--navy)}
.it-c img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform .8s var(--ease),filter .6s}
.it-c::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(11,28,46,0) 25%,rgba(11,28,46,.78) 62%,rgba(11,28,46,.95) 100%)}
.it-c:hover img{transform:scale(1.06)}
.it-tx{padding:20px 20px 22px}
.it-tx b{display:block;font-size:1.05rem;font-weight:800;letter-spacing:-.02em;color:#fff}
.it-tx b::after{content:"";display:block;width:28px;height:3px;margin-top:10px;border-radius:2px;background:var(--mint);transition:width .4s var(--ease)}
.it-c:hover .it-tx b::after{width:56px}
.it-tx p{margin:12px 0 0;font-size:.86rem;line-height:1.55;color:rgba(255,255,255,.86)}

/* ---------- Why: big numerals ---------- */
.wy{display:grid;gap:34px}
@media (min-width:900px){.wy{grid-template-columns:repeat(3,1fr);gap:40px}}
.wy-i{position:relative;padding-top:22px}
.wy-i::before{content:"";position:absolute;left:0;top:0;width:100%;height:1px;background:var(--line-2)}
.wy-i::after{content:"";position:absolute;left:0;top:-1px;width:64px;height:3px;border-radius:2px;background:linear-gradient(90deg,var(--mint),var(--turq));transition:width .5s var(--ease)}
.wy-i:hover::after{width:100%}
.wy-n{display:block;font-size:4.2rem;font-weight:800;line-height:1;letter-spacing:-.05em;color:transparent;-webkit-text-stroke:1.5px rgba(27,118,153,.45)}
.wy-i h3{margin:16px 0 0;font-size:1.14rem;font-weight:800;letter-spacing:-.022em;line-height:1.3;color:var(--navy)}
.wy-i p{margin:10px 0 0;font-size:.93rem;line-height:1.65;color:#33485A}

/* ---------- Platforms: orbit hub ---------- */
.pl{display:grid;gap:30px;align-items:center}
@media (min-width:960px){.pl{grid-template-columns:minmax(0,40fr) minmax(0,60fr);gap:56px}}
.pl-v{max-width:380px;margin-inline:auto;width:100%}
.orb{display:block;width:100%;height:auto;overflow:visible}
.orb-ring{fill:none;stroke:var(--turq);stroke-width:1.4;stroke-dasharray:3 7;transform-box:fill-box;transform-origin:center;animation:orbSpin 40s linear infinite}
.orb-ring2{fill:none;stroke:var(--line-2);stroke-width:1}
.orb-sp{stroke:var(--line-2);stroke-width:1.4;stroke-dasharray:4 5}
.orb-core{fill:var(--navy)}
.orb-pulse{fill:var(--mint);opacity:.35;transform-box:fill-box;transform-origin:center;animation:orbPulse 2.8s ease-out infinite}
.orb-t{fill:#fff;font-size:13px;font-weight:800}
.orb-sat circle{fill:#fff;stroke:var(--turq);stroke-width:1.6}
.orb-sat{color:var(--navy)}
@keyframes orbSpin{to{transform:rotate(360deg)}}
@keyframes orbPulse{0%{transform:scale(1);opacity:.4}100%{transform:scale(1.55);opacity:0}}
.pl-i{display:grid;grid-template-columns:auto 1fr;gap:18px;padding:20px 0;border-bottom:1px solid var(--line)}
.pl-i:first-child{padding-top:0}
.pl-ic{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:var(--navy);color:var(--mint)}
.pl-ic svg{width:22px;height:22px}
.pl-i h3{margin:2px 0 0;font-size:1.06rem;font-weight:800;letter-spacing:-.02em;color:var(--navy)}
.pl-i p{margin:6px 0 0;font-size:.92rem;line-height:1.6;color:#33485A}
.pl-note{margin:18px 0 0;font-size:.85rem;line-height:1.55;color:#4F6370}
@media (prefers-reduced-motion:reduce){.orb-ring,.orb-pulse{animation:none}}

/* ---------- FAQ: split ---------- */
.fq{display:grid;gap:26px}
@media (min-width:1000px){.fq{grid-template-columns:minmax(0,36fr) minmax(0,64fr);gap:56px;align-items:start}.fq-l{position:sticky;top:calc(var(--nav-h) + 40px)}}
.fq .sec-head{margin-bottom:0}
.fq-ask{margin-top:28px;padding-top:20px;border-top:1px solid var(--line);display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.fq-ask b{font-size:.95rem;font-weight:800;color:var(--navy)}
@media (max-width:999px){.fq-ask{display:none}}
.wf-lane rect{fill:rgba(255,255,255,.55);stroke:#D2E1E7;stroke-dasharray:4 6}
.wf-lane text{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;fill:#9AAAB4}
.wf[data-route]:not([data-route="approval"]) .wf-lane text{opacity:0}
.wf-lane text{transition:opacity .3s}
/* hero layering */
.wh-card{left:8%;top:10%;width:60%}
.wh-feed{right:6%;bottom:8%;width:50%}
.wh-feed li{background:rgba(16,43,70,.94);border-color:rgba(127,198,221,.35);box-shadow:0 12px 24px -14px rgba(0,0,0,.7)}
.wh-feed li:last-child.on{background:#14524F;border-color:rgba(91,251,194,.6)}
.wh-top>div{min-width:0}
.wf-m .wf-s{font-size:12px}.wf-m .wf-t{font-size:14.5px}.wf-m .wf-bt{font-size:13.5px}
@media (max-width:620px){
  .wh-viz{aspect-ratio:auto;padding:24px 18px 26px 18px}
  .wh-card{position:relative;left:auto;top:auto;width:100%;padding:14px}
  .wh-feed{position:relative;right:auto;bottom:auto;width:auto;margin:12px 0 0 14%;min-height:212px}
  .wh-feed li{font-size:.72rem}
}
@media (min-width:621px) and (max-width:979px){.wh-viz{aspect-ratio:3/2.3}}

/* ---------- Industries: full photo, no crop ---------- */
.it-c{display:flex;flex-direction:column;align-items:stretch;min-height:0;background:#fff;border:1px solid var(--line);border-radius:18px;transition:box-shadow .35s var(--ease),transform .35s var(--ease)}
.it-c::after{display:none}
.it-c img{position:relative;inset:auto;z-index:0;width:100%;height:auto;aspect-ratio:700/466;object-fit:cover;display:block}
.it-c:hover{transform:translateY(-3px);box-shadow:0 22px 44px -30px rgba(16,43,70,.5)}
.it-c:hover img{transform:none}
.it-tx{padding:16px 18px 20px}
.it-tx b{color:var(--navy)}
.it-tx p{color:#33485A}
.it-c{overflow:hidden}
.it-c .it-tx{flex:1}

/* ---------- Approach: progress ribbon (distinct from other pages) ---------- */
.ar{list-style:none;margin:0;padding:0;display:grid;gap:22px}
@media (min-width:960px){.ar{grid-template-columns:repeat(4,1fr);gap:0}}
.ar-h{position:relative;display:flex;flex-direction:column;justify-content:center;gap:6px;min-height:118px;padding:18px 44px 18px 26px;color:#fff;
  clip-path:polygon(0 0,calc(100% - 26px) 0,100% 50%,calc(100% - 26px) 100%,0 100%,26px 50%)}
.ar-i:first-child .ar-h{clip-path:polygon(0 0,calc(100% - 26px) 0,100% 50%,calc(100% - 26px) 100%,0 100%);border-radius:16px 0 0 16px;padding-left:22px}
.ar-i:nth-child(1) .ar-h{background:#102B46}
.ar-i:nth-child(2) .ar-h{background:#134566}
.ar-i:nth-child(3) .ar-h{background:#165E82}
.ar-i:nth-child(4) .ar-h{background:#1B7699}
@media (min-width:960px){.ar-i+.ar-i .ar-h{margin-left:-14px;padding-left:44px}}
.ar-n{font-size:.74rem;font-weight:800;letter-spacing:.1em;color:var(--mint)}
.ar-h h3{margin:0;font-size:1.02rem;font-weight:800;letter-spacing:-.018em;line-height:1.3;color:#fff}
.ar-i p{margin:18px 0 0;padding:0 24px 0 4px;font-size:.92rem;line-height:1.65;color:#33485A}
@media (min-width:960px){.ar-i+.ar-i p{padding-left:30px}}
.ar-i p::before{content:"";display:block;width:28px;height:3px;margin-bottom:12px;border-radius:2px;background:var(--mint)}
@media (max-width:959px){
  .ar-h,.ar-i:first-child .ar-h{clip-path:polygon(0 0,100% 0,100% calc(100% - 18px),50% 100%,0 calc(100% - 18px));border-radius:14px 14px 0 0;padding:18px 22px 34px;min-height:0}
  .ar-i p{margin-top:14px;padding:0 4px}
}
.ar-i.rv{transform:translateX(-14px)}
.ar-i.rv.in{transform:none}
/* text colour + spacing tweaks */
.ar-i p{color:#000}
.it-tx b{line-height:1.25}
.it-tx p{color:#000}
.ob-ic{margin-top:0}
/* slightly larger sub-headings */
.svt-p h3{font-size:clamp(1.3rem,2.2vw,1.42rem)}
.ob-i h3{font-size:1.14rem}
.ar-h h3{font-size:1.12rem}
.wy-i h3{font-size:1.26rem}
.pl-i h3{font-size:1.16rem}
.it-tx b{font-size:1.14rem}
.q-tx b{font-size:1.06rem}
/* simplified workflow example */
.wf-t{font-size:13.5px}
.wf-m .wf-t{font-size:14.5px}
.wf-status{display:flex;align-items:center;gap:14px;margin-top:16px;padding:14px 18px;font-size:1.02rem;line-height:1.5;border-color:#C9DCE3;box-shadow:0 14px 30px -24px rgba(16,43,70,.5)}
.wf-status::before{content:"";flex:none;width:12px;height:12px;border-radius:50%;background:var(--mint);box-shadow:0 0 0 5px rgba(91,251,194,.25)}
.wf-status b{font-size:1.06rem}
.wf-routes::before{content:"Choose what happens:";align-self:center;margin-right:4px;font-size:.8rem;font-weight:800;color:var(--navy)}
@media (max-width:699px){.wf-status{display:block;font-size:.95rem}.wf-status::before{display:inline-block;vertical-align:middle;margin-right:10px}}

/* ---------- Why You Need It: compact benefit cards with small graphics ---------- */
.wf-signs .sec-head{margin-bottom:10px}
.bn-lede{margin:0 0 28px;font-size:1.05rem;line-height:1.6;color:#000;max-width:60ch}
.bn{display:grid;gap:16px}
@media (min-width:700px){.bn{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.bn{grid-template-columns:repeat(3,minmax(0,1fr))}}
.bn-c{display:flex;flex-direction:column;padding:16px 18px 20px;border-radius:20px;background:#fff;border:1px solid var(--line);box-shadow:0 26px 50px -42px rgba(16,43,70,.6);transition:transform .35s var(--ease),border-color .35s,box-shadow .35s}
.bn-c:hover{transform:translateY(-5px);border-color:var(--mint);box-shadow:0 30px 56px -38px rgba(16,43,70,.6)}
.bn-g{display:block;width:100%;height:96px;border-radius:14px;background:linear-gradient(160deg,#EEF6F9,#E2F0F5);padding:4px}
.bn-t{display:flex;align-items:center;gap:12px;margin-top:16px}
.bn-ic{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:var(--navy);color:var(--mint)}
.bn-ic svg{width:18px;height:18px}
.bn-t h3{margin:0;font-size:1.02rem;font-weight:800;letter-spacing:-.015em;line-height:1.3;color:var(--navy)}
.bn-c>p{margin:10px 0 0;font-size:.9rem;line-height:1.6;color:#33485A}
/* graphic parts */
.g-b{fill:#C9DCE3;transform-box:fill-box;transform-origin:bottom}
.g-b.m{fill:var(--turq)}
.bn-c.in .g-b{animation:gGrow .9s var(--ease) both}
.bn-c.in .g-b:nth-child(2){animation-delay:.1s}.bn-c.in .g-b:nth-child(3){animation-delay:.2s}.bn-c.in .g-b:nth-child(4){animation-delay:.3s}
@keyframes gGrow{from{transform:scaleY(.15)}to{transform:none}}
.g-ar,.g-ah{fill:none;stroke:var(--navy);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.g-ar{stroke-dasharray:160;stroke-dashoffset:160}
.bn-c.in .g-ar{animation:gDraw 1.2s .3s var(--ease) forwards}
@keyframes gDraw{to{stroke-dashoffset:0}}
.g-c{fill:#fff;stroke:#C9DCE3;stroke-width:1.4}
.g-l{fill:var(--navy)}.g-l2{fill:#C9DCE3}
.g-ln{fill:none;stroke:var(--turq);stroke-width:2.2;stroke-dasharray:4 4}
.g-ah2{fill:none;stroke:var(--turq);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.g-dot{fill:var(--mint);stroke:var(--navy);stroke-width:1.5}
.g-p{fill:var(--navy)}.g-pb{fill:var(--navy)}
.g-ok{fill:var(--mint)}
.g-okt{fill:none;stroke:var(--navy);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.g-okt.w{stroke:#fff}
.g-top{fill:var(--navy)}
.g-cell{fill:#DCE8ED}.g-cell.hot{fill:#F3A24B}
.g-bell circle{fill:#F3A24B}
.g-bell path{fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round}
.bn-c.in .g-bell{animation:gRing 2.4s ease-in-out infinite;transform-box:fill-box;transform-origin:50% 0}
@keyframes gRing{0%,60%,100%{transform:translate(132px,30px) rotate(0)}70%{transform:translate(132px,30px) rotate(12deg)}80%{transform:translate(132px,30px) rotate(-10deg)}90%{transform:translate(132px,30px) rotate(6deg)}}
.g-trk{stroke:#C9DCE3;stroke-width:5;stroke-linecap:round}
.g-fill{stroke:var(--turq);stroke-width:5;stroke-linecap:round;stroke-dasharray:80;stroke-dashoffset:80}
.bn-c.in .g-fill{animation:gDraw 1s .2s var(--ease) forwards}
.g-st.done{fill:var(--turq)}.g-st.pend{fill:#fff;stroke:var(--turq);stroke-width:2.5}.g-st.fail{fill:#E5484D}
.g-x{stroke:#fff;stroke-width:2.4;stroke-linecap:round}
@media (prefers-reduced-motion:reduce){.bn-c .g-b,.bn-c .g-ar,.bn-c .g-fill,.bn-c .g-bell{animation:none!important;stroke-dashoffset:0}}
/* phones: benefits sit in one swipe row */
.bn-dots{display:none}
@media (max-width:699px){
  .bn{grid-auto-flow:column;grid-auto-columns:84%;grid-template-columns:none;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin:0 -20px;padding:4px 20px 8px}
  .bn::-webkit-scrollbar{display:none}.bn>*{scroll-snap-align:start}
  .bn-dots{display:flex;justify-content:center;gap:7px;margin-top:12px}
  .bn-dots i{width:8px;height:8px;border-radius:50%;background:#C9D9E0;transition:width .3s,background .3s}
  .bn-dots i.on{width:22px;border-radius:4px;background:var(--turq)}
}
/* productivity graphic: ticked tasks → automation gear → person with time back */
.g-gr{fill:var(--turq)}
.g-gh{fill:#EEF6F9}
.g-gear{transform-box:fill-box;transform-origin:center}
.bn-c.in .g-gear{animation:gSpin 6s linear infinite}
@keyframes gSpin{from{transform:translate(94px,45px) rotate(0)}to{transform:translate(94px,45px) rotate(360deg)}}
.g-clk{fill:var(--mint);stroke:var(--navy);stroke-width:1.6}
.g-hand{fill:none;stroke:var(--navy);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@media (prefers-reduced-motion:reduce){.bn-c .g-gear{animation:none!important}}