/* How Lleverage works, split layout (Matteo, 2026-09-24).
   Left: the section name, the statement, the lede and a menu of the 4 parts that
   marks the part in view and jumps on click. Right: one visual at a time, cross-
   fading to the next part as the reader scrolls. Both columns stay pinned while
   the section scrolls through its 4 parts. Below 1000px it falls back to the
   stacked stages, each with its own copy. */

.v3-platform.v3p-split .v3p-sectitle{margin:0 0 26px;text-align:left}
.v3-platform.v3p-split #v3p-title{margin:0;font-family:var(--f-d);font-weight:400;color:var(--v3p-paper);
  font-size:clamp(34px,3.05vw,46px)!important;line-height:1.06;letter-spacing:-.035em}
.v3-platform.v3p-split #v3p-title em{font-style:normal;color:#8e9cab}
.v3-platform.v3p-split .v3p-lede{margin:22px 0 0;max-width:430px;font-size:16px;line-height:1.6;color:var(--v3p-muted)}
.v3-platform.v3p-split .v3p-menu{display:none}
.v3-platform.v3p-split .v3p-left{padding:110px 0 20px}

/* ── desktop: two pinned columns over a 4-part scroll track ── */
@media (min-width:1000px){
  .v3-platform.v3p-split{padding:0}
  .v3-platform.v3p-split .v3p-grid{display:grid;grid-template-columns:minmax(0,38fr) minmax(0,62fr);column-gap:64px;
    height:calc(100vh + 3 * 80vh);height:calc(100svh + 3 * 80svh)}
  .v3-platform.v3p-split .v3p-left,
  .v3-platform.v3p-split .v3p-right{position:sticky;top:0;height:100vh;height:100svh;display:flex;align-items:center;align-items:safe center;padding:0}
  .v3-platform.v3p-split .v3p-left-in{width:100%;padding-top:var(--v3p-nav,84px)}
  .v3-platform.v3p-split .v3p-right{padding-top:var(--v3p-nav,84px)}

  /* the menu */
  .v3-platform.v3p-split .v3p-menu{display:block;list-style:none;margin:44px 0 0;padding:0;max-width:440px;counter-reset:none}
  .v3-platform.v3p-split .v3p-menu li{position:relative;border-top:1px solid rgba(250,250,250,.12)}
  .v3-platform.v3p-split .v3p-menu li:last-child{border-bottom:1px solid rgba(250,250,250,.12)}
  /* the part in view: its top rule fills with orange as the reader moves through it */
  .v3-platform.v3p-split .v3p-menu li::before{content:'';position:absolute;left:0;top:-1px;height:2px;width:calc(var(--p,0) * 100%);background:var(--v3p-orange);opacity:0;transition:opacity .3s ease}
  .v3-platform.v3p-split .v3p-menu li.is-on::before{opacity:1}
  .v3-platform.v3p-split .v3p-menu li>a{display:flex;align-items:baseline;gap:18px;padding:17px 0 16px;text-decoration:none;color:#7d8b98;transition:color .3s ease}
  .v3-platform.v3p-split .v3p-menu li>a .n{font-family:var(--f-m);font-size:11px;letter-spacing:.14em;transition:color .3s ease}
  .v3-platform.v3p-split .v3p-menu li>a .t{font-size:17px;line-height:1.3;letter-spacing:-.01em}
  .v3-platform.v3p-split .v3p-menu li>a:hover{color:var(--v3p-paper)}
  .v3-platform.v3p-split .v3p-menu li.is-on>a{color:var(--v3p-paper)}
  .v3-platform.v3p-split .v3p-menu li.is-on>a .n{color:var(--v3p-orange)}
  /* the part's own line opens under it */
  .v3-platform.v3p-split .v3p-mm{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s cubic-bezier(.22,1,.36,1)}
  .v3-platform.v3p-split .v3p-mm>div{overflow:hidden;padding-left:37px;opacity:0;transition:opacity .35s ease}
  .v3-platform.v3p-split .v3p-menu li.is-on .v3p-mm{grid-template-rows:1fr}
  .v3-platform.v3p-split .v3p-menu li.is-on .v3p-mm>div{opacity:1;transition:opacity .5s ease .15s}
  .v3-platform.v3p-split .v3p-mm b{display:block;font-family:var(--f-d);font-weight:400;font-size:22px;line-height:1.2;letter-spacing:-.02em;color:var(--v3p-paper)}
  .v3-platform.v3p-split .v3p-mm p{margin:8px 0 0;font-size:14.5px;line-height:1.6;color:var(--v3p-muted);max-width:380px}
  .v3-platform.v3p-split .v3p-mm .v3p-link{margin:14px 0 20px}

  /* the visuals: stacked, one shown at a time, cross-fading */
  .v3-platform.v3p-split .v3p-stack{position:relative;width:100%;height:min(680px,calc(100svh - var(--v3p-nav,84px) - 60px))}
  .v3-platform.v3p-split.v3p-js .v3p-stack .v3p-stage{position:absolute;inset:0;height:auto;min-height:0;padding:0;border:0;
    display:flex;flex-direction:column;justify-content:center;align-items:stretch;
    opacity:0;visibility:hidden;transition:opacity .6s ease,visibility 0s linear .6s}
  .v3-platform.v3p-split.v3p-js .v3p-stack .v3p-stage.is-current{opacity:1;visibility:visible;transition:opacity .8s ease .12s,visibility 0s}
  .v3-platform.v3p-split .v3p-stack .v3p-stage>.v3p-copy,
  .v3-platform.v3p-split .v3p-stack .v3p-stage>.v3p-link{display:none}
  .v3-platform.v3p-split.v3p-js .v3p-stack .v3p-visual-area{flex:1 1 auto;height:auto;min-height:0;padding:0}
  .v3-platform.v3p-split .v3p-stack .v3p-captions{margin:14px auto 0}
  /* the earlier scroll-fade on stacked stages does not apply to pinned visuals */
  .v3-home .v3-platform.v3p-split .v3p-stage>:is(.v3p-copy,.v3p-visual-area,.v3p-captions,.v3p-link){animation:none!important;opacity:1!important;translate:none!important}
}
@media (min-width:1000px) and (max-height:820px){
  .v3-platform.v3p-split #v3p-title{font-size:clamp(32px,2.8vw,42px)!important}
  .v3-platform.v3p-split .v3p-lede{margin-top:16px;font-size:15px}
  .v3-platform.v3p-split .v3p-menu{margin-top:28px}
  .v3-platform.v3p-split .v3p-menu li>a{padding:13px 0 12px}
}

/* the automation row is drawn at 1040px; wherever it runs as a row (761px and up)
   it scales down as one piece to fit its column (--k is set in platform.js) */
@media (min-width:761px){
  .v3-platform.v3p-split .v3p-build{width:1040px;max-width:none;justify-self:center;margin-inline:calc((100% - 1040px) / 2);transform:scale(var(--k,1));transform-origin:center}
}
/* the automation loop's svg draws a few px past its box; keep it from widening the page (clip keeps the pinning working) */
.v3-platform.v3p-split{overflow-x:clip}

/* ── pass 2 (Matteo 2026-09-24) ─────────────────────────────────────────── */
/* section name above both columns, centred */
.v3-platform.v3p-split .v3p-sectitle-top{margin:0;padding:120px 0 0;text-align:center}
@media (min-width:1000px){ .v3-platform.v3p-split .v3p-sectitle-top{padding:130px 0 10px} }

/* the menu: air between the parts, no orange rule; the part in view is a quiet card */
@media (min-width:1000px){
  .v3-platform.v3p-split .v3p-menu{display:flex;flex-direction:column;gap:8px;margin-top:40px}
  .v3-platform.v3p-split .v3p-menu li,
  .v3-platform.v3p-split .v3p-menu li:last-child{border:1px solid transparent;transition:background .4s ease,border-color .4s ease}
  .v3-platform.v3p-split .v3p-menu li::before{display:none}
  .v3-platform.v3p-split .v3p-menu li>a{padding:15px 20px}
  .v3-platform.v3p-split .v3p-menu li.is-on{background:rgba(250,250,250,.045);border-color:rgba(250,250,250,.12)}
  .v3-platform.v3p-split .v3p-mm>div{padding:0 20px 0 57px}
  .v3-platform.v3p-split .v3p-mm .v3p-link{margin:14px 0 20px}
}

/* the visuals in the product's own grammar: square, hairline, no glow or blur */
.v3-platform.v3p-split .v3p-sys>span::before{display:none}
.v3-platform.v3p-split .v3p-sys>span{width:52px;height:52px;background:#1B2631;border:1px solid rgba(250,250,250,.14);animation:none}
.v3-platform.v3p-split .v3p-sys img{width:28px;height:24px;filter:none}
.v3-platform.v3p-split .v3p-sys strong{font-size:9.5px;color:#9AA6B1;text-shadow:none;margin-top:3px}
.v3-platform.v3p-split .v3p-core{border-radius:0;background:#1B2631;border:1px solid rgba(250,250,250,.22);box-shadow:0 0 0 6px rgba(250,250,250,.03)}
.v3-platform.v3p-split .v3p-core img{filter:none}
.v3-platform.v3p-split .v3p-core i{display:none}
.v3-platform.v3p-split .v3p-orbit-ring{stroke:rgba(250,250,250,.08);stroke-dasharray:2 6}
.v3-platform.v3p-split .v3p-icard,
.v3-platform.v3p-split .v3p-blk{border-radius:0;background:#1B2631;border-color:rgba(250,250,250,.14);box-shadow:0 18px 40px rgba(0,0,0,.28)}
.v3-platform.v3p-split .v3p-ilogo,
.v3-platform.v3p-split .v3p-bico{border-radius:0;background:#223040;border-color:rgba(250,250,250,.10)}
.v3-platform.v3p-split .v3p-blk::before{border-radius:0}
@media (min-width:1000px){ .v3-platform.v3p-split .v3p-grid{margin-top:-120px} }
.v3-platform.v3p-split .v3p-sys>span{background:#F7F7F4;border:1px solid rgba(250,250,250,.5)}

/* systems: the marks float on the ground, no tile */
.v3-platform.v3p-split .v3p-sys>span{background:transparent;border:0}
.v3-platform.v3p-split .v3p-sys img{width:34px;height:30px}

/* Automation, 2 rows: a run travels the line and passes behind each step,
   whose border turns orange while it is behind it (v3-home.js drives the dot) */
.v3-platform .v3p-snake{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  grid-template-areas:"a b c" ". e d";column-gap:56px;row-gap:64px;width:100%;max-width:860px;margin:auto;align-self:center}
.v3-platform .v3p-snk{position:relative;z-index:2;display:flex;align-items:center;gap:14px;min-height:92px;padding:18px 20px;
  background:#1B2631;border:1px solid rgba(250,250,250,.14);box-shadow:0 18px 40px rgba(0,0,0,.28);transition:border-color .25s ease,box-shadow .25s ease}
.v3-platform .v3p-snk b{display:block;font-weight:500;font-size:15px;line-height:1.3;color:#F4F5F6}
.v3-platform .v3p-snk small{display:block;margin-top:5px;font-family:var(--f-mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:#8593a0}
.v3-platform .v3p-snk-team small{color:var(--v3p-orange)}
.v3-platform .v3p-snk .v3p-bico{border-radius:0;background:#223040;border-color:rgba(250,250,250,.10);width:40px;height:40px}
.v3-platform .v3p-snk.is-hit{border-color:var(--v3p-orange);box-shadow:0 0 0 1px var(--v3p-orange),0 18px 40px rgba(0,0,0,.28)}
.v3-platform .v3p-snake-line{position:absolute;inset:0;width:100%;height:100%;overflow:visible;z-index:0;pointer-events:none}
.v3-platform .v3p-snake-line polyline{fill:none;stroke:rgba(250,250,250,.22);stroke-width:1}
.v3-platform .v3p-snake-dot{position:absolute;left:0;top:0;z-index:1;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;
  background:var(--v3p-orange);box-shadow:0 0 0 4px rgba(255,150,38,.16);will-change:transform}
@media (max-width:760px){
  .v3-platform .v3p-snake{grid-template-columns:1fr;grid-template-areas:"a" "b" "c" "d" "e";row-gap:22px;max-width:360px}
  .v3-platform .v3p-snk{min-height:70px;padding:14px 16px}
}
.v3-platform .v3p-snk{text-align:left}