/* The approval flow, as a Stripe-shaped system diagram on the site navy.

   Reads top to bottom: the tools a seat can reach, down through Connectors and
   Knowledge into the engine; seats you install on the left, the board on the right;
   then every outward action stopping at the gate.

   Dashed slots are Stripe's device and carry a real meaning here, spelled out in the
   caption: they are the things you have not filled yet.

   No frame. The fading dot grid is the only thing marking the area, as in the
   reference. Connectors are striped-background divs rather than SVG, so Webflow's
   Designer can edit them and the dashes can march (see motion.css). */

.flow{background:linear-gradient(180deg,#132671 0%,#182d85 45%,#213d9e 100%);color:#fff;padding:88px 0 96px;overflow:hidden}
.flow h2{color:#fff}
.flow .lead{color:#d2d8f2}
/* the one call to action between the hero and the foot of the page */
.flow-cta{display:flex;justify-content:center;margin:24px 0 0}
.flow .flow-cta .btn.p{background:#fff;color:var(--btn)}
.flow .flow-cta .btn.p:hover{background:#eef2fd}
.flow .foot{margin:22px auto 0;font-size:13px;line-height:1.55;color:#8594ce;max-width:62ch;text-align:center}

/* ---- canvas ------------------------------------------------------------ */
.dg{position:relative;margin-top:40px;padding:22px 0 26px;
  display:flex;flex-direction:column;align-items:center}
/* the whole diagram at 80%: zoom (unlike a transform) also shrinks the space it takes,
   so the section closes up round it. The stacked phone layout keeps full size. */
.dg{zoom:.8;max-width:1132px;margin-left:auto;margin-right:auto}   /* 1132 is the full column; under zoom it renders at 80% */
.dg::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:url(../assets/art/grid-dot-dark.svg);background-repeat:repeat;
  -webkit-mask-image:radial-gradient(105% 78% at 50% 48%,#000 22%,rgba(0,0,0,.35) 58%,transparent 82%);
  mask-image:radial-gradient(105% 78% at 50% 48%,#000 22%,rgba(0,0,0,.35) 58%,transparent 82%)}
.dg>*{position:relative;z-index:1}

/* ---- the box, the diagram's basic unit --------------------------------- */
.dg-box{display:inline-flex;align-items:center;justify-content:center;height:42px;padding:0 18px;
  border-radius:6px;background:var(--blue);color:#fff;font:600 14.5px var(--ui);white-space:nowrap}
.dg-ghost{background:transparent;border:1.5px dashed rgba(255,255,255,.22);min-width:78px}

/* ---- top: the tool container and the bridge beneath it ------------------ */
.dg-top{position:relative;display:flex;flex-direction:column;align-items:center;width:100%}
.dg-group{display:flex;gap:11px;padding:13px;border-radius:8px;
  background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.10)}

/* the bridge drops two boxes out of the container and merges them into one stem */
.dg-bridge{position:relative;width:660px;max-width:100%;height:158px}
.br-box{position:absolute;top:52px;width:150px}   /* fixed, so the uprights land on centre */
.br-box.br-l{left:0}
.br-box.br-r{right:0}
.br-up,.br-dn,.br-c{position:absolute;width:1px;
  background-image:repeating-linear-gradient(180deg,rgba(157,173,238,.62) 0 2px,transparent 2px 6px);
  background-size:1px 6px}
.br-up{top:0;height:52px}
.br-dn{top:94px;height:44px}
.br-up.br-l,.br-dn.br-l{left:75px}
.br-up.br-r,.br-dn.br-r{right:75px}
.br-h{position:absolute;left:75px;right:75px;top:138px;height:1px;
  background-image:repeating-linear-gradient(90deg,rgba(157,173,238,.62) 0 2px,transparent 2px 6px);
  background-size:6px 1px}
.br-c{left:50%;top:138px;height:20px}

/* ---- middle: seats, store, engine, outputs, board ---------------------- */
.dg-mid{display:flex;align-items:center;justify-content:center;width:100%}
/* the hub is shorter than the row it sits in, so these two dashed runs carry the
   line from the bridge down to the hub and from the hub down to the approval stem */
.dg-mid{position:relative}
.dg-mid::before,.dg-mid::after{content:"";position:absolute;left:50%;width:1px;height:calc(50% - 56px);
  background-image:repeating-linear-gradient(180deg,rgba(157,173,238,.62) 0 2px,transparent 2px 6px);background-size:1px 6px}
.dg-mid::before{top:0}
.dg-mid::after{bottom:0}
.dg-mid>.dg-box{width:150px}   /* equal flanks keep the hub on the centre line */
/* the hub, after the Stripe tile in Stripe's own diagram: a near-square with a diagonal
   gradient (the site's blue into deep navy), no outline, the white name only */
.dg-hub{flex:0 0 auto;width:112px;height:112px;border-radius:var(--r);background:linear-gradient(135deg,#2b4cd1 0,#1a349d 45%,#11205c 100%);
  box-shadow:0 18px 40px -12px rgba(0,10,40,.6),inset 0 1px 0 rgba(255,255,255,.12);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px}
.dg-hub img{display:block;width:84px;height:auto}

/* the two soft panels that bookend the row */
.dg-panel{flex:0 0 auto;width:196px;padding:14px;border-radius:8px;
  background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.10);
  display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.dg-board{gap:2px;padding:20px 16px}
.dg-board b{font:700 18px var(--display);color:#fff}   /* same title as .dg-gate */
.dg-board span{font:500 15px/1.3 var(--ui);color:#c0caf1}   /* same subtitle as .dg-gate, 12px on screen under .dg zoom .8 */
.dg-cap{font:600 13px var(--ui);color:#d2d8f2}

.dg-seats{display:grid;grid-template-columns:repeat(3,42px);gap:8px}
.dg-seats i{width:42px;height:42px;border-radius:6px;background-size:cover;background-position:center;
  background-color:#132674;display:block}
.dg-seats .dg-add{display:grid;place-items:center;background:transparent;
  border:1.5px dashed rgba(255,255,255,.24);color:#8594ce;font:400 18px/1 var(--ui)}

/* ---- connectors -------------------------------------------------------- */
.dg-wire{flex:1 1 auto;height:1px;min-width:30px;
  background-image:repeating-linear-gradient(90deg,rgba(157,173,238,.62) 0 2px,transparent 2px 6px);
  background-size:6px 1px}
.dg-stem{width:1px;height:42px;
  background-image:repeating-linear-gradient(180deg,rgba(157,173,238,.62) 0 2px,transparent 2px 6px);
  background-size:1px 6px}

/* A dashed line can end on a transparent segment, and because the dashes march that
   gap flickers. A solid cap at each end keeps the connector touching the card. */
.dg-stem,.dg-wire{position:relative}   /* the br-* lines are already absolute; re-declaring them relative broke the bridge */
.br-up::before,.br-up::after,.br-dn::before,.br-dn::after,
.br-c::before,.br-c::after,.dg-stem::before,.dg-stem::after{
  content:"";position:absolute;left:0;width:1px;height:2px;background:rgba(157,173,238,.62)}
.br-up::before,.br-dn::before,.br-c::before,.dg-stem::before{top:0}
.br-up::after,.br-dn::after,.br-c::after,.dg-stem::after{bottom:0}
.br-h::before,.br-h::after,.dg-wire::before,.dg-wire::after{
  content:"";position:absolute;top:0;width:2px;height:1px;background:rgba(157,173,238,.62)}
.br-h::before,.dg-wire::before{left:0}
.br-h::after,.dg-wire::after{right:0}

/* ---- the gate ---------------------------------------------------------- */
.dg-gate{padding:18px 34px;border-radius:8px;background:rgba(17,52,195,.16);
  border:1px solid rgba(157,173,238,.5);box-shadow:0 0 0 7px rgba(17,52,195,.09);text-align:center}
.dg-gate b{display:block;font:700 18px var(--display);color:#fff}
.dg-gate span{display:block;font:500 15px/1.3 var(--ui);color:#c0caf1;margin-top:2px}

/* ---- tool boxes: a mark, and a face that turns to what the tool may do --- */
/* they turn over on the X axis, as Stripe's app logos do (rotateX, preserve-3d) */
.dg-flip{position:relative;perspective:620px;padding:0;width:158px;height:46px;background:none}
.dg-flip>span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:8px;
  padding:0 12px;border-radius:6px;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden}
.fx-f{background:var(--blue);color:#fff;font:600 14px var(--ui);transform:rotateX(0deg)}
.fx-b{background:#132674;border:1px solid rgba(157,173,238,.42);color:#d2d8f2;
  font:500 15px/1.2 var(--ui);text-align:center;transform:rotateX(180deg);   /* 12px on screen under .dg zoom .8 */
  white-space:normal;overflow-wrap:anywhere;padding:0 6px}   /* .dg-box's nowrap would push long lines past the edge */
.bm{flex:0 0 auto;width:19px;height:19px;border-radius:5px;background:#fff;display:grid;place-items:center}
.bm img{width:12px;height:12px;display:block}

/* ---- Stripe's own mechanics, from its developer-systems-animation code ---- */
/* 1. an empty slot fills: the dashed border fades while a label pops in from
   .75 scale. Here it cycles two tools the Office really connects (motion.css). */
.dg-slot{position:relative;width:158px;height:46px;padding:0;min-width:0}
.dg-fill{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:8px;border-radius:6px;
  background:var(--blue);color:#fff;font:600 14px var(--ui);opacity:0}
/* 2. the hub's travelling border: a turning conic sweep behind a mask 1.5px in,
   so only a ring of it shows. Off at rest; motion.css lights it on each connect */
.dg-hub{position:relative;overflow:hidden}
.dg-hub img{position:relative;z-index:1}
.dg-glow{position:absolute;inset:0;display:grid;place-items:center;border-radius:inherit;overflow:hidden;opacity:0;pointer-events:none}
.dg-glow i{display:block;width:300px;height:300px;
  background:conic-gradient(from 0deg,transparent 0 55%,rgba(86,114,226,.9) 72%,#d1d9fb 80%,rgba(56,86,204,.9) 88%,transparent 100%)}
.dg-glow::after{content:"";position:absolute;inset:1.5px;border-radius:calc(var(--r) - 1.5px);background:linear-gradient(135deg,#2b4cd1 0,#1a349d 45%,#11205c 100%)}

/* ---- the actions that leave, inside a dashed enclosure ----------------- */
.dg-acts{display:flex;gap:11px;padding:16px;border-radius:8px;
  border:1.5px dashed rgba(255,255,255,.18);flex-wrap:wrap;justify-content:center}

/* ---- SCALE: hold every seat to a standard ------------------------------- */
/* After Stripe's "Scale with confidence", which sits under its systems diagram
   in the same dark band. Its numbers are gradient text (background-clip:text),
   which Webflow's "clip background to text" does natively; its wave is a
   three.js canvas; here LUMINOUS TIDE, a 2D canvas drawn by the page script. */
.sc{position:relative;margin-top:44px;padding-top:48px}
.sc-div{position:absolute;left:0;right:0;top:0;display:block;height:1px;
  background:linear-gradient(90deg,transparent,rgba(157,173,238,.35) 20%,rgba(157,173,238,.35) 80%,transparent)}
.sc-say{position:relative;z-index:2;max-width:680px;margin:0;font:500 30px/1.3 var(--display);color:#95a2d7;letter-spacing:-.01em}
.sc-say b{font-weight:600;color:#fff}
/* the tide band under the numbers; the negative margin cancels .flow's bottom padding so
   the lattice runs off the section's bottom edge */
.sc-burst{position:relative;height:420px;margin:16px 0 -96px;pointer-events:none}
/* LUMINOUS TIDE: the canvas spans the full window width; the glow stays as the no-JS art */
.sc-burst .sc-glow{position:absolute;display:block;bottom:0;left:-420px;right:-420px;height:100%;
  background:radial-gradient(900px 100% at 50% 100%,rgba(86,114,226,.28),rgba(86,114,226,.06) 55%,transparent 78%)}   /* height follows the band, so it fades out before the top at every size */
.sc-canvas{position:absolute;left:50%;bottom:0;display:block;width:100vw;height:100%;transform:translateX(-50%);pointer-events:auto}   /* receives the hover; nothing clickable sits under it */
.sc-nums{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;margin-top:44px}
.sc-n b{display:block;font:500 64px/1.15 var(--display);letter-spacing:-.03em;color:transparent;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.sc-g1{background-image:linear-gradient(68deg,rgba(108,131,224,.8),#a5b4ed 35%,#e8ecfd 85%)}
.sc-g2{background-image:linear-gradient(73deg,#d1d9fb 10%,#5672e2 75%)}
.sc-g3{background-image:linear-gradient(75deg,#e8ecfd 0,#5672e2 45%,#294ace 95%)}
.sc-n span{display:block;margin-top:14px;max-width:26ch;font-size:16px;line-height:1.45;color:#e5e9f9}
.sc-foot{position:relative;z-index:2;margin:34px 0 0;font-size:13px;color:#8594ce}

/* ---- breakpoints (Webflow's only: 991 / 767 / 479) --------------------- */
@media (max-width:991px){
  .sc-say{font-size:26px}
  .sc-burst{height:336px}
  .sc-nums{margin-top:48px}
  .sc-n b{font-size:52px}
  .dg-box{height:38px;padding:0 13px;font-size:13px}
  .dg-ghost{min-width:58px}
  .dg-bridge{width:100%;height:146px}
  .br-box{width:124px}
  .br-up.br-l,.br-dn.br-l{left:62px}
  .br-up.br-r,.br-dn.br-r{right:62px}
  .br-h{left:62px;right:62px}
  .dg-panel{width:158px}
  .dg-hub{width:96px}
  .dg-flip,.dg-slot{width:132px;height:42px}
  .dg-fill{font-size:12.5px}
  .fx-f{font-size:12.5px}
  .dg-mid>.dg-box{width:124px}
  .dg-hub{height:96px}
  .dg-mid::before,.dg-mid::after{height:calc(50% - 48px)}
  .dg-hub img{width:72px;height:auto}
  .dg-seats{grid-template-columns:repeat(3,34px)}
  .dg-seats i{width:34px;height:34px}
}
@media (max-width:767px){
  .sc{margin-top:56px;padding-top:48px}
  .sc-say{font-size:22px}
  .sc-burst{height:252px}
  .sc-nums{grid-template-columns:1fr;gap:24px;margin-top:40px}
  .sc-n b{font-size:46px}
  .dg{zoom:1}
  /* everything stacks, so the horizontal run becomes a vertical one */
  .dg-group{flex-wrap:wrap;justify-content:center}
  .dg-bridge{height:auto;display:flex;flex-direction:column;align-items:center;gap:12px;padding:14px 0}
  .br-up,.br-dn,.br-h,.br-c{display:none}
  .br-box{position:static}
  .dg-mid{flex-direction:column}
  .dg-mid::before,.dg-mid::after{display:none}
  .dg-panel{width:100%;max-width:280px}
  .dg-hub{width:96px}
  .dg-wire{width:1px;height:26px;flex:0 0 26px;min-width:0;
    background-image:repeating-linear-gradient(180deg,rgba(157,173,238,.62) 0 2px,transparent 2px 6px);
    background-size:1px 6px}
  .dg-acts{padding:12px}
  .dg-acts .dg-ghost{display:none}
}
@media (max-width:479px){
  .sc-say{font-size:19px}
  .sc-burst{height:182px}
  .sc-nums{margin-top:48px}
}