/* Escargo — B2B SOLUTION PATHS (commercial pass 2026-09-05).
   ONE stylesheet for the six commercial paths so the pages cannot drift apart, and so a
   later change is one edit rather than six. Every token here matches the existing public
   site (forest #073B24, lime accent #4d7c0f) — this is not a second design system, and it
   deliberately provides LAYOUT PRIMITIVES rather than a single card grid, because six
   identical card walls is exactly what these pages must not be. */

.sol-hero{padding:clamp(46px,7vw,86px) 0 clamp(34px,5vw,54px);background:linear-gradient(180deg,#f6f8f5 0%,#fff 100%)}
.sol-hero .eo-wrap{max-width:1120px}
.sol-kicker{font-size:.79rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:#4d7c0f;margin:0 0 10px}
.sol-hero h1{font-size:clamp(2rem,4.4vw,3rem);font-weight:900;letter-spacing:-.025em;line-height:1.07;margin:0 0 14px;max-width:19ch}
.sol-hero h1 em{font-style:normal;color:#4d7c0f}
.sol-lead{font-size:clamp(1.02rem,1.6vw,1.18rem);line-height:1.55;max-width:60ch;color:#3c4b41;margin:0 0 22px}
.sol-ctas{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.sol-ctas .eo-btn{min-height:48px;display:inline-flex;align-items:center;justify-content:center;padding:0 20px}
.sol-note{font-size:.86rem;color:#5b6a5f;margin:12px 0 0}

.sol-sec{padding:clamp(42px,6vw,76px) 0}
.sol-sec-grey{background:#f6f8f5}
.sol-sec h2{font-size:clamp(1.45rem,2.7vw,2rem);font-weight:900;letter-spacing:-.02em;margin:0 0 10px}
.sol-sec h2 em{font-style:normal;color:#4d7c0f}
.sol-sec > .eo-wrap > p{max-width:62ch;color:#4a5a4f;font-size:1.01rem;line-height:1.6}
.sol-centre{text-align:center}
.sol-centre h2,.sol-centre > .eo-wrap > p{margin-left:auto;margin-right:auto}

/* the operating chain — a numbered spine, not a grid of equal cards */
.sol-chain{list-style:none;margin:26px 0 0;padding:0;counter-reset:step;display:grid;gap:2px}
.sol-chain li{counter-increment:step;position:relative;padding:13px 16px 13px 56px;background:#fff;border:1px solid #e4e9e5}
.sol-chain li:first-child{border-radius:12px 12px 0 0}
.sol-chain li:last-child{border-radius:0 0 12px 12px}
.sol-chain li::before{content:counter(step);position:absolute;left:16px;top:12px;width:26px;height:26px;border-radius:50%;
  background:#073B24;color:#fff;font-size:.78rem;font-weight:800;display:flex;align-items:center;justify-content:center}
.sol-chain b{display:block;font-size:1rem;font-weight:800;letter-spacing:-.01em}
.sol-chain span{display:block;font-size:.93rem;color:#5b6a5f;margin-top:2px}

/* outcome blocks — wide, alternating, never a six-up card wall */
.sol-out{display:grid;gap:18px;margin-top:24px}
.sol-out article{background:#fff;border:1px solid #e4e9e5;border-radius:14px;padding:20px 22px}
.sol-out h3{font-size:1.12rem;font-weight:800;margin:0 0 6px;letter-spacing:-.01em}
.sol-out p{margin:0;color:#4a5a4f;font-size:.98rem;line-height:1.55}
@media (min-width:760px){ .sol-out-2{grid-template-columns:1fr 1fr} }

/* a horizontal run of stages (recovery) */
.sol-flow{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.sol-flow span{background:#fff;border:1px solid #e4e9e5;border-radius:999px;padding:9px 15px;font-size:.92rem;font-weight:700}
.sol-flow span b{color:#4d7c0f;font-weight:800}

/* an honest two-column boundary (supplier) */
.sol-split{display:grid;gap:16px;margin-top:22px}
@media (min-width:760px){ .sol-split{grid-template-columns:1fr 1fr} }
.sol-split section{background:#fff;border:1px solid #e4e9e5;border-radius:14px;padding:20px}
.sol-split h3{margin:0 0 10px;font-size:1.06rem;font-weight:800}
.sol-split ul{margin:0;padding-left:18px;color:#4a5a4f;font-size:.97rem;line-height:1.7}

/* a product-state panel that tells the truth about an unfinished capability */
.sol-truth{background:#fff7ed;border:1px solid #fed7aa;border-radius:12px;padding:16px 18px;margin-top:20px;color:#7c3a12}
.sol-truth b{display:block;margin-bottom:5px;color:#9a3412}
.sol-truth p{margin:0;font-size:.95rem;line-height:1.55}

/* closing route band — CTA hierarchy by business scale */
.sol-routes{display:grid;gap:14px;margin-top:22px}
@media (min-width:820px){ .sol-routes{grid-template-columns:repeat(3,1fr)} }
.sol-route{background:#fff;border:1px solid #e4e9e5;border-radius:14px;padding:18px 18px 20px}
.sol-route.is-lead{border-color:#4d7c0f;box-shadow:0 6px 24px rgba(77,124,15,.10)}
.sol-route p.who{font-size:.86rem;color:#5b6a5f;margin:0 0 10px;min-height:2.4em}
.sol-route .eo-btn{width:100%;text-align:center;min-height:46px;display:inline-flex;align-items:center;justify-content:center}
.sol-route h3{font-size:1.05rem;font-weight:800;margin:0 0 4px}

/* ═══ shared conversion components (2026-09-02) — the selling mechanisms the
   for-business pages reuse. Scene + UI composition (the IMAGE carries the real
   scene, HTML supplies the product UI — never ask an image to draw interface
   text), product-moment rail with a VISIBLE state change, screenshot proof,
   the one permitted economic arithmetic block, and the phone-only sticky CTA.
   Extends the sol-* language — never a second design system. ═══ */

/* scene + floating product-UI chips */
.sol-media{position:relative;border-radius:16px;overflow:hidden;margin-top:28px;box-shadow:0 18px 50px rgba(7,59,36,.14)}
.sol-media img{display:block;width:100%;height:auto}
.sol-media-chip{position:absolute;background:#fff;border:1px solid #e4e9e5;border-radius:12px;padding:10px 14px;box-shadow:0 10px 30px rgba(0,0,0,.18);font-size:.9rem;max-width:min(72%,320px)}
.sol-media-chip b{display:block;font-weight:800;letter-spacing:-.01em}
.sol-media-chip span{display:block;color:#5b6a5f;font-size:.84rem;margin-top:1px}
/* phones: a floating chip would smother a 220px-tall photo — stack them under it
   instead (position:static makes the inline top/right offsets inert) */
@media (max-width:640px){
  .sol-media{background:#fff;border:1px solid #e4e9e5;box-shadow:none;padding-bottom:12px}
  .sol-media-chip{position:static;max-width:none;margin:10px 12px 0;box-shadow:none;border-radius:10px;background:#f8faf8}
}

/* product-moment rail: mini genuine-shaped UI states + the change between them */
.sol-moments{display:grid;gap:14px;margin-top:26px}
@media (min-width:900px){ .sol-moments{grid-template-columns:repeat(3,1fr)} }
.sol-moments.is-4{gap:12px}
@media (min-width:1000px){ .sol-moments.is-4{grid-template-columns:repeat(4,1fr)} }
.sol-moment{background:#fff;border:1px solid #e4e9e5;border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:10px;min-width:0}
.sol-moment h3{font-size:.98rem;font-weight:800;margin:0;letter-spacing:-.01em}
.sol-moment > p{margin:0;font-size:.88rem;color:#5b6a5f;line-height:1.5}
.sol-ui{border:1px solid #e4e9e5;border-radius:10px;background:#f8faf8;padding:12px;font-size:.88rem}
.sol-ui-title{font-weight:800;font-size:.8rem;letter-spacing:.04em;text-transform:uppercase;color:#5b6a5f;margin:0 0 8px}
.sol-ui-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:6px 0;border-bottom:1px dashed #e4e9e5}
.sol-ui-row:last-child{border-bottom:0}
.sol-ui-row b{font-weight:800}
.sol-state{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:4px 10px;font-size:.76rem;font-weight:800;white-space:nowrap}
.sol-state.ok{background:#ecfccb;color:#3f6212}
.sol-state.wait{background:#fef9c3;color:#854d0e}
.sol-state.info{background:#e0f2fe;color:#075985}
.sol-demo-note{font-size:.8rem;color:#8a978d;margin-top:14px}

/* screenshot proof strip — REAL product captures only */
.sol-shots{display:grid;gap:16px;margin-top:26px}
@media (min-width:760px){ .sol-shots{grid-template-columns:repeat(3,1fr)} }
.sol-shot{border:1px solid #e4e9e5;border-radius:14px;overflow:hidden;background:#fff;margin:0}
.sol-shot img{display:block;width:100%;height:auto}
.sol-shot figcaption{padding:10px 14px;font-size:.88rem;color:#4a5a4f}

/* the permitted arithmetic comparison — framed as price arithmetic, never a promise */
.sol-econ{background:#f0fdf4;border:1px solid #bbf7d0;border-radius:14px;padding:20px 22px;margin-top:24px}
.sol-econ p{margin:0;font-size:1.02rem;line-height:1.55}
.sol-econ b{color:#14532d}
.sol-econ small{display:block;margin-top:8px;font-size:.8rem;color:#4d7c0f}

/* phone-only sticky primary CTA — appears after real scroll, one action only */
.sol-sticky{position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;padding:10px 14px calc(10px + env(safe-area-inset-bottom));background:rgba(255,255,255,.96);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-top:1px solid #e4e9e5}
.sol-sticky .eo-btn{width:100%;min-height:48px;display:inline-flex;align-items:center;justify-content:center}
@media (max-width:640px){ .sol-sticky.on{display:block} }