/* ===== home: mobile experience pass ===== */
.mid-cta{display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:36px;padding-inline:20px;text-align:center}
.mid-cta small{font-size:14px;font-weight:700;color:#5B6B63}
.cp-b b{display:block;font-size:14.5px;font-weight:900;line-height:1.45}
.cp-b small{display:block;margin-top:2px;line-height:1.5}
.pw-pill{display:inline-block;border-radius:14px;line-height:1.6}
.pw-tg{display:none}
.ba-sec h2,.who-sec h2,.pw-sec h2{text-wrap:balance}

@media (max-width:759px){
  /* every tool: title, then the example, then details on demand */
  .pw-b{display:flex;flex-direction:column;gap:0;padding:22px 16px 20px;border-radius:26px}
  .pw-copy{display:contents}
  .pw-copy .pw-eb{order:1}
  .pw-copy h3{order:2;margin-top:8px;font-size:25px}
  .pw-copy>p{order:3;margin-top:8px;font-size:15.5px;line-height:1.65}
  .pw-b .pw-vis{order:4;margin-top:16px;min-height:0;padding:14px 10px;border-radius:20px}
  .pw-copy .pw-pill{order:5;margin-top:14px;align-self:flex-start;font-size:13px}
  .pw-copy .pw-tg{order:6;display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;margin-top:14px;padding:0 16px;min-height:48px;border:0;border-radius:14px;background:#F2F7F4;font:inherit;font-size:15px;font-weight:800;color:#0D1B14;cursor:pointer}
  .pw-tg svg{width:20px;height:20px;transition:transform .3s}
  .pw-b.open .pw-tg svg{transform:rotate(180deg)}
  .pw-copy .pw-l{order:7;display:none;margin-top:14px}
  .pw-b.open .pw-l{display:grid}
  .no-js .pw-copy .pw-l{display:grid}.no-js .pw-tg{display:none}
  .pw-copy .pw-more{order:8;margin-top:14px;min-height:44px;display:inline-flex;align-items:center}
  /* offer tabs: one swipeable row instead of three wrapped rows */
  .pw-off .otabs{display:flex;flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;max-width:100%;scrollbar-width:none;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
  .pw-off .otabs::-webkit-scrollbar{display:none}
  .pw-off .otabs button{flex:none;white-space:nowrap;scroll-snap-align:center;min-height:40px;font-size:13.5px;padding:8px 14px}
  /* before/after: five rows are enough on a phone */
  .ba-c li:nth-child(4),.ba-c li:nth-child(5){display:none}
  .ba-c ul{padding:6px 18px 16px}
  .ba-c li{padding:11px 0;font-size:15px}
  /* integrations: short sample, not the whole list */
  .tg li:nth-child(n+5){display:none}
  /* tap targets */
  .who-sec a,.pw-more{min-height:44px}
}
@media (max-width:759px){
  .pw-sec .wrap>*{min-width:0;max-width:100%}
  .pw-b{width:100%;min-width:0;max-width:100%;overflow:hidden}
  .pw-b>*,.pw-copy>*{min-width:0;max-width:100%}
  .pw-b .pw-vis{width:100%}
  .pw-vis>*{min-width:0;max-width:100%}
}
@media (max-width:759px){
  .pw-copy>*{text-align:start;align-self:stretch}
  .pw-copy .pw-pill{align-self:flex-start}
  .pw-copy .pw-more{align-self:flex-start;justify-content:flex-start}
  .pw-vis .at-l{grid-template-columns:1fr 1fr}
  .pw-vis .at-i{padding:10px 10px;padding-inline-start:26px}
  .pw-vis .at-i b{font-size:13px;line-height:1.35}
  .pw-vis .at-i.plus{grid-column:1/-1;padding-inline-start:12px}
  .pw-vis .at-d{right:10px;top:15px}
}

/* Arabic headings: room for dots and marks, no orphan words */
h1,h2,h3,.h2,.x-h2,.x-h3{line-height:1.38!important;text-wrap:balance}
h1{line-height:1.32!important}
p,li,.ph-sub,.s-sub,.x-sub,.pw-sub,small{text-wrap:pretty}
h1 br+*,h2 br+*{display:inline}
@media (max-width:959px){.h3 h1{font-size:clamp(28px,7.6vw,44px)}.h3 .nw{white-space:nowrap}}

/* hero: lighter green, less black */
.h3{background:radial-gradient(90% 75% at 30% 70%,#14784D 0%,#0C5A39 50%,#08452C 100%)!important}
/* numbers: four tiles */
@media (min-width:900px){.tr{grid-template-columns:repeat(4,minmax(0,1fr))!important}.tr-i{padding:26px 14px!important}.tr-i b{font-size:clamp(40px,3.4vw,52px)!important}}
/* every section its own tone */
.who-sec{background:#EAF4EE!important}
.ba-sec{background:#FFFFFF!important}
.pw-sec{background:#F2F6F3!important}
.sk-sec{background:radial-gradient(120% 70% at 50% 0%,#0B3B28 0%,#05190F 55%,#030C08 100%)!important;margin-top:0!important}
.orbit-sec{background:#EAF4EE!important}
#stories{background:#FFFFFF!important}
#pricing{background:#F2F6F3!important}
#faq{background:#EAF4EE!important;padding-top:72px!important;padding-bottom:72px}
.who-sec,.ba-sec,.pw-sec,.sk-sec,.orbit-sec,#stories,#pricing{padding-block:72px}
@media (min-width:900px){.who-sec,.ba-sec,.pw-sec,.sk-sec,.orbit-sec,#stories,#pricing,#faq{padding-block:104px!important}}
/* before/after: stacked until there is real room, arrow points the right way */
@media (min-width:900px) and (max-width:1099px){
 .ba{grid-template-columns:1fr!important}
 .ba-arw{flex-direction:column!important}
 .ba-ln{width:2px!important;height:22px!important;background:repeating-linear-gradient(180deg,var(--green-w) 0 5px,transparent 5px 10px)!important}
 .ba.go .ba-btn{transform:rotate(-90deg)!important}
 .ba-c ul{padding:10px 24px 22px}
}
@media (min-width:1100px){.ba.go .ba-btn{transform:none!important}}
/* features list always open */
.pw-tg{display:none!important}
.pw-copy .pw-l{display:grid!important}
/* before card: readable, no strike line */
.ba-x{text-decoration:none!important}
.ba-c.before .ba-x{color:#4A3A3A!important}
.ba.go .ba-c.before{opacity:1!important}
/* pill and "learn more" on their own lines, aligned to the text start */
.pw-copy .pw-pill{display:block!important;width:fit-content;max-width:100%;margin-top:20px;padding:9px 16px;line-height:1.6}
.pw-copy .pw-more{display:flex!important;width:fit-content;margin-top:12px!important;gap:6px;min-height:44px;align-items:center}
@media (max-width:759px){.pw-copy .pw-pill{margin-top:16px}}
/* automation list: odd last tile takes the full row */
.pw-vis .at-l .at-i:last-child:nth-child(odd){grid-column:1/-1}
/* numbers strip: original look, clearer caption */
.tr-i p{color:#33433B!important;font-weight:700!important}
.ba-sub{display:block;text-align:center!important;margin-inline:auto!important}
.sk-sec{padding-top:56px!important}@media (min-width:900px){.sk-sec{padding-top:80px!important}}
/* integrations rows: count+label on the start, logos neatly on the end, nothing overlapped */
.grp{gap:14px}
.grp .gh{flex:none}
.grp .stack{flex-wrap:wrap!important;gap:6px!important;padding:0!important;justify-content:flex-end}
.grp .lg.st{margin:0!important;width:34px;height:34px;box-shadow:0 0 0 1px rgba(13,27,20,.08)!important}
@media (max-width:759px){.grp .stack{justify-content:flex-start}}
/* orbit logos: turn the whole tile upright, not the picture inside it (no white corners) */
.orbit .lg{animation:spin 80s linear infinite reverse}
.orbit .spin.rev .lg{animation-duration:100s;animation-direction:normal}
.orbit .spin.slow .lg{animation-duration:60s}
.orbit .lg img{animation:none!important;transform:scale(1.02)}
@media (prefers-reduced-motion:reduce){.orbit .lg{animation:none!important}}
/* three steps (replaces the final green box) */
.steps3{padding-block:72px;background:#fff;background-image:radial-gradient(rgba(13,27,20,.09) 1px,transparent 1px);background-size:22px 22px;text-align:center}
.steps3 h2{font-size:clamp(28px,3.4vw,44px);font-weight:900;line-height:1.32;color:var(--ink)}
.st3-sub{margin-top:10px;font-size:17px;font-weight:700;color:#55655D}
.st3{list-style:none;padding:0;margin:36px auto 0;display:grid;gap:12px;max-width:1080px;counter-reset:s}
.st3 li{position:relative;background:#fff;border-radius:22px;padding:22px 22px 24px;text-align:start;box-shadow:0 0 0 1px rgba(13,27,20,.07),0 20px 40px -30px rgba(5,46,31,.35)}
.st3-n{display:inline-flex;align-items:center;gap:4px;padding:6px 14px;border-radius:999px;background:#007A45;color:#fff;font-size:13px;font-weight:900}
.st3 b{display:block;margin-top:14px;font-size:21px;font-weight:900;color:var(--ink)}
.st3 p{margin-top:6px;font-size:15.5px;font-weight:600;color:#4A5A52;line-height:1.6}
.st3-cta{margin-top:32px;display:flex;flex-direction:column;align-items:center;gap:10px}
.st3-cta .btn{min-width:220px}
.st3-cta small{font-size:13.5px;font-weight:700;color:#55655D}
@media (min-width:900px){.steps3{padding-block:104px}.st3{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.st3 li{padding:28px}}
.pl.pro .pl-pop{right:50%!important;left:auto!important;transform:translateX(50%);top:-15px;padding:7px 18px;font-size:13.5px;white-space:nowrap;z-index:2}