@import url("/pagesrc/_partners.css");
@import url("/assets/shane-widget.css");

/* =====================================================================
   /partners3 — Stripe-inspired design
   Palette: navy #0a2540 · slate #425466 · purple #635bff · cyan #00d4ff
   Signatures: animated gradient hero w/ skewed diagonal edge, 3D-rotated
   floating mockup, skewed light bands, arrow-chevron CTAs.
   Scoped with body:has(.s3hero) so nothing leaks to other pages.
   ===================================================================== */

body:has(.s3hero){background:#fff}
body:has(.s3hero) main{max-width:none;padding:0;margin:0}

.s3hero,.s3why,.s3ways,.s3stats,.s3tools,.s3bens,.s3tiers,.s3cta{
  font-feature-settings:"ss01";
}
.s3w{max-width:1120px;margin:0 auto;padding:0 24px}

/* ---- shared type ---- */
.s3k{font-size:15px;font-weight:700;letter-spacing:.01em;color:#635bff;margin:0 0 10px}
.s3k.cy{color:#00d4ff}
.s3h2{font-size:clamp(30px,3.6vw,44px);font-weight:700;letter-spacing:-.03em;line-height:1.08;color:#0a2540;margin:0 0 16px}
.s3h2.wh{color:#fff}
.s3h2.big{font-size:clamp(34px,4.4vw,56px);text-align:center}
.s3lead{font-size:18px;line-height:1.6;color:#425466;max-width:620px;margin:0 0 8px}
.s3lead.ctr{margin:0 auto 8px;text-align:center}
.s3src{font-size:12.5px;color:#8898aa;margin:22px 0 0}
.s3src.dk{color:#8898aa}

/* ---- buttons (Stripe pill + chevron nudge) ---- */
.s3btn{display:inline-flex;align-items:center;gap:2px;background:#635bff;color:#fff;border:0;border-radius:99px;
  padding:9px 18px;font-size:15px;font-weight:600;line-height:1.4;cursor:pointer;text-decoration:none;
  transition:background .18s ease;white-space:nowrap}
.s3btn:hover{background:#0a2540;color:#fff}
.s3btn .chev,.s3link .chev,.s3go .chev{display:inline-block;margin-left:4px;transition:transform .18s ease;font-weight:700}
.s3btn:hover .chev,.s3link:hover .chev,.s3cat:hover .s3go .chev{transform:translateX(3px)}
.s3link{display:inline-flex;align-items:center;color:#635bff;font-size:15px;font-weight:600;text-decoration:none}
.s3link:hover{color:#0a2540}
.s3cta{display:flex;align-items:center;gap:22px;margin-top:26px;flex-wrap:wrap}
.s3cta.ctr{justify-content:center}

/* ---- hero ---- */
.s3hero{position:relative;padding:150px 0 96px;overflow:visible}
.s3grad{position:absolute;left:0;right:0;top:-260px;height:calc(100% + 240px);
  transform:skewY(-6deg);transform-origin:0 0;overflow:hidden;
  background:linear-gradient(100deg,#a960ee 0%,#ff8a5c 32%,#ffcb57 56%,#90e0ff 82%)}
.s3grad canvas{width:100%;height:100%;display:block}
.s3in{position:relative;max-width:1120px;margin:0 auto;padding:0 24px;
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:56px;align-items:center}
.s3eye{font-size:15px;font-weight:700;color:#0a2540;opacity:.72;margin:0 0 14px}
.s3h1{font-size:clamp(44px,6.2vw,82px);font-weight:800;letter-spacing:-.045em;line-height:.98;color:#0a2540;margin:0 0 22px}
.s3sub{font-size:18px;line-height:1.6;color:#3a4a5f;max-width:560px;margin:0}
.s3hero .s3link{color:#0a2540}
.s3hero .s3link:hover{color:#635bff}

/* floating mockup — Stripe's rotated-3d dashboard card */
.s3mock{position:relative;perspective:1200px}
.s3card{background:#fff;border-radius:14px;padding:20px 22px 18px;width:min(360px,100%);margin-left:auto;
  transform:rotate3d(.5,-.866,0,14deg) rotate(1deg);
  box-shadow:0 30px 60px -12px rgba(50,50,93,.25),0 18px 36px -18px rgba(0,0,0,.3),-8px 8px 24px -8px rgba(50,50,93,.12);
  transition:transform .5s cubic-bezier(.2,.8,.25,1)}
.s3mock:hover .s3card{transform:rotate3d(.5,-.866,0,5deg)}
.s3card.flat{transform:none;margin:0 auto;box-shadow:0 24px 48px -12px rgba(50,50,93,.2),0 12px 24px -14px rgba(0,0,0,.22)}
.s3card-top{display:flex;align-items:center;gap:6px;margin:0 0 16px;padding-bottom:12px;border-bottom:1px solid #f0f3f7}
.s3dot{width:8px;height:8px;border-radius:50%;background:#e3e8ee}
.s3card-t{margin-left:8px;font-size:12px;font-weight:600;color:#8898aa}
.s3card-l{display:block;font-size:12.5px;font-weight:600;color:#697386;margin-bottom:2px}
.s3card-big{display:block;font-size:38px;font-weight:800;letter-spacing:-.03em;color:#0a2540;margin-bottom:14px;
  background:linear-gradient(92deg,#0a2540 20%,#635bff 90%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.s3card-row{display:flex;justify-content:space-between;align-items:baseline;font-size:13.5px;color:#697386;padding:7px 0;border-top:1px solid #f0f3f7}
.s3card-row b{color:#0a2540;font-weight:700}
.s3card-row b.pos{color:#0e9f6e}
.s3card-bar{height:6px;border-radius:99px;background:#f0f3f7;margin:12px 0 10px;overflow:hidden}
.s3card-bar i{display:block;height:100%;width:72%;border-radius:99px;background:linear-gradient(90deg,#635bff,#00d4ff)}
.s3card-foot{font-size:11.5px;color:#8898aa}
.s3chip{position:absolute;background:#fff;border-radius:10px;padding:10px 14px;line-height:1.25;
  box-shadow:0 16px 32px -8px rgba(50,50,93,.22),0 8px 16px -10px rgba(0,0,0,.25)}
.s3chip b{display:block;font-size:13px;font-weight:700;color:#0a2540}
.s3chip span{font-size:11.5px;color:#697386}
.s3chip-a{left:-24px;top:-16px;animation:s3float 7s ease-in-out infinite}
.s3chip-b{right:-8px;bottom:-20px;animation:s3float 8s ease-in-out 1.2s infinite}
@keyframes s3float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

/* ---- why / flow ---- */
.s3why{padding:110px 0 90px}
.s3flow{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin-top:52px}
.s3f .s3fn{display:block;font-size:14px;font-weight:800;color:#635bff;letter-spacing:.06em;margin-bottom:10px}
.s3f h3{font-size:19px;font-weight:700;letter-spacing:-.01em;color:#0a2540;margin:0 0 8px}
.s3f p{font-size:15px;line-height:1.6;color:#425466;margin:0}
.s3note{font-size:14.5px;line-height:1.6;color:#697386;border-left:3px solid #e3e8ee;padding-left:18px;margin:44px 0 0;max-width:760px}

/* ---- ways (skewed light band) ---- */
.s3ways{position:relative;padding:120px 0 130px}
.s3ways::before{content:"";position:absolute;inset:0;background:#f6f9fc;transform:skewY(-6deg);z-index:-1}
.s3cats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:44px}
.s3cat{background:#fff;border-radius:12px;padding:24px 24px 20px;cursor:pointer;position:relative;
  box-shadow:0 2px 5px -1px rgba(50,50,93,.12),0 1px 3px -1px rgba(0,0,0,.08);
  transition:transform .18s ease,box-shadow .18s ease}
.s3cat:hover{transform:translateY(-3px);box-shadow:0 13px 27px -5px rgba(50,50,93,.18),0 8px 16px -8px rgba(0,0,0,.2)}
.s3cat:focus-visible{outline:2px solid #635bff;outline-offset:2px}
.s3ic{display:inline-flex;width:34px;height:34px;color:#635bff;margin-bottom:14px}
.s3ic svg{width:100%;height:100%}
.s3cat h3{font-size:16.5px;font-weight:700;letter-spacing:-.01em;color:#0a2540;margin:0 0 6px}
.s3cat p{font-size:14px;line-height:1.55;color:#425466;margin:0 0 14px}
.s3go{font-size:14px;font-weight:600;color:#635bff}

/* ---- stats (navy band) ---- */
.s3stats{background:#0a2540;padding:100px 0;position:relative;overflow:hidden}
.s3stats::after{content:"";position:absolute;right:-20%;top:-40%;width:70%;height:180%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(99,91,255,.28),transparent 70%)}
.s3nums{display:grid;grid-template-columns:repeat(3,1fr);gap:36px;margin-top:44px;position:relative}
.s3num b{display:block;font-size:clamp(40px,4.6vw,58px);font-weight:800;letter-spacing:-.035em;line-height:1;
  background:linear-gradient(92deg,#90e0ff,#635bff 60%,#a960ee);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:10px}
.s3num span{font-size:15px;color:#adbdcc;line-height:1.5}
.s3stats .s3src{color:#6b7f95;position:relative}

/* ---- tools ---- */
.s3tools{padding:110px 0}
.s3split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:center}
.s3tviz{perspective:1200px}

/* ---- bens ---- */
.s3bens{position:relative;padding:120px 0 130px}
.s3bens::before{content:"";position:absolute;inset:0;background:#f6f9fc;transform:skewY(6deg);z-index:-1}
.s3grid{display:grid;grid-template-columns:repeat(4,1fr);gap:34px 28px;margin-top:48px}
.s3ben h4{font-size:16px;font-weight:700;letter-spacing:-.01em;color:#0a2540;margin:0 0 6px}
.s3ben p{font-size:14px;line-height:1.55;color:#425466;margin:0}
.s3ben .s3ic{width:30px;height:30px;margin-bottom:12px}

/* ---- tiers ---- */
.s3tiers{padding:110px 0 90px}
.s3trow{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:44px;align-items:start}
.s3tier{background:#fff;border:1px solid #e3e8ee;border-radius:14px;padding:28px 26px 24px;position:relative;overflow:hidden}
.s3tier.feat{border-color:transparent;box-shadow:0 13px 27px -5px rgba(50,50,93,.18),0 8px 16px -8px rgba(0,0,0,.18)}
.s3tier.feat::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;
  background:linear-gradient(90deg,#a960ee,#635bff 40%,#00d4ff)}
.s3tk{font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#635bff;margin:0 0 8px}
.s3tier h3{font-size:22px;font-weight:700;letter-spacing:-.02em;color:#0a2540;margin:0 0 6px}
.s3tp{font-size:14px;line-height:1.55;color:#425466;margin:0 0 16px}
.s3tier ul{list-style:none;margin:0;padding:0}
.s3tier li{font-size:14px;color:#425466;padding:7px 0 7px 26px;position:relative;border-top:1px solid #f0f3f7}
.s3tier li::before{content:"";position:absolute;left:2px;top:13px;width:14px;height:14px;border-radius:50%;
  background:#635bff url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="3.4" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6L9 17l-5-5"/></svg>') center/9px no-repeat}

/* ---- cta ---- */
.s3cta.s3rv{display:block}
section.s3cta{padding:80px 0 130px;text-align:center}

/* ---- reveals ---- */
.s3rv{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}
.s3rv.on{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .s3rv{opacity:1;transform:none;transition:none}
  .s3chip-a,.s3chip-b{animation:none}
  .s3card{transform:none}
}

/* ---- responsive ---- */
@media (max-width:1024px){
  .s3cats,.s3grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:960px){
  .s3hero{padding:120px 0 80px}
  .s3in{grid-template-columns:1fr;gap:64px}
  .s3mock{max-width:420px;margin:0 auto;width:100%}
  .s3card{margin:0 auto}
  .s3chip-a{left:-6px}
  .s3chip-b{right:-6px}
  .s3split{grid-template-columns:1fr;gap:48px}
  .s3flow{grid-template-columns:1fr;gap:28px}
  .s3nums{grid-template-columns:1fr;gap:28px}
  .s3trow{grid-template-columns:1fr;gap:16px}
}
@media (max-width:700px){
  .s3cats,.s3grid{grid-template-columns:1fr}
  .s3h1{font-size:clamp(38px,11vw,48px)}
  .s3cat:hover{transform:none}
  .s3card{transform:rotate3d(.5,-.866,0,8deg)}
  .s3ways,.s3bens{padding:96px 0 104px}
  .s3why,.s3tools,.s3tiers{padding:80px 0 64px}
  .s3stats{padding:80px 0}
}

/* =====================================================================
   Stripe-motion additions: rotating headline word, typing terminal,
   network-arc canvas in the stats band, cursor tilt on the hero card.
   ===================================================================== */

/* rotating headline word (gradient, slide-swap; width animated by JS) */
.s3rotwrap{display:inline-block;overflow:hidden;vertical-align:bottom;white-space:nowrap;
  transition:width .38s cubic-bezier(.3,.7,.2,1)}
.s3rot{display:inline-block;
  background:linear-gradient(92deg,#635bff,#9a66ff 55%,#00d4ff);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  transition:transform .3s ease,opacity .3s ease}
.s3rot.swap{transform:translateY(.55em);opacity:0}
@media (prefers-reduced-motion:reduce){.s3rotwrap,.s3rot{transition:none}}

/* developer terminal */
.s3dev{padding:0 0 110px}
.s3term-wrap{perspective:1200px}
.s3term{background:#0a2540;border-radius:14px;overflow:hidden;width:min(560px,100%);
  box-shadow:0 30px 60px -12px rgba(50,50,93,.28),0 18px 36px -18px rgba(0,0,0,.3);
  transform:rotate3d(-.4,.866,0,10deg);transition:transform .5s cubic-bezier(.2,.8,.25,1)}
.s3term-wrap:hover .s3term{transform:rotate3d(-.4,.866,0,3deg)}
.s3term-top{display:flex;align-items:center;gap:6px;padding:12px 16px;background:#0d2b49;border-bottom:1px solid rgba(255,255,255,.06)}
.s3term-top .s3dot{width:10px;height:10px}
.s3term-top .s3dot.r{background:#ff5f57}.s3term-top .s3dot.y{background:#febc2e}.s3term-top .s3dot.g{background:#28c840}
.s3term-t{margin-left:8px;font-size:12px;color:#7a8ea6;font-weight:600}
.s3term pre{margin:0;padding:20px 22px 24px;min-height:196px;font:13px/1.9 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  white-space:pre-wrap;word-break:break-word}
.s3term .tl{display:block}
.s3term .tl.cmd{color:#e6ecf3}
.s3term .tl.ok{color:#3ecf8e}
.s3term .tl.out{color:#90e0ff}
.s3term .tcaret{display:inline-block;width:8px;height:1.1em;vertical-align:text-bottom;background:#90e0ff;
  animation:s3blink 1s steps(1) infinite;border-radius:1px}
@keyframes s3blink{50%{opacity:0}}

/* network arcs behind the stats band */
.s3net{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:.8}
.s3stats .s3w{position:relative}

@media (max-width:960px){
  .s3dev{padding:0 0 80px}
  .s3dev .s3split{gap:40px}
  .s3term{transform:none;margin:0 auto}
}

/* =====================================================================
   Stripe-reference redesign (per Shane's screenshots):
   1. White hero: vivid ribbon right, two-tone headline, live ticker,
      purple + outline buttons, category logo marquee at the bottom.
   2. Dark "Connect to existing systems" node diagram + "Choose your path".
   3. Blue ray-burst behind the closing CTA.
   Overrides the earlier pastel hero (cascade: later rules win).
   ===================================================================== */

/* ---- hero rework ---- */
.s3hero{position:relative;padding:150px 0 0;overflow:hidden;background:#fff}
.s3grad{display:none}
.s3ribbon{position:absolute;top:-16%;right:-10%;width:48%;height:135%;pointer-events:none;
  transform:rotate(6deg);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 34%);
  mask-image:linear-gradient(90deg,transparent 0,#000 34%)}
.s3ribbon canvas{width:100%;height:100%;display:block}
.s3hero .s3in{display:block;max-width:1120px;margin:0 auto;padding:0 24px;position:relative;z-index:1}
.s3tick{display:flex;align-items:baseline;gap:8px;font-size:15px;margin:0 0 34px}
.s3tick b{color:#0a2540;font-weight:700}
.s3tick .n{color:#635bff;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:.01em}
.s3hero .s3h1{font-size:clamp(36px,4.5vw,64px);font-weight:700;letter-spacing:-.035em;line-height:1.08;
  color:#0a2540;max-width:880px;margin:0 0 8px}
.s3h1 .dim{color:#8898aa;font-weight:600}
.s3h1 .vi{color:#7a73ff}
.s3hero .s3cta{margin-top:34px}
.s3btn2{display:inline-flex;align-items:center;background:#fff;border:1px solid #e0e4ea;border-radius:99px;
  padding:8px 18px;font-size:15px;font-weight:600;color:#635bff;text-decoration:none;
  transition:border-color .18s ease,color .18s ease}
.s3btn2:hover{border-color:#8b93a7;color:#0a2540}
.s3logos{position:relative;z-index:1;margin-top:96px;border-top:1px solid #e6ebf1;background:rgba(255,255,255,.72);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);overflow:hidden}
.s3logos-track{display:flex;align-items:center;gap:84px;width:max-content;padding:26px 42px;
  animation:s3marquee 46s linear infinite}
@keyframes s3marquee{to{transform:translateX(-50%)}}
.lg{white-space:nowrap;color:#4f566b;opacity:.85;
  font-weight:800;letter-spacing:.14em;text-transform:uppercase;font-size:13.5px}
.lg2,.lg4,.lg6,.lg8{border:1.5px solid currentColor;border-radius:6px;padding:2px 9px}

/* ---- two-tone (duo) headings ---- */
.s3h2.duo{font-size:clamp(24px,2.5vw,31px);line-height:1.35;letter-spacing:-.015em;max-width:820px;font-weight:600}
.s3h2.duo b{font-weight:700}

/* ---- dark connect section ---- */
.s3connect{background:#0a112c;padding:110px 0 70px;position:relative}
.s3connect .s3h2.duo b{color:#fff}
.s3connect .s3h2.duo span{color:#8792b0}
.s3connect .s3h2.duo .vi,.s3paths .s3h2.duo .vi{color:#7a73ff}
.s3diagram{position:relative;max-width:900px;margin:56px auto 0;aspect-ratio:900/520;
  background-image:radial-gradient(rgba(122,140,255,.16) 1px,transparent 1.4px);background-size:22px 22px;
  border-radius:14px}
.s3wires{position:absolute;inset:0;width:100%;height:100%}
.s3wires .wire{fill:none;stroke:rgba(124,134,255,.55);stroke-width:1.4;stroke-dasharray:3 7;
  animation:s3dash 1.6s linear infinite}
@keyframes s3dash{to{stroke-dashoffset:-10}}
.s3node{position:absolute;transform:translate(-50%,-50%);white-space:nowrap}
.s3node.chip{background:#635bff;color:#fff;font-size:13px;font-weight:600;border-radius:8px;padding:8px 13px;
  box-shadow:0 4px 14px -4px rgba(0,0,0,.5)}
.s3node.core{left:50%;top:50%;width:104px;height:104px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(160deg,#5a51e8,#3d34b8);color:#fff;font-weight:800;font-size:15px;letter-spacing:-.02em;
  border-radius:18px;box-shadow:0 0 0 1px rgba(255,255,255,.08),0 18px 44px -10px rgba(61,52,184,.65);
  animation:s3coreglow 3.4s ease-in-out infinite}
@keyframes s3coreglow{0%,100%{box-shadow:0 0 0 1px rgba(255,255,255,.08),0 18px 44px -10px rgba(61,52,184,.65)}
  50%{box-shadow:0 0 0 1px rgba(255,255,255,.14),0 18px 60px -6px rgba(99,91,255,.85)}}

/* ---- choose your path ---- */
.s3paths{background:#0a112c;padding:70px 0 110px;border-top:1px solid rgba(255,255,255,.07)}
.s3paths .s3h2.duo b{color:#fff}
.s3paths .s3h2.duo span{color:#8792b0}
.s3pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin-top:48px}
.s3path h4{color:#fff;font-size:16.5px;font-weight:700;margin:0 0 8px}
.s3path p{color:#8792b0;font-size:14.5px;line-height:1.6;margin:0 0 14px}
.s3plink{color:#7a8cff;font-size:14.5px;font-weight:600;text-decoration:none}
.s3plink:hover{color:#fff}
.s3plink .chev{display:inline-block;margin-left:3px;transition:transform .18s ease}
.s3plink:hover .chev{transform:translateX(3px)}

/* ---- burst CTA ---- */
section.s3cta{position:relative;overflow:hidden;padding:130px 0 150px;
  background:radial-gradient(120% 120% at 50% 115%,#c7ddf9 0%,#e4effc 48%,#f8fbff 100%)}
.s3burst{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
section.s3cta .s3w{position:relative;z-index:1}

/* ---- responsive for the new pieces ---- */
@media (max-width:960px){
  .s3hero{padding-top:120px}
  .s3ribbon{top:-6%;right:-34%;width:96%;height:70%;opacity:.85}
  .s3hero .s3h1{font-size:clamp(32px,7.2vw,48px)}
  .s3logos{margin-top:72px}
  .s3pgrid{grid-template-columns:1fr;gap:30px}
  .s3diagram{margin-top:40px}
  .s3node.chip{font-size:11px;padding:6px 9px}
  .s3node.core{width:76px;height:76px;font-size:13px;border-radius:14px}
}
@media (max-width:700px){
  .s3tick{flex-wrap:wrap;row-gap:2px}
  .s3connect{padding:80px 0 50px}
  .s3paths{padding:50px 0 84px}
  .s3node.chip{font-size:9.5px;padding:5px 7px}
  section.s3cta{padding:96px 0 110px}
}

/* =====================================================================
   Hero background = the learn-page hero treatment (verbatim from
   _learn.css .lh/.lh-blob/.lh-grid, s3-prefixed): soft blue gradient,
   three drifting blue blobs, dotted grid under a radial mask.
   Replaces the vivid ribbon (markup swapped; ribbon JS no-ops).
   ===================================================================== */
.s3hero{background:linear-gradient(180deg,#eef5ff,#f8fbff 55%,#fff)}
.s3lhbg{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.s3blob{position:absolute;border-radius:50%;filter:blur(72px);will-change:transform}
.s3blob.b1{top:-16%;right:-2%;width:min(50vw,660px);height:min(50vw,660px);opacity:.75;background:radial-gradient(circle at 40% 40%,#9dc0ff,#dcebff 70%);animation:s3blobA 16s ease-in-out infinite}
.s3blob.b2{bottom:-20%;left:-10%;width:min(44vw,580px);height:min(44vw,580px);opacity:.7;background:radial-gradient(circle at 50% 50%,#c3d6ff,#eef4ff 72%);animation:s3blobB 20s ease-in-out infinite}
.s3blob.b3{top:26%;left:34%;width:min(30vw,400px);height:min(30vw,400px);opacity:.5;background:radial-gradient(circle at 50% 50%,#b6ddff,#e9f5ff 74%);animation:s3blobC 24s ease-in-out infinite}
@keyframes s3blobA{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-36px,28px) scale(1.07)}}
@keyframes s3blobB{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(32px,-24px) scale(1.09)}}
@keyframes s3blobC{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(26px,20px) scale(1.13)}}
.s3hgrid{position:absolute;inset:-2px;background-image:radial-gradient(rgba(0,64,170,.11) 1px,transparent 1.5px);background-size:26px 26px;-webkit-mask-image:radial-gradient(120% 92% at 50% 28%,#000 38%,transparent 76%);mask-image:radial-gradient(120% 92% at 50% 28%,#000 38%,transparent 76%);opacity:.55}
.s3logos{background:rgba(255,255,255,.55)}
@media (prefers-reduced-motion:reduce){.s3blob{animation:none}}

/* =====================================================================
   Living connect diagram — "the file's journey": canvas packet layer
   between the wires and the chips, reactive chips/core, event toasts.
   ===================================================================== */
.s3wires{z-index:0}
.s3fx{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
.s3diagram .s3node{z-index:2}
.s3node.chip{transition:box-shadow .3s ease,background .3s ease,transform .3s ease;cursor:default}
.s3node.chip:hover{transform:translate(-50%,-50%) scale(1.07);
  box-shadow:0 0 0 1px rgba(255,255,255,.28),0 8px 26px -4px rgba(99,91,255,.95)}
.s3node.chip.hit{box-shadow:0 0 0 1px rgba(255,255,255,.32),0 0 30px 3px rgba(122,140,255,.85)}
.s3node.chip.hit-warn{background:#ff7a59;box-shadow:0 0 30px 3px rgba(255,122,89,.85)}
.s3node.chip.hit-good{background:#199d68;box-shadow:0 0 30px 3px rgba(62,207,142,.8)}
.s3node.core{transition:transform .35s cubic-bezier(.2,.8,.3,1)}
.s3node.core.flash{animation:none;transform:translate(-50%,-50%) scale(1.08);
  box-shadow:0 0 0 2px rgba(255,255,255,.3),0 0 80px 10px rgba(122,140,255,.95)}
.s3toast{position:absolute;transform:translate(-50%,-100%);background:#111b42;color:#cdd6ff;
  font-size:12.5px;font-weight:600;padding:7px 13px;border-radius:9px;white-space:nowrap;
  border:1px solid rgba(122,140,255,.4);box-shadow:0 12px 34px -8px rgba(0,0,0,.65);
  z-index:3;pointer-events:none;animation:s3toast 2.4s ease forwards}
.s3toast.warn{color:#ffd9cc;border-color:rgba(255,122,89,.5)}
.s3toast.good{color:#c9f5e2;border-color:rgba(62,207,142,.5)}
@keyframes s3toast{0%{opacity:0;transform:translate(-50%,-86%) scale(.92)}
  12%{opacity:1;transform:translate(-50%,-112%) scale(1)}
  78%{opacity:1;transform:translate(-50%,-124%)}
  100%{opacity:0;transform:translate(-50%,-140%)}}
@media (prefers-reduced-motion:reduce){
  .s3wires .wire{animation:none}
  .s3node.chip:hover{transform:translate(-50%,-50%)}
  .s3node.core.flash{transform:translate(-50%,-50%)}
}

/* chip logos + 10-node layout */
.s3node.chip{display:flex;align-items:center;gap:7px}
.s3node.chip svg{width:14px;height:14px;flex:none;opacity:.92}
@media (max-width:960px){.s3node.chip svg{width:11px;height:11px;gap:5px}}
@media (max-width:700px){.s3node.chip svg{display:none}}

/* =====================================================================
   Edge dissolve: animations fade out at the edges and stay within the
   content width instead of running to the page edges (same treatment
   as the partners2 ribbon).
   ===================================================================== */
.s3diagram,.s3diagram .s3fx{
  -webkit-mask-image:radial-gradient(115% 105% at 50% 50%,#000 58%,transparent 96%);
  mask-image:radial-gradient(115% 105% at 50% 50%,#000 58%,transparent 96%)}
.s3net{
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 calc(50% - 520px),#000 calc(50% + 520px),transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 calc(50% - 520px),#000 calc(50% + 520px),transparent 100%)}
.s3burst{
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 calc(50% - 540px),#000 calc(50% + 540px),transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 calc(50% - 540px),#000 calc(50% + 540px),transparent 100%)}

/* =====================================================================
   Hero: white by default. Page Admin can set an image or video background
   (content.heroMedia.partners3) — server injects it into [data-herobg];
   a white veil keeps the headline readable over any media.
   ===================================================================== */
.s3hero{background:#fff}
.s3herobg{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.s3herobg img,.s3herobg video{width:100%;height:100%;object-fit:cover;display:block}
.s3herobg:not(:empty)::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(255,255,255,.94) 0%,rgba(255,255,255,.82) 44%,rgba(255,255,255,.38) 100%)}

/* Logo marquee: content-width with dissolved ends (same as the partners2 ribbon)
   instead of running the full page width. The mask also fades the hairline border. */
.s3logos{max-width:1120px;margin-left:auto;margin-right:auto;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 70px,#000 calc(100% - 70px),transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 70px,#000 calc(100% - 70px),transparent 100%)}

/* Hero default = the learn-page header treatment ("What's yours is yours."):
   blue gradient + drifting blobs + dot grid. Admin heroMedia (image/video)
   still injects into [data-herobg], which layers ABOVE this and covers it. */
.s3hero{background:linear-gradient(180deg,#eef5ff,#f8fbff 55%,#fff)}
.s3logos{background:rgba(255,255,255,.55)}

/* No gap between the burst CTA and the footer (base.css .afoot has margin-top:60px) */
body:has(.s3hero) .afoot{margin-top:0}

/* Hero video card on the right (the SuperSecure film, same as partners2) */
.s3hero .s3in{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.7fr);gap:64px;align-items:center}
.s3media{position:relative;margin:0;border-radius:24px;overflow:hidden;
  box-shadow:0 40px 90px -40px rgba(10,15,30,.5);aspect-ratio:4/5;
  background:#0a0f1e url("https://epgttdsqvuztdsnrdimm.supabase.co/storage/v1/object/public/sitemedia/mb2bposter1784848323.jpg") center/cover no-repeat}
.s3vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.s3fcap{position:absolute;left:14px;bottom:14px;display:inline-flex;align-items:center;gap:8px;
  background:rgba(8,11,18,.55);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  color:#fff;font-size:11.5px;font-weight:600;border-radius:999px;padding:6px 12px}
.s3fcap em{font-style:normal;color:#C6E600}
@media (max-width:960px){
  .s3hero .s3in{grid-template-columns:1fr;gap:44px}
  .s3media{aspect-ratio:16/10;max-height:420px}
}
@media (max-width:700px){
  .s3media{aspect-ratio:16/11;border-radius:18px}
}

/* Qualification matrix under the tier cards (memo §03: obligations rise with economics) */
.s3qm{margin-top:44px;overflow-x:auto}
.s3qm table{width:100%;border-collapse:collapse;font-size:14px}
.s3qm thead th{text-align:center;font-size:13px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#635bff;padding:0 14px 12px;border-bottom:2px solid #e3e8ee}
.s3qm thead th.ft{color:#0a2540}
.s3qm thead th:first-child{text-align:left}
.s3qm tbody th{text-align:left;font-weight:600;color:#0a2540;padding:11px 14px 11px 0;border-bottom:1px solid #f0f3f7;white-space:nowrap}
.s3qm tbody td{text-align:center;color:#425466;padding:11px 14px;border-bottom:1px solid #f0f3f7}
.s3qm tbody td:last-child{background:#f6f9fc;font-weight:600;color:#0a2540}
@media (max-width:700px){
  .s3qm table{font-size:12.5px}
  .s3qm tbody th{white-space:normal;padding-right:8px}
}

/* second partner tool — VAR deal registration (portal card left, copy right) */
.s3split2{margin-top:110px}
@media (max-width:960px){
  .s3split2{margin-top:72px}
  .s3split2 .s3tviz{order:2}
}

/* =====================================================================
   Angled hero edge — the same skewed diagonal as the Ways-to-partner band.
   The background layer (learn gradient + blobs + grid) is skewed -6deg;
   the dot grid and any admin hero media are counter-skewed so they stay
   upright while their bottom edge cuts on the diagonal.
   ===================================================================== */
.s3hero{background:#fff}
.s3lhbg{top:-220px;bottom:80px;transform:skewY(-6deg);
  background:linear-gradient(180deg,#eef5ff,#f8fbff 60%,#fff)}
.s3lhbg .s3hgrid{top:-140px;bottom:-140px;transform:skewY(6deg)}
.s3herobg{top:-220px;bottom:80px;transform:skewY(-6deg);overflow:hidden}
.s3herobg img,.s3herobg video{position:absolute;left:0;top:-140px;width:100%;height:calc(100% + 280px);transform:skewY(6deg)}
@media (max-width:960px){
  .s3lhbg,.s3herobg{bottom:44px}
}

/* dev terminal moves to the RIGHT column — mirror its 3D lean */
.s3term{transform:rotate3d(.4,-.866,0,10deg)}
.s3term-wrap:hover .s3term{transform:rotate3d(.4,-.866,0,3deg)}
@media (max-width:960px){
  .s3term{transform:none}
  .s3dev .s3term-wrap{order:2}
}

/* logo ribbon now lives in the Why-now section (under the lead, above the
   three progression columns); hero gets bottom padding for its diagonal */
.s3hero{padding-bottom:150px}
.s3why .s3logos{margin:48px 0 8px;border-top:0;background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
.s3why .s3logos-track{padding:10px 0}
@media (max-width:960px){
  .s3hero{padding-bottom:110px}
  .s3why .s3logos{margin:36px 0 0}
}

/* =====================================================================
   Deal-registration pipeline demo (VAR tool): a living book of business —
   deals type in, get approved, renewals pay, the protected-count climbs,
   and a rival gets blocked on a specific company's row. Loops on-screen;
   reduced-motion keeps the static seeded list.
   ===================================================================== */
.s3dreg{position:relative;width:min(400px,100%);margin:0 auto}
.s3dr-main{position:relative}
.s3dr-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px}
.s3dr-head .s3card-l{margin-bottom:0}
.s3dr-count{font-size:12px;font-weight:800;color:#635bff;background:#f0efff;border-radius:99px;padding:3px 10px;white-space:nowrap}
.s3dr-count i{font-style:normal;display:inline-block;transition:transform .25s cubic-bezier(.2,1.6,.4,1)}
.s3dr-count.pop i{transform:scale(1.45)}
.s3dr-list{margin:4px 0 10px}
.s3dr-row{display:flex;align-items:center;gap:10px;padding:8px 0;border-top:1px solid #f0f3f7;
  max-height:60px;overflow:hidden;transition:max-height .45s ease,opacity .45s ease,transform .45s ease,background .3s ease}
.s3dr-row.in{max-height:0;opacity:0;transform:translateY(-8px);border-top-color:transparent}
.s3dr-row.out{max-height:0;opacity:0;padding-top:0;padding-bottom:0}
.s3dr-row.hit{background:#fdf2f2;border-radius:8px}
.s3dr-row .av{flex:none;width:26px;height:26px;border-radius:8px;color:#fff;font-size:12.5px;font-weight:800;
  display:flex;align-items:center;justify-content:center}
.s3dr-row .nm{flex:1;min-width:0;line-height:1.25}
.s3dr-row .nm b{display:block;font-size:13.5px;font-weight:700;color:#0a2540;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.s3dr-row .nm i{font-style:normal;font-size:11.5px;color:#8898aa;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.s3dr-row .st{flex:none;font-style:normal;font-size:11px;font-weight:800;border-radius:99px;padding:3px 9px;transition:transform .25s ease}
.s3dr-row .st.flip{transform:scale(1.18)}
.st.s-sub{background:#f0f3f7;color:#697386}
.st.s-ok{background:#e6f9f0;color:#0e9f6e}
.st.s-prot{background:#f0efff;color:#635bff}
.st.s-ren{background:#e6f9f0;color:#0e9f6e}
.s3dr-row.typing .nm b::after{content:"";display:inline-block;width:2px;height:1em;background:#635bff;
  vertical-align:text-bottom;margin-left:2px;animation:s3blink 1s steps(1) infinite}
.s3dr-prog{display:block;height:100%;width:64%;border-radius:99px;background:linear-gradient(90deg,#635bff,#00d4ff);
  transition:width .9s cubic-bezier(.2,.7,.2,1)}
.s3dr-shield{position:absolute;top:-14px;right:-14px;width:44px;height:44px;border-radius:50%;
  background:#0e9f6e;color:#fff;display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 24px -6px rgba(14,159,110,.6);transition:transform .4s cubic-bezier(.2,1.6,.4,1)}
.s3dr-shield svg{width:22px;height:22px}
.s3dr-shield.pulse{transform:scale(1.18) rotate(6deg)}
.s3dr-rival{position:absolute;right:-30px;top:40%;width:238px;background:#fff;border-radius:12px;
  padding:13px 15px;line-height:1.35;z-index:2;
  box-shadow:0 18px 40px -10px rgba(50,50,93,.3),0 8px 16px -10px rgba(0,0,0,.25);
  opacity:0;transform:translateX(150%);transition:opacity .45s ease,transform .55s cubic-bezier(.2,.8,.3,1),top .4s ease}
.s3dr-rival>b{display:block;font-size:13px;font-weight:800;color:#0a2540}
.s3dr-rival-acc{font-size:12px;color:#697386}
.s3dr-rival em{display:none;font-style:normal;margin-top:8px;font-size:12px;font-weight:800;color:#c02a2a;
  background:#fdeaea;border-radius:7px;padding:4px 9px}
.s3dr-rival.on{opacity:1;transform:translateX(0)}
.s3dr-rival.blocked{animation:s3drshake .5s ease;border:1.5px solid #e0473c}
.s3dr-rival.blocked em{display:inline-block}
@keyframes s3drshake{0%,100%{margin-right:0}20%{margin-right:10px}40%{margin-right:-6px}60%{margin-right:4px}80%{margin-right:-2px}}
@media (max-width:960px){.s3dr-rival{right:-8px}}

/* ticker lives in Why-now now (under the h2, above the lead) */
.s3why .s3tick{margin:2px 0 20px}

/* tighter hero top — the ticker moved out, so the headline starts near the sub-nav */
.s3hero{padding-top:64px}
@media (max-width:960px){.s3hero{padding-top:44px}}

/* copy top-aligns (the tall film card was vertically centering the headline down) */
.s3hero .s3in{align-items:flex-start}
.s3hero .s3copy{padding-top:8px}

/* film popup (learn-style lightbox) */
.s3media{cursor:pointer;transition:transform .25s ease}
.s3media:hover{transform:scale(1.012)}
.s3media:focus-visible{outline:3px solid #635bff;outline-offset:3px}
.s3fcap{gap:7px}
.s3filmov{position:fixed;inset:0;z-index:400;background:rgba(8,10,16,.93);display:flex;align-items:center;justify-content:center;padding:4vh 4vw}
.s3filmov[hidden]{display:none}
.s3filmov video{width:min(1100px,100%);max-height:88vh;border-radius:16px;box-shadow:0 40px 120px rgba(0,0,0,.6);background:#000}
.s3filmx{position:absolute;top:20px;right:24px;width:40px;height:40px;border-radius:50%;border:0;cursor:pointer;
  background:rgba(255,255,255,.14);color:#fff;font-size:17px;line-height:1;backdrop-filter:blur(8px)}
.s3filmx:hover{background:rgba(255,255,255,.26)}

/* ribbon lives in the Ways band now (under the lead, above the category cards) */
.s3ways .s3logos{margin:40px 0 6px;border-top:0;background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
.s3ways .s3logos-track{padding:10px 0}

/* short headline: copy centers vertically against the film card */
.s3hero .s3in{align-items:center}
.s3hero .s3copy{padding-top:0}

/* hero film player matches the learn page: 16/10 uncropped, centered play circle, hover lift */
.s3media{aspect-ratio:16/10;border-radius:22px;background:#0b1020;
  box-shadow:0 34px 70px -22px rgba(20,44,92,.45),0 6px 18px rgba(20,44,92,.12);
  transition:transform .18s ease,box-shadow .18s ease}
.s3media:hover{transform:translateY(-3px);box-shadow:0 44px 86px -26px rgba(20,44,92,.55),0 8px 22px rgba(20,44,92,.14)}
.s3vid{object-fit:cover}
.s3play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:70px;height:70px;border-radius:50%;
  background:rgba(255,255,255,.94);display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 28px rgba(0,0,0,.28);transition:transform .18s ease,background .18s ease}
.s3play svg{width:26px;height:26px;margin-left:3px}
.s3media:hover .s3play{transform:translate(-50%,-50%) scale(1.07);background:#fff}
@media (max-width:960px){.s3media{aspect-ratio:16/10;max-height:none}}

/* hero spacing matches the learn hero: near-full-viewport, content centered */
.s3hero{min-height:92vh;min-height:92dvh;display:flex;flex-direction:column;justify-content:center;
  padding-top:clamp(80px,10vh,130px);padding-bottom:clamp(64px,9vh,120px)}
.s3hero .s3in{width:100%}
@media (max-width:960px){.s3hero{min-height:0;padding-top:56px;padding-bottom:80px}}

/* compact hero: content-sized, not viewport-sized (the short headline floated in 92vh) */
.s3hero{min-height:0;display:block;padding-top:clamp(52px,7vh,88px);padding-bottom:clamp(96px,12vh,140px)}

/* Why-now split: copy left, file-perimeter animation right */
.s3why-top{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:56px;align-items:center}
.s3perim{display:flex;align-items:center;justify-content:center}
.s3perim canvas{width:min(420px,100%);aspect-ratio:1;display:block}
@media (max-width:960px){.s3why-top{grid-template-columns:1fr;gap:16px}.s3perim{display:none}}

/* wide screens: the hero diagonal's clearance scales with viewport (was fixed px → chopped) */
.s3lhbg,.s3herobg{bottom:max(44px,7.5vw)}
.s3hero{padding-bottom:max(96px,9vw)}
@media (max-width:960px){.s3lhbg,.s3herobg{bottom:max(36px,7.5vw)}.s3hero{padding-bottom:max(80px,10vw)}}

/* headline line breaks: "Distribute, deploy," / "and defend your" / "[term] with" / "verifiable ownership." */
.s3hero .s3hln,.s3hero .s3rotline{display:block}
.s3hero .s3rotline .s3rotwrap{display:inline-block}

/* ================= connect scene v2 — "the life of a file" ================= */
/* the canvas engine draws its own curved conduits; the static dashed SVG stays
   only for no-JS / reduced-motion visitors */
.s3diagram.live .s3wires{display:none}
/* idle ambience: chips breathe softly so the scene never looks dead */
.s3diagram.live .s3node.chip{animation:s3breathe 5.2s ease-in-out infinite}
.s3diagram.live .s3node.chip:nth-child(odd){animation-delay:-2.6s}
.s3diagram.live .s3node.chip:nth-child(3n){animation-delay:-1.3s}
@keyframes s3breathe{0%,100%{box-shadow:0 0 0 0 rgba(122,140,255,0)}50%{box-shadow:0 0 18px 1px rgba(122,140,255,.28)}}
/* parallax depth: JS drives --px/--py; hover scale still composes on top */
.s3diagram.live .s3node.chip{transform:translate(calc(-50% + var(--px,0px)),calc(-50% + var(--py,0px)))}
.s3diagram.live .s3node.chip:hover{transform:translate(calc(-50% + var(--px,0px)),calc(-50% + var(--py,0px))) scale(1.07)}
/* revocation blackout: the ecosystem dims, survivors glow */
.s3node.chip.dim{opacity:.22;filter:saturate(.2)}
.s3node.chip{transition:box-shadow .3s ease,background .3s ease,transform .3s ease,opacity .45s ease,filter .45s ease}
.s3node.core.alarm{background:radial-gradient(circle at 30% 25%,#ff9a7a,#c2371e 70%);
  box-shadow:0 0 0 1px rgba(255,160,120,.5),0 0 60px 8px rgba(255,110,70,.55)}
/* live audit ledger under the diagram */
.s3ledger{max-width:900px;margin:26px auto 0;display:flex;gap:18px;align-items:flex-start;
  background:#0d1533;border:1px solid rgba(124,134,255,.18);border-radius:12px;padding:12px 16px;
  font:12.5px/1.6 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.s3led-live{display:inline-flex;align-items:center;gap:7px;color:#8fa0d8;font-weight:600;white-space:nowrap;padding-top:1px}
.s3led-live i{width:7px;height:7px;border-radius:50%;background:#3ecf8e;box-shadow:0 0 8px 1px rgba(62,207,142,.8);
  animation:s3ledblink 2.1s ease-in-out infinite}
@keyframes s3ledblink{0%,100%{opacity:1}50%{opacity:.35}}
.s3led-rows{flex:1;min-height:63px;max-height:63px;overflow:hidden}
.s3led-row{color:#aab6e8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  opacity:0;transform:translateY(-4px);transition:opacity .35s ease,transform .35s ease}
.s3led-row.in{opacity:1;transform:none}
.s3led-row .t{color:#5a6799;margin-right:10px}
.s3led-row.good{color:#8fe6bd}.s3led-row.warn{color:#ffb39e}
.s3led-row:nth-child(2){opacity:.65}.s3led-row:nth-child(3){opacity:.35}
@media (max-width:700px){.s3ledger{margin-left:16px;margin-right:16px}.s3led-live span{display:none}}
@media (prefers-reduced-motion:reduce){
  .s3diagram.live .s3node.chip,.s3led-live i{animation:none}
  .s3led-row{transition:none;opacity:1;transform:none}
}