/* Solutions pages, background pass (Mehul 2026-10-30), from a measured walkthrough of stripe.com/payments and
   /use-cases/saas. Scoped to main.so-v2. Baseball first; the other sport pages take the same class.

   1  One measure. Stripe lays every section on a 1080px container at 1440 wide; ours ran to 1300. The homepage
      already uses 1180, so the solutions pages do too.
   2  Guides. Four hairline columns (rgba(66,71,112,.07)) behind the two card grids, fading at the band edges.
   3  Strict rhythm. Bands alternate white / #f6f9fc (class sv-t marks the pale ones), no borders between them;
      colour change alone separates sections. The lavender band is gone.
   4  Two angles only. The hero's pale sheet ends on a 6deg diagonal with a brand ribbon under it; the navy band
      starts on the same diagonal. Everything else is flat.
   5  One dark band, with content: the three numbers from the lineup calculator in hairline cells.
   6  Palette discipline. Card art drops its orange/blue/lavender washes and dot grids for the pale with one soft
      teal wash per card, in a different corner each. Colour comes from the UI.
   7  Tokens. One border grey, one radius (8px), one frame shadow, one body grey. */

.so-v2{--sv-ink:#0d1b2a; --sv-text:#41505d; --sv-muted:#62707c; --sv-line:#e3e9ee; --sv-tint:#f6f9fc; --sv-teal:#007a76;
  --sv-guide:rgba(66,71,112,.07);
  --sv-shadow:0 0 0 1px rgba(13,27,42,.06), 0 13px 27px -5px rgba(50,50,93,.16), 0 8px 16px -8px rgba(0,0,0,.14);
  --sv-shadow-lg:0 0 0 1px rgba(13,27,42,.06), 0 30px 60px -12px rgba(50,50,93,.22), 0 18px 36px -18px rgba(0,0,0,.22);}

/* ---- 1 measure ---- */
.so-v2 .pc-wrap{max-width:calc(1180px + 2 * var(--pc-gutter));}

/* ---- 2 guides: only behind the two card grids (Mehul 2026-10-30: not behind text) ---- */
.so-v2 > section{position:relative; isolation:isolate;}
.so-v2 .so-px::before, .so-v2 .so-fx::before{content:""; position:absolute; z-index:-1; top:0; bottom:0; left:50%; width:min(1180px, calc(100% - 2 * var(--pc-gutter)));
  transform:translateX(-50%); pointer-events:none; border-right:1px solid var(--sv-guide);
  background:repeating-linear-gradient(90deg, var(--sv-guide) 0 1px, transparent 1px 25%);
  -webkit-mask-image:linear-gradient(180deg, transparent, #000 140px, #000 calc(100% - 140px), transparent);
          mask-image:linear-gradient(180deg, transparent, #000 140px, #000 calc(100% - 140px), transparent);}

/* ---- 3 rhythm: white / pale alternation. Which bands are pale is marked in the page (class sv-t), because the
   sport pages differ in which sections they carry; nothing has borders between bands ---- */
.so-v2 .so-sec{padding:clamp(80px,10vw,128px) 0; background:#fff; border-top:0; border-bottom:0;}
.so-v2 .so-sec.sv-t{background:var(--sv-tint);}
.so-v2 .so-sec.bb-mk, .so-v2 .so-sec.bb-lu{background:#fff;}            /* the story stylesheet tints these lavender */
.so-v2 .so-sec.bb-mk.sv-t, .so-v2 .so-sec.bb-lu.sv-t{background:var(--sv-tint);}
.so-v2 .px-hero3{background:#fff;}                 /* below the hero's diagonal the page is white */
.so-v2 .so-px{background:#fff;}
.so-v2 .so-vid{padding-bottom:clamp(80px,10vw,128px);}
.so-v2 .so-others{background:var(--sv-tint); border-top:0; border-bottom:0;}
.so-v2 .pc-cta{background:#fff;}
.so-v2 .pc-cta::before{display:none;}

/* ---- 4 the hero: the wall of product cards, drawn flat (Mehul 2026-10-30: the wall was better, make it sharp).
   The old wall was turned in 3D with perspective, so the browser rasterised each card and warped it, and the type went
   soft. This one uses 2D transforms only: the wall tilts 5deg, the rows are staggered, and the drift is a plain translate,
   so every card is drawn straight at device resolution. The wall fades out under the title and above the diagonal; the
   pale sheet ends on a 6deg diagonal with the brand ribbon under it, the same line the navy band starts on. ---- */
.so-v2 .so-hero3{min-height:0; align-items:flex-end; overflow:hidden; background:#f6f9fc; border-bottom:1px solid #e6ebf1;}  /* as tall as the wall and the copy need, no more; a pale ground and a hairline set it apart from the white section below */
.so-v2 .so-hero3 .px-stage{position:absolute; inset:0 0 14% 0; z-index:-1; perspective:none; perspective-origin:50% 50%; overflow:hidden;
  /* fades to nothing on the left and well above the title, so the words sit on calm sheet, as in the old hero */
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, rgba(0,0,0,.45) 24%, #000 46%), linear-gradient(180deg, #000 28%, rgba(0,0,0,.45) 43%, transparent 55%);
          mask-image:linear-gradient(90deg, transparent 0%, rgba(0,0,0,.45) 24%, #000 46%), linear-gradient(180deg, #000 28%, rgba(0,0,0,.45) 43%, transparent 55%);
  -webkit-mask-composite:source-in; mask-composite:intersect;}
.so-v2 .so-hero3 .px-wall{left:-6%; top:-8%; width:140%; gap:16px; transform:rotate(-5deg); transform-origin:50% 50%;}
.so-v2 .so-hero3 .px-wrow.r1{margin-left:-140px;} .so-v2 .so-hero3 .px-wrow.r2{margin-left:-60px;}
/* same drift and speed as the other heroes, the other way round (Mehul 2026-10-30) */
.so-v2 .so-hero3 .px-wrow{animation-direction:reverse;} .so-v2 .so-hero3 .px-wrow.r1{animation-direction:normal;}
.so-v2 .so-hero3 .px-w{border-radius:8px; box-shadow:var(--sv-shadow); -webkit-font-smoothing:antialiased;}
.so-v2 .so-hero3 .px-w.ui{font-size:12px;}
.so-v2 .so-hero3 .px-w-h > b{font-size:13.5px;} .so-v2 .so-hero3 .px-w-h small{font-size:11.5px;}
.so-v2 .so-hero3 .px-w-c small, .so-v2 .so-hero3 .px-w-f small{font-size:11px;}
.so-v2 .so-hero3 .px-w.ph span{font-size:11.5px;}
/* the pale sheet and its ribbon, under everything */
.so-v2 .so-hero3 .px-glow{inset:auto 0 0 0; top:-60%; z-index:-2; background:var(--sv-tint); transform:skewY(-6deg); transform-origin:0 0; -webkit-mask-image:none; mask-image:none;}
.so-v2 .so-hero3 .px-glow::after{content:""; position:absolute; left:0; right:0; top:100%; height:220px;
  background:linear-gradient(90deg, #007a76 0%, #00a39d 40%, #00bcb7 72%, #a9e7e3 100%);}
.so-v2 .px-hero3-in{padding-top:clamp(200px,24vw,320px); padding-bottom:clamp(40px,4.5vw,64px);}  /* no slanted sheet below any more, so no room kept for it */
.so-v2 .px-h3-copy p{max-width:30em; color:var(--sv-text);}
@media (max-width:960px){
  .so-v2 .so-hero3 .px-stage{inset:0 0 30% 0; -webkit-mask-image:linear-gradient(180deg, #000 40%, transparent 100%); mask-image:linear-gradient(180deg, #000 40%, transparent 100%);}
  .so-v2 .so-hero3 .px-wall{left:-20%; top:-30%; width:220%; transform:rotate(-5deg);}
  .so-v2 .so-hero3 .px-glow{top:-40%;}
  .so-v2 .px-hero3-in{padding-bottom:40px;}
}
@media (prefers-reduced-motion:reduce){ .so-v2 .so-hero3 .px-wrow{animation:none;} }

/* ---- 5 the navy band: the same diagonal on top, three numbers in hairline cells ---- */
.so-v2 .so-band{min-height:0; overflow:hidden; padding:clamp(170px,17vw,240px) 0 clamp(72px,9vw,120px); background:var(--sv-tint); align-items:stretch;}
/* the navy sheet: the band's own ::after (its ::before carries the guides), skewed from its top-right corner so the
   top edge runs low on the left and high on the right, the same line as the hero's */
.so-v2 .so-band::after{content:""; position:absolute; z-index:-1; left:0; right:0; top:0; bottom:-40%; background:#0b1d2a; transform:skewY(-6deg); transform-origin:100% 0;}
.so-v2 .so-band-in{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:48px; align-items:end; padding-bottom:0;}
.so-v2 .so-band-t{font-size:clamp(30px,3.6vw,52px);}
.so-v2 .so-band-t span{max-width:28em;}
.so-v2 .sv-stats{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); margin:0; border-top:1px solid rgba(255,255,255,.16);}
.so-v2 .sv-stats div{padding:22px 20px 0 0;}
.so-v2 .sv-stats div + div{padding-left:20px; border-left:1px solid rgba(255,255,255,.16);}
.so-v2 .sv-stats dt{font-size:13px; font-weight:500; letter-spacing:.01em; color:#9fb6c0;}
.so-v2 .sv-stats dd{margin:6px 0 0; font-size:clamp(32px,3.4vw,46px); font-weight:400; line-height:1; letter-spacing:-.02em; color:#fff;}
.so-v2 .sv-stats dd small{font-size:.5em; color:#9fb6c0; margin-left:2px;}
.so-v2 .sv-stats-note{margin:18px 0 0; font-size:13px; color:#7f98a4;}
@media (max-width:760px){ .so-v2 .so-band-in{grid-template-columns:minmax(0,1fr);} .so-v2 .so-band{padding-top:clamp(120px,22vw,170px);} }

/* ---- 6 the product cards: pale faces, one soft teal wash each, colour from the UI ---- */
.so-v2 .px-card{border:1px solid var(--sv-line); border-radius:8px; box-shadow:none;}
.so-v2 .px-card .px-art{background:var(--sv-tint) !important; border-radius:6px;}
.so-v2 .px-card .px-art::before{display:none !important;}
.so-v2 .px-grid .px-card .px-art::after{content:""; position:absolute; inset:0 !important; z-index:-1; width:auto !important; height:auto !important;
  border-radius:0 !important; transform:none !important; filter:none !important; opacity:1 !important;
  background:radial-gradient(55% 55% at var(--wx,100%) var(--wy,0%), rgba(0,122,118,.11), transparent 70%) !important;}
.so-v2 .px-card:nth-child(6n+1) .px-art::after{--wx:100%; --wy:0%;}
.so-v2 .px-card:nth-child(6n+2) .px-art::after{--wx:0%; --wy:100%;}
.so-v2 .px-card:nth-child(6n+3) .px-art::after{--wx:100%; --wy:100%;}
.so-v2 .px-card:nth-child(6n+4) .px-art::after{--wx:0%; --wy:0%;}
.so-v2 .px-card:nth-child(6n+5) .px-art::after{--wx:50%; --wy:100%;}
.so-v2 .px-card:nth-child(6n+6) .px-art::after{--wx:100%; --wy:50%;}

/* ---- 6b the Recruiting card: Stripe's particle ring (scripts/page-dots.js) in place of the speckle picture.
   The canvas covers the whole card and sits under the UI, as theirs does; a faint teal wash under it, as their pink. ---- */
.so-v2 .px-grid .px-recruit{position:relative; overflow:hidden; isolation:isolate;}
.so-v2 .px-grid .px-recruit .px-art::after{display:none !important;}
.so-v2 .px-grid .px-recruit .px-art{background:transparent !important; overflow:visible;}
.so-v2 .px-grid .px-recruit > .px-card-t, .so-v2 .px-grid .px-recruit > .px-art{position:relative; z-index:1;}
.so-v2 .px-dots{position:absolute; inset:0; z-index:0; pointer-events:none;}
.so-v2 .px-grid .px-recruit::before{content:""; position:absolute; inset:0; z-index:0; background:radial-gradient(42% 40% at 50% 62%, rgba(20,163,155,.08), transparent 70%); pointer-events:none;}

/* ---- 6c two more card backgrounds from stripe.com's home page, measured (2026-10-30) ----
   Website & Registration: the "Embed payments" ribbon of hairline curves (images/art/px-ribbon.svg, tools/art_ribbon.py)
   sweeping lower-left to upper-right behind the UI, in teal into blue.
   Payments & Back Office: the "Enable any billing model" glow: two radial-gradient ellipses at the foot of the art, each
   border-radius 100%, filter blur(10px), scale(2), opacity .85, colour stopping hard at 62.5% and 54% then fading, the
   lower one larger; Stripe's purple and pink become our teal and blue, lighter, because our art is a third their height. */
.so-v2 .px-grid .px-site .px-art::after{display:block !important; content:""; position:absolute; inset:0 !important; z-index:-1; clip-path:none !important;
  background:url(/images/art/px-ribbon.svg) center / cover no-repeat !important;}
.so-v2 .px-grid .px-money .px-art{overflow:hidden;}
.so-v2 .px-grid .px-money .px-art::before, .so-v2 .px-grid .px-money .px-art::after{content:""; display:block !important; position:absolute; z-index:-1; left:50%; border-radius:100% !important;
  filter:blur(10px) !important; transform:translate3d(-50%,0,0) scale(2) !important; opacity:.85 !important; -webkit-mask-image:none !important; mask-image:none !important; clip-path:none !important; inset:auto !important; height:auto !important;}
.so-v2 .px-grid .px-money .px-art::before{bottom:-70% !important; width:62% !important; aspect-ratio:672/431;
  background:radial-gradient(50% 50% at 50% 50%, rgba(0,122,118,.26) 62.5%, rgba(0,122,118,0) 100%) !important;}
.so-v2 .px-grid .px-money .px-art::after{bottom:-52% !important; width:70% !important; aspect-ratio:685/407;
  background:radial-gradient(50% 50% at 50% 50%, rgba(47,127,214,.2) 53.85%, rgba(47,127,214,0) 100%) !important;}
.so-v2 .px-grid .px-money .px-pay{background:#fff; box-shadow:0 0 0 1px rgba(13,27,42,.06), 0 10px 24px -14px rgba(13,40,60,.25) !important;}

/* ---- 6d the border light (scripts/page-card-light.js), as on Stripe's cards: a radial gradient that sits at the pointer,
   shown only in a 1px ring at the card's edge (a masked overlay; the card's own border goes transparent so the ring
   is the border), fading in over 250ms ---- */
@property --sv-lo{syntax:'<number>'; inherits:false; initial-value:0;}
.so-v2 .px-grid .px-card{border-color:transparent;}
.so-v2 .px-grid .px-card:hover{border-color:transparent;}
.so-v2 .px-grid .px-card::after{content:""; position:absolute; inset:0; z-index:3; padding:1px; border-radius:inherit; pointer-events:none; --sv-lo:0; transition:--sv-lo .25s linear;
  background:radial-gradient(circle 150px at var(--mx, 50%) var(--my, 50%), rgba(0,163,155,calc(.95 * var(--sv-lo))), rgba(47,127,214,calc(.8 * var(--sv-lo))) 40%, rgba(47,127,214,0) 72%), var(--sv-line);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);}
.so-v2 .px-grid .px-card:hover::after{--sv-lo:1;}
@media (pointer:coarse){ .so-v2 .px-grid .px-card::after{--sv-lo:0;} }
@media (prefers-reduced-motion:reduce){ .so-v2 .px-grid .px-card::after{transition:none;} }

/* ---- 6e section headings, smaller (Mehul 2026-10-30: too big, two lines at most). Stripe's section titles are
   28-34px at weight 500; the narrow-column ones (Lineups, Marketing) were running to three lines at 34px. ---- */
.so-v2 .so-sec .pc-sh, .so-v2 .so-px .pc-sh{font-size:clamp(23px,2.05vw,29px); line-height:1.2; letter-spacing:-.018em;}
@media (max-width:640px){ .so-v2 .so-sec .pc-sh, .so-v2 .so-px .pc-sh{font-size:21px;} }

/* ---- 7 tokens: one grey for copy, one radius and shadow for frames, one border for cards ---- */
.so-v2 .px-h3-copy p, .so-v2 .px-card-t p, .so-v2 .bb-lede, .so-v2 .bb-step p, .so-v2 .bb-mk p, .so-v2 .so-faq p, .so-v2 .fx-c p, .so-v2 .pc-cta p{color:var(--sv-text);}
.so-v2 .bb-ui, .so-v2 .so-vid-frame, .so-v2 .pk-site, .so-v2 .pc-browser, .so-v2 .bb-calc, .so-v2 .bb-vs{border-radius:8px;}
.so-v2 .bb-ui, .so-v2 .so-vid-frame, .so-v2 .pk-site, .so-v2 .pc-browser{box-shadow:var(--sv-shadow);}
.so-v2 .fx-c a{border-color:var(--sv-line); border-radius:8px;}
.so-v2 .fx-back svg{stroke:#c9d9df;}

/* no slanted sheet and no teal ribbon at the hero foot (Mehul 2026-10-30): the hero ends on a straight edge */
.so-v2 .so-hero3 .px-glow{display:none;}

/* the copy starts just under the card wall at every width (the wall is a fixed drawing, so its depth is known):
   no fixed hero height, so no empty band on tall screens and no overlap on short ones */
@media (max-width:1100px){ .so-v2 .px-hero3-in{padding-top:410px;} }
@media (max-width:760px){ .so-v2 .px-hero3-in{padding-top:395px;} }

/* the video at a comfortable size on desktop (Mehul 2026-10-31: "too big"): 860px wide, centred under its heading */
.so-v2 .so-vid-frame{max-width:860px; margin-left:auto; margin-right:auto;}
@media (min-width:900px){ .so-v2 .so-vid .pc-sh{text-align:center; max-width:860px; margin-left:auto; margin-right:auto;} }

/* How to get started (2026-10-31): two cards, three numbered steps each, buttons on one line at the foot */
.so-v2 .ss-ways{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:repeat(4,auto); column-gap:20px; margin-top:clamp(28px,3.4vw,40px);}
.so-v2 .ss-way{display:grid; grid-row:span 4; grid-template-rows:subgrid; row-gap:0; padding:26px 28px 22px; border-radius:12px; background:#fff; border:1px solid #e3e9ee; box-shadow:0 1px 2px rgba(13,27,42,.04);}
.so-v2 .ss-tag{margin:0 0 8px; font-size:12px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:#00605d;}
.so-v2 .ss-team .ss-tag{color:#62707c;}
.so-v2 .ss-way h3{margin:0; font-size:21px; font-weight:700; letter-spacing:-.015em; color:#0d1b2a;}
.so-v2 .ss-steps{margin:18px 0 0; padding:0; list-style:none;}
.so-v2 .ss-steps li{display:flex; align-items:center; gap:12px; padding:9px 0; border-top:1px solid #edf1f4; font-size:15px; color:#22313d;}
.so-v2 .ss-steps span{flex:none; display:grid; place-items:center; width:24px; height:24px; border-radius:50%; background:#e6f6f5; color:#00605d; font-size:12px; font-weight:800;}
.so-v2 .ss-team .ss-steps span{background:#eef1f4; color:#41505d;}
.so-v2 .ss-foot{display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; align-self:end; margin-top:18px; padding-top:16px; border-top:1px solid #edf1f4;}
.so-v2 .ss-foot .pc-btn{height:40px; padding:0 18px; font-size:14px;}
.so-v2 .ss-foot small{font-size:13px; font-weight:600; color:#62707c;}
.so-v2 .ss-more{margin-top:20px; font-size:15px;}
@media (max-width:760px){ .so-v2 .ss-ways{grid-template-columns:minmax(0,1fr); grid-template-rows:none; row-gap:14px;} .so-v2 .ss-way{grid-row:auto; grid-template-rows:none; padding:22px 20px 18px;} }