/* =====================================================================
   PAYMENTS & BACK OFFICE (SC-534): ported from Luke's vision file (payments-showcase.css, plus the FAQ accordion, .em-inc
   columns and .rs-checks it borrows), brand teal, corrected to what the product does. Motion: scripts/page-payments-and-back-office.js.
   ===================================================================== */
/* ---- shared mock pieces: the SideCoach checkout ---- */
  .py-h{display:flex; align-items:center; gap:9px;}
  .py-h span{display:flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:50%; background:#14473a; color:#fff; font-size:10.5px; font-weight:800;}
  .py-h b{font-family:'Anton',Impact,sans-serif; font-weight:400; font-size:19px; letter-spacing:.2px; text-transform:uppercase; color:#14473a;}
  .py-sub{margin:4px 0 12px 31px; font-size:11px; line-height:1.45; color:#3b4a57;}
  .py-f{display:block; margin-bottom:10px; min-width:0;}
  .py-f small{display:block; margin-bottom:4px; font-size:10.5px; font-weight:700; color:#0b1a24;}
  .py-f i{display:block; padding:8px 10px; border:1px solid #cfd6dc; border-radius:5px; background:#fff; font-style:normal; font-size:11.5px; color:#0b1a24;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  .py-f.on i{border-color:#14473a; box-shadow:0 0 0 3px rgba(20,71,58,.12);}
  .py-f.ok i{border-color:#9fd8b8;}
  .py-g2{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
  .py-k{display:block; margin:12px 0 6px; font-size:9.5px; font-weight:800; letter-spacing:1.2px; text-transform:uppercase; color:#5b6b78;}
  .py-l{display:flex; justify-content:space-between; gap:10px; padding:5px 0; font-size:12px; color:#0b1a24;}
  .py-l b{font-weight:800;}
  .py-l.mut span{font-size:10.5px; font-weight:800; letter-spacing:1px; text-transform:uppercase; color:#5b6b78;}
  .py-l.g b{color:#127c4c;}
  .py-total{display:flex; justify-content:space-between; align-items:baseline; margin-top:10px; padding-top:12px; border-top:2px solid #14473a;}
  .py-total span{font-size:10.5px; font-weight:800; letter-spacing:1px; text-transform:uppercase; color:#5b6b78;}
  .py-total b{font-size:22px; font-weight:800; color:#14473a; font-variant-numeric:tabular-nums;}
  .py-total.sm b{font-size:16px;}
  .py-camp{display:flex; align-items:center; gap:10px; padding-bottom:12px; border-bottom:1px solid #eef1f3; margin-bottom:8px;}
  .py-camp img{width:44px; height:44px; object-fit:cover; border-radius:4px;}
  .py-camp b{display:block; font-size:12.5px; font-weight:800; color:#14473a;}
  .py-camp small{display:block; font-size:10px; color:#5b6b78;}
  .py-camp.lg img{width:56px; height:56px;}
  .py-camp.lg b{font-size:14.5px;}
  .py-verified{display:inline-flex; align-items:center; gap:5px; margin:2px 0 4px; padding:5px 11px; border-radius:100px; background:#e7f6ee; color:#127c4c; font-size:11px; font-weight:800;}
  .py-verified svg{width:11px; height:11px;}
  .py-wallets{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:10px;}
  .py-wallets span{display:flex; align-items:center; justify-content:center; gap:3px; height:34px; border-radius:5px; font-size:13px; font-weight:600;}
  .py-wallets svg{width:14px; height:14px;}
  .py-wallets .ap{background:#000; color:#fff;}
  .py-wallets .gp{background:#fff; border:1px solid #cfd6dc; color:#3c4043;}
  .py-wallets.lg span{height:40px; font-size:15px;}
  .py-wallets.lg svg{width:16px; height:16px;}
  .py-pay{display:block; margin-top:12px; padding:10px; border-radius:100px; background:#14473a; color:#fff; text-align:center; font-size:12px; font-weight:800;}

/* ---- hero ---- */
  .pyh{position:relative;}
  /* The hero checkout flies down into section 1 on scroll, so the hero lets it out and sits above the next section */
  .pc-hero.pc-hero-payments{overflow:visible; overflow-x:clip; z-index:5;}
  @media (min-width:961px){ .pyh{transform-origin:0 0; will-change:transform,opacity;} .py-s1 .pc-sh{max-width:500px;} }
  /* Desktop: like Stripe, the checkout sits low and to the right and drops past the bottom of the hero */
  @media (min-width:961px){ .pyh{width:calc(100% + 150px); margin-left:-30px; top:80px;} }
  /* On desktop the hero checkout is drawn larger than the copies further down the page (Stripe-sized) */
  @media (min-width:961px){
    .pyh .py-co{gap:18px; padding:22px; grid-template-columns:minmax(0,1.22fr) minmax(0,1fr);} .pyh .py-co-l,.pyh .py-co-r{padding:28px 26px;}
    .pyh .py-h span{width:30px; height:30px; font-size:13px;} .pyh .py-h b{font-size:29px;}
    .pyh .py-sub{margin:6px 0 16px 39px; font-size:14.5px;} .pyh .py-f{margin-bottom:14px;} .pyh .py-f small{font-size:13px; margin-bottom:6px;}
    .pyh .py-f i{padding:14px 14px; font-size:15px;} .pyh .py-g2{gap:12px;}
    .pyh .py-verified{font-size:13.5px; padding:7px 14px;} .pyh .py-wallets{gap:10px; margin-top:14px;} .pyh .py-wallets span{height:50px; font-size:17px;} .pyh .py-wallets svg{width:18px; height:18px;}
    .pyh .py-co-l .py-h:not(:first-child){margin-top:16px; padding-top:16px;}
    .pyh .py-k{font-size:12px; margin-top:4px;} .pyh .py-camp{gap:12px; padding-bottom:16px; margin-bottom:12px;} .pyh .py-camp img{width:56px; height:56px;}
    .pyh .py-camp b{font-size:17px;} .pyh .py-camp small{font-size:12.5px;}
    .pyh .py-l{font-size:15.5px; padding:9px 0;} .pyh .py-l.mut span{font-size:12.5px;} .pyh .py-total{margin-top:14px; padding-top:16px;} .pyh .py-total b{font-size:34px;} .pyh .py-total span{font-size:13px;}
    .pyh .py-pay{margin-top:18px; padding:16px; font-size:16px;} .pyh .py-chrome{padding:11px 14px;} .pyh .py-chrome > i{width:9px; height:9px;} .pyh .py-chrome span{font-size:12px; padding:6px 18px;}
  }
  .py-browser{background:#f4f4f2; border:1px solid #cfd8de; border-radius:8px; overflow:hidden; box-shadow:0 30px 60px rgba(11,26,36,.16);}
  .py-chrome{display:flex; align-items:center; gap:5px; padding:8px 10px; border-bottom:1px solid #dde3e8; background:#fff;}
  .py-chrome > i{width:7px; height:7px; border-radius:50%; background:#d5dce1;}
  .py-chrome span{display:inline-flex; align-items:center; gap:5px; margin:0 auto; padding:4px 14px; border-radius:100px; background:#f3f6f8; font-size:9.5px; color:#5b6b78;}
  .py-chrome span svg{width:10px; height:10px; color:#127c4c;}
  .py-co{display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:12px; padding:14px;}
  .py-co-l,.py-co-r{padding:16px; background:#fff; border:1px solid #e6e6e2; border-radius:8px;}
  .py-co-l .py-h + .py-sub + .py-g2{margin-top:2px;}
  .py-co-l .py-h:not(:first-child){margin-top:12px; padding-top:12px; border-top:1px solid #eef1f3;}
  .pb-fly.is-in .py-browser{animation:ppRise .95s cubic-bezier(.2,.8,.2,1) .1s both;}
  @media (prefers-reduced-motion:reduce){ .pb-fly.is-in .py-browser{animation:none;} }
  @media (max-width:620px){
    .py-co{grid-template-columns:1fr;} .py-co-l{display:none;}
  }

/* ---- 1. checkout: copy scrolls past a pinned card ---- */
  .py-s1{background:#fff; overflow:clip;}
  .py-scroll{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(36px,6vw,88px); margin-top:24px;}
  .py-step{display:flex; flex-direction:column; justify-content:center; min-height:56vh; padding:32px 0; opacity:.35; transition:opacity .5s ease;}
  .py-step.on{opacity:1;}
  .py-eye{font-size:16px; font-weight:800; color:#00726f;}
  .py-step h3{margin-top:12px; font-size:clamp(26px,2.6vw,36px); font-weight:700; line-height:1.18; letter-spacing:-.02em; color:#0b1a24;}
  .py-step p{margin-top:16px; max-width:470px; font-size:17px; line-height:1.65; color:#425466;}
  .py-step .rs-checks{margin-top:22px;}
  .py-step .rs-checks li{font-size:15px;}
  .py-mob{display:none;}
  .py-pin{position:relative;}
  /* Height follows the step on show (set in payments-showcase.js), so the card never has empty space at the bottom */
  .py-card{position:sticky; top:calc(50vh - 230px); height:480px; padding:28px 30px; background:#fff; border-radius:10px; overflow:hidden;
    transition:height .55s cubic-bezier(.2,.8,.2,1);
    box-shadow:0 2px 5px -1px rgba(11,26,36,.1), 0 40px 80px -20px rgba(11,26,36,.25), 0 0 0 1px rgba(11,26,36,.05);}
  .py-pin .py-card{margin-top:12vh;}
  .py-pane{position:absolute; left:30px; right:30px; top:28px; opacity:0; transform:translateY(10px); transition:opacity .35s ease, transform .5s ease; pointer-events:none;}
  .py-pane.on{opacity:1; transform:none; transition:opacity .55s ease .12s, transform .7s cubic-bezier(.2,.8,.2,1) .12s;}
  .py-mob .py-pane{position:static; opacity:1; transform:none;}
  .py-dots{position:absolute; left:30px; bottom:20px; display:flex; gap:6px;}
  .py-dots i{width:18px; height:4px; border-radius:100px; background:#e3e8ec; transition:background .4s, width .4s;}
  .py-dots i.on{width:30px; background:#007a76;}
  .py-pane-h{display:flex; justify-content:space-between; align-items:baseline;}
  .py-pane-h .py-k{margin-top:0;}
  .py-pane-h em{font-style:normal; font-size:11px; font-weight:700; color:#00726f;}
  .py-by{display:block; margin:-2px 0 4px; font-size:10.5px; color:#5b6b78;}
  .py-promo{display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; padding:8px 10px; border:1px solid #9fd8b8; border-radius:6px; background:#f3fbf6;
    font-size:12px; font-weight:800; letter-spacing:.5px; color:#0b1a24;}
  .py-promo em{display:inline-flex; align-items:center; gap:4px; font-style:normal; font-size:10.5px; letter-spacing:0; color:#127c4c;}
  .py-promo em svg{width:10px; height:10px;}
  .py-pol{display:block; margin-top:12px; font-size:11px; color:#5b6b78;}
  .py-note{display:flex; align-items:center; gap:8px; margin-bottom:12px; padding:9px 12px; border-left:3px solid #14473a; border-radius:4px; background:#f1f2f0; font-size:11px; color:#0b1a24;}
  .py-note svg{flex:0 0 14px; width:14px; height:14px; color:#2f5be0;}
  .py-digits{display:grid; grid-template-columns:repeat(6,1fr); gap:8px;}
  .py-digits i{display:flex; align-items:center; justify-content:center; height:44px; border:1px solid #cfd6dc; border-radius:7px; font-style:normal; font-size:19px; font-weight:800;
    color:#0b1a24; opacity:0; transform:translateY(4px);}
  .py-pane.on .py-digits i{animation:pyDigit .35s ease forwards; animation-delay:calc(.4s + var(--d) * .16s);}
  @keyframes pyDigit{to{opacity:1; transform:none; border-color:#14473a;}}
  .py-verified.late{margin-top:14px; opacity:0;}
  .py-pane.on .py-verified.late{animation:pyShow .4s ease 1.5s forwards;}
  @keyframes pyShow{to{opacity:1;}}
  .py-or{display:flex; align-items:center; gap:10px; margin:14px 0 2px; font-size:11px; color:#62707c;}
  .py-or::before,.py-or::after{content:""; flex:1; height:1px; background:#e3e8ec;}
  .py-cardin{margin-bottom:10px; border:1px solid #cfd6dc; border-radius:6px; overflow:hidden;}
  .py-num{display:flex; align-items:center; padding:10px 12px; border-bottom:1px solid #e3e8ec; font-size:13px; color:#0b1a24; letter-spacing:.5px; box-shadow:inset 0 0 0 2px rgba(20,71,58,.0);}
  .py-pane.on .py-num{box-shadow:inset 0 0 0 1.5px #14473a;}
  .py-caret{display:inline-block; width:1.5px; height:14px; margin-left:1px; background:#0b1a24; animation:pyBlink 1s steps(1) infinite;}
  @keyframes pyBlink{50%{opacity:0;}}
  .py-brand{margin-left:auto; padding:2px 6px; border-radius:3px; background:#1a1f71; color:#fff; font-style:italic; font-size:10px; font-weight:900; letter-spacing:.5px;
    opacity:0; transform:scale(.7); transition:opacity .25s, transform .3s cubic-bezier(.2,.9,.3,1.4);}
  .branded .py-brand,.py-mob .py-brand{opacity:1; transform:none;}
  .py-g2.tight{gap:0;}
  .py-g2.tight span{padding:10px 12px; font-size:12.5px; color:#0b1a24;}
  .py-g2.tight span + span{border-left:1px solid #e3e8ec;}
  .py-paybtn{display:block; margin-top:4px; padding:12px; border-radius:7px; background:#14473a; color:#fff; text-align:center; font-size:13.5px; font-weight:800;}
  .py-stripe{display:flex; align-items:center; justify-content:center; gap:5px; margin-top:10px; font-size:10.5px; color:#62707c;}
  .py-stripe svg{width:11px; height:11px;}
  .py-items{margin-top:10px; border:1px solid #e6ebef; border-radius:8px; overflow:hidden;}
  .py-items > div{display:grid; grid-template-columns:1fr auto 56px; gap:10px; align-items:center; padding:10px 12px; font-size:12px; color:#0b1a24;}
  .py-items > div + div{border-top:1px solid #f0f2f4;}
  .py-items b{font-weight:800;}
  .py-items span b{display:block; font-size:12.5px;}
  .py-items small{display:block; font-size:10.5px; color:#5b6b78;}
  .py-items em{justify-self:end; padding:2px 8px; border-radius:100px; background:#fff4dc; color:#9d6000; font-style:normal; font-size:10.5px; font-weight:800;}
  .py-items em.n{background:#eef1f3; color:#5b6b78;}
  .py-pane.on .py-items em{animation:pyPop .5s cubic-bezier(.2,.9,.3,1.4) both;}
  .py-pane.on .py-items div:nth-child(2) em{animation-delay:.5s;} .py-pane.on .py-items div:nth-child(3) em{animation-delay:.8s;}
  @keyframes pyPop{from{opacity:0; transform:scale(.6);} to{opacity:1; transform:none;}}
  .py-items + .py-l{margin-top:8px;}
  .py-taxl{display:flex; justify-content:space-between; padding:6px 10px; margin:2px -10px 0; border-radius:6px; background:#fff8ec; font-size:12px; font-weight:800; color:#9d6000;}
  .py-taxn{display:block; margin-top:6px; font-size:10.5px; line-height:1.45; color:#5b6b78;}
  .py-rc-top{display:flex; justify-content:space-between; align-items:baseline; padding-bottom:10px; border-bottom:1px solid #eef1f3;}
  .py-rc-top b{font-size:16px; font-weight:800; color:#0b1a24;}
  .py-rc-top small{font-size:10.5px; color:#62707c;}
  .py-rc-on{margin:12px 0 0; font-size:11.5px; line-height:1.5; color:#3b4a57;}
  .py-rc-blk{margin-top:12px; padding:10px 12px; border-radius:7px; background:#f1fbfa; border:1px solid #bfe9e5;}
  .py-rc-blk small{display:block; font-size:9.5px; font-weight:800; letter-spacing:1.1px; text-transform:uppercase; color:#00726f;}
  .py-rc-blk b{display:block; margin-top:2px; font-size:14px; font-weight:800; color:#0b1a24;}
  .py-rc-blk span{display:block; font-size:11px; color:#5b6b78;}
  .py-rc-f{display:flex; flex-direction:column; gap:6px; margin-top:12px; font-size:11px; color:#5b6b78;}
  .py-rc-f span{display:flex; align-items:center; gap:6px;}
  .py-rc-f svg{width:13px; height:13px;}
  @media (max-width:960px){
    .py-scroll{grid-template-columns:1fr;} .py-pin{display:none;}
    .py-step{min-height:0; opacity:1; padding:28px 0;}
    .py-mob{display:block; margin-top:26px;}
    .py-mob .py-card{position:relative; top:auto; height:auto; padding:22px 20px;}
    .py-mob .py-digits i,.py-mob .py-verified.late,.py-mob .py-items em{opacity:1; transform:none; animation:none;}
    .py-mob .py-caret{display:none;}
  }
  @media (prefers-reduced-motion:reduce){
    .py-pane,.py-pane.on,.py-step{transition:none;} .py-digits i,.py-verified.late,.py-items em{opacity:1; transform:none; animation:none !important;} .py-caret{animation:none;}
  }

/* ---- 2. payouts ---- */
  .py-s2{background:#f6f9fa;}
  .py-duo{display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:48px; align-items:start;}
  .py-duo.wide{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);}
  .py-box{padding:24px; background:#fff; border:1px solid #e3e8ec; border-radius:12px; box-shadow:0 1px 2px rgba(11,26,36,.04), 0 24px 50px rgba(11,26,36,.08);}
  .py-box-h{display:flex; justify-content:space-between; align-items:baseline; padding-bottom:14px; margin-bottom:14px; border-bottom:1px solid #eef1f3;}
  .py-box-h b{font-size:17px; font-weight:800; color:#0b1a24;}
  .py-box-h small{font-size:12px; color:#62707c;}
  .py-seg{display:inline-flex; gap:4px;}
  .py-seg i{padding:7px 13px; border-radius:100px; border:1px solid #dfe5e9; background:#fff; font-style:normal; font-size:12px; font-weight:800; color:#0b1a24;}
  .py-seg i.on{background:#007a76; border-color:#007a76; color:#fff;}
  .py-big{margin-top:18px;}
  .py-big small{display:block; font-size:10px; font-weight:800; letter-spacing:1.1px; text-transform:uppercase; color:#62707c;}
  .py-big b{display:block; margin-top:4px; font-size:40px; font-weight:800; letter-spacing:-.02em; color:#0b1a24; line-height:1;}
  .py-split{margin-top:18px; border:1px solid #e6ebef; border-radius:10px; overflow:hidden;}
  .py-split div{display:flex; justify-content:space-between; padding:11px 14px; font-size:13.5px; color:#3b4a57;}
  .py-split div + div{border-top:1px solid #f0f2f4;}
  .py-split b{font-weight:800; color:#0b1a24; font-variant-numeric:tabular-nums;}
  .py-split .tot{background:#f6f9fa;}
  .py-split .tot span{font-weight:800; color:#0b1a24;}
  .py-split .tot b{font-size:16px; color:#00726f;}
  .py-chip{display:inline-flex; align-items:center; gap:6px; margin-top:14px; padding:6px 12px; border-radius:100px; background:#e7f6ee; color:#127c4c; font-size:12px; font-weight:800;}
  .py-chip svg{width:12px; height:12px;}
  .py-fine{display:block; margin-top:12px; font-size:12px; line-height:1.5; color:#5b6b78;}
  .py-acct{display:flex; align-items:center; gap:12px; padding:14px; border:1px solid #e6ebef; border-radius:10px; background:#fafbfc;}
  .py-acct > span:nth-child(2){flex:1; min-width:0;}
  .py-stripe-logo{display:flex; align-items:center; justify-content:center; width:46px; height:46px; border-radius:10px; background:#fff; border:1px solid #e6ebef;
    font-size:14px; font-weight:900; letter-spacing:-.04em; color:#635bff;}
  .py-acct b{display:block; font-size:14px; font-weight:800; color:#0b1a24;}
  .py-acct small{display:block; font-size:11.5px; color:#62707c;}
  .py-acct em{display:inline-flex; align-items:center; gap:5px; padding:4px 10px; border-radius:100px; background:#e7f6ee; border:1px solid #bfe6cf; color:#127c4c;
    font-style:normal; font-size:11px; font-weight:800;}
  .py-acct em i{width:6px; height:6px; border-radius:50%; background:#1f9d57;}
  .py-g2.kv{margin-top:16px;}
  .py-g2.kv small{display:block; font-size:10px; font-weight:800; letter-spacing:1.1px; text-transform:uppercase; color:#62707c;}
  .py-g2.kv b{display:flex; align-items:center; gap:5px; margin-top:4px; font-size:17px; font-weight:800; color:#0b1a24;}
  .py-g2.kv b svg{width:15px; height:15px; color:#00726f;}
  .py-deps > div{display:grid; grid-template-columns:1fr auto 84px; gap:12px; align-items:center; padding:10px 2px; border-bottom:1px solid #f0f2f4; font-size:13px; color:#3b4a57;}
  .py-deps > div:last-child{border-bottom:0;}
  .py-deps span{display:flex; align-items:center; gap:8px;}
  .py-deps span svg{width:14px; height:14px; color:#62707c;}
  .py-deps b{font-weight:800; color:#0b1a24; font-variant-numeric:tabular-nums;}
  .py-deps em{justify-self:end; padding:3px 10px; border-radius:100px; font-style:normal; font-size:11px; font-weight:800;}
  .py-deps em.p{background:#e7f6ee; color:#127c4c;}
  .py-deps em.t{background:#e9f8f6; color:#00726f;}
  .em-inc-grid.py-three{grid-template-columns:repeat(3,minmax(0,1fr)); margin-top:clamp(56px,7vw,80px);}
  @media (max-width:960px){
    .py-duo,.py-duo.wide{grid-template-columns:1fr;}
    .em-inc-grid.py-three{grid-template-columns:1fr; row-gap:36px;} .py-three .em-inc-col{padding-left:0;} .py-three .em-inc-col::before{display:none;}
    .py-three .em-inc-col b::before{left:-14px;}
  }
  @media (max-width:560px){ .py-box{padding:18px 16px;} .py-seg i{padding:6px 9px; font-size:10.5px;} .py-deps > div{grid-template-columns:1fr auto 74px;} }

/* ---- 3. sales tax ---- */
  .py-s3{background:#fff;}
  .py-tax-in{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(36px,6vw,80px); align-items:center; margin-top:48px;}
  .py-pts{display:grid; grid-template-columns:1fr 1fr; gap:34px 32px;}
  .py-num-l{display:block; margin-bottom:12px; font-family:'Anton',Impact,sans-serif; font-size:34px; line-height:1; color:#007a76;}
  .py-pts b{display:block; font-size:16.5px; font-weight:800; color:#0b1a24;}
  .py-pts p{margin-top:8px; font-size:14.5px; line-height:1.6; color:#5b6b78;}
  .py-taxcard{padding:24px; background:#fff; border:1px solid #e3e8ec; border-radius:12px; box-shadow:0 1px 2px rgba(11,26,36,.04), 0 30px 60px rgba(11,26,36,.10);}
  .py-tr{display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) 120px; gap:12px; align-items:center; padding:12px 4px; border-bottom:1px solid #f0f2f4; font-size:13px; color:#5b6b78;}
  .py-tr b{font-weight:700; color:#0b1a24;}
  .py-tr em{justify-self:start; padding:3px 10px; border-radius:100px; font-style:normal; font-size:11.5px; font-weight:800; white-space:nowrap;}
  .py-tr em.n{background:#eef1f3; color:#3b4a57;}
  .py-tr em.t{background:#fff4dc; color:#9d6000;}
  .py-tr em.s{background:#eaf1ff; color:#2f4fc0;}
  .py-th{padding-top:0; font-size:10px; font-weight:800; letter-spacing:1.1px; text-transform:uppercase; color:#62707c;}
  .py-taxf{display:flex; align-items:flex-start; gap:9px; margin-top:16px; padding:12px 14px; border-radius:8px; background:#f1fbfa; border:1px solid #bfe9e5; font-size:13px; line-height:1.5; color:#00726f;}
  .py-taxf svg{flex:0 0 16px; width:16px; height:16px; margin-top:1px;}
  @media (max-width:960px){ .py-tax-in{grid-template-columns:1fr;} }
  @media (max-width:560px){ .py-pts{grid-template-columns:1fr;} .py-tr{grid-template-columns:minmax(0,1.4fr) 110px;} .py-tr > :nth-child(2){display:none;} .py-taxcard{padding:18px 16px;} }

/* ---- 4. back office ---- */
  .py-s4{background:#f6f9fa;}
  .py-s4-top{display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:clamp(32px,5vw,64px); align-items:end;}
  .py-s4-top .rs-checks{margin:0 0 8px;}
  .py-tiles{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px;}
  .py-tiles span{padding:14px; border:1px solid #e6ebef; border-radius:8px; background:#fff;}
  .py-tiles b{display:block; font-family:'Anton',Impact,sans-serif; font-weight:400; font-size:24px; line-height:1; color:#0b1a24;}
  .py-tiles b.g{color:#1d6b3f;} .py-tiles b.r{color:#c0344d;}
  .py-tiles small{display:block; margin-top:6px; font-size:11px; color:#5b6b78;}
  .py-tiles .dk{background:#1d6b3f; border-color:#1d6b3f;}
  .py-tiles .dk b,.py-tiles .dk small{color:#fff;}
  .py-bars{display:flex; align-items:flex-end; gap:16px; height:170px; padding:18px 6px 0; border-bottom:1px solid #e6ebef;
    background:repeating-linear-gradient(180deg, transparent 0 41px, #f2f4f6 41px 42px);}
  .py-bars span{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%;}
  .py-bars em{font-style:normal; font-size:11px; font-weight:800; color:#0b1a24; margin-bottom:4px;}
  .py-bars i{display:block; width:100%; max-width:64px; height:var(--h); border-radius:5px 5px 0 0; background:#4472c4; transform-origin:bottom; transform:scaleY(0);
    transition:transform .9s cubic-bezier(.2,.8,.2,1);}
  .py-bars span:nth-child(2) i{transition-delay:.08s;} .py-bars span:nth-child(3) i{transition-delay:.16s;} .py-bars span:nth-child(4) i{transition-delay:.24s;} .py-bars span:nth-child(5) i{transition-delay:.32s;}
  .py-bars.in i{transform:none;}
  .py-bars small{position:absolute; transform:translateY(20px); font-size:11px; color:#5b6b78;}
  .py-bars span{position:relative;}
  .py-bars span small{bottom:0;}
  .py-dl{display:inline-flex; align-items:center; gap:7px; margin-top:34px; padding:9px 16px; border:1px solid #dfe5e9; border-radius:100px; font-size:12.5px; font-weight:800; color:#0b1a24;}
  .py-dl svg{width:14px; height:14px;}
  .py-stmt .py-k:first-of-type{margin-top:0;}
  .py-due{display:flex; justify-content:space-between; align-items:center; margin-top:16px; padding:12px 14px; border-radius:8px; background:#f1fbfa; border:1px solid #bfe9e5;}
  .py-due b{font-size:14px; font-weight:800; color:#0b1a24;}
  .py-due small{display:block; font-size:11px; color:#00726f;}
  .py-due > b{font-size:22px;}
  @media (max-width:960px){ .py-s4-top{grid-template-columns:1fr; gap:20px;} }
  @media (max-width:560px){ .py-tiles{grid-template-columns:1fr 1fr;} .py-bars{gap:8px;} }
  @media (prefers-reduced-motion:reduce){ .py-bars i{transition:none; transform:none;} }

/* shared */
  .sk-faq{background:#fff;}
  .sk-faq-in{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.9fr); gap:clamp(32px,5vw,64px); align-items:start;}
  .sk-faq-h{margin:0; font-size:clamp(24px,2.3vw,30px); font-weight:500; line-height:1.25; letter-spacing:-.02em; color:#7a8a97;}
  .sk-faq-h b{display:block; font-weight:700; color:#0b1a24;}
  .sk-faq-list{border-top:1px solid #e6ebef;}
  .sk-qa{border-bottom:1px solid #e6ebef;}
  .sk-qa button:hover span{color:#00726f;}
  .sk-qa button:focus-visible{outline:2px solid #007a76; outline-offset:4px; border-radius:6px;}
  .sk-qa button span{transition:color .2s;}
  .sk-qa button i svg{width:14px; height:14px;}
  .sk-qa button i .v{transform-origin:center; transition:transform .3s cubic-bezier(.2,.8,.2,1);}
  .sk-qa.open button i{background:#007a76; color:#fff;}
  .sk-qa.open button i .v{transform:scaleY(0);}
  .sk-qa-a{display:grid; grid-template-rows:0fr; transition:grid-template-rows .35s cubic-bezier(.2,.8,.2,1);}
  .sk-qa-a > div{overflow:hidden;}
  .sk-qa-a p{margin:0; padding:0 56px 24px 0; font-size:16px; line-height:1.65; color:#5b6b78;}
  .sk-qa.open .sk-qa-a{grid-template-rows:1fr;}
  @media (max-width:860px){ .sk-faq-in{grid-template-columns:1fr; gap:28px;} .sk-qa-a p{padding-right:0;} }
  @media (prefers-reduced-motion:reduce){ .sk-qa-a,.sk-qa button i .v{transition:none;} }
  .em-inc{background:#fff;}
  .em-inc-grid{position:relative; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); margin-top:48px;}
  .em-inc-col{position:relative; padding:0 26px 8px 0;}
  .em-inc-col + .em-inc-col{padding-left:26px;}
  .em-inc-col + .em-inc-col::before{content:""; position:absolute; left:0; top:-24px; bottom:-24px; border-left:1px dashed #dfe5ea;}
  .em-inc-ic svg{display:block; width:22px; height:22px;}
  .em-inc-col b{position:relative; display:block; font-size:16.5px; font-weight:800; line-height:1.35; color:#0b1a24;}
  .em-inc-col b::before{content:""; position:absolute; left:-27px; top:3px; width:2px; height:18px; background:#007a76;}
  .em-inc-col:first-child b::before{left:-14px;}
  .em-inc-col p{margin-top:10px; font-size:15px; line-height:1.65; color:var(--sc-muted);}
    .em-inc-grid{grid-template-columns:1fr 1fr; row-gap:40px;}
    .em-inc-col:nth-child(3){padding-left:0;} .em-inc-col:nth-child(3)::before{display:none;}
    .em-inc-grid{grid-template-columns:1fr;}
    .em-inc-col + .em-inc-col{padding-left:0;} .em-inc-col + .em-inc-col::before{display:none;}
    .em-inc-col b::before{left:-14px;}
  .rs{border-top:1px solid var(--border,#e5e7eb);}
  .rs .pc-sh,.ws-section .pc-sh{max-width:900px; margin-top:12px; font-size:clamp(26px,2.9vw,38px); font-weight:500; line-height:1.22; letter-spacing:-.02em; color:#7a8a97;}
  .rs .pc-sh b,.ws-section .pc-sh b{font-weight:700; color:#0b1a24;}
  .rs .pc-sh.c,.ws-section .pc-sh.c{margin-left:auto; margin-right:auto; text-align:center;}
  .rs-two .rs-checks{margin-top:26px;}
  .rs-two .rs-checks li{font-size:15.5px;}
  .rs-checks{list-style:none; margin:24px 0 0; padding:0; display:flex; flex-direction:column; gap:10px;}
  .rs-checks li{display:flex; align-items:center; gap:10px; font-size:14.5px; color:#3b4a57;}
  .rs-checks svg{flex:0 0 18px; width:18px; height:18px; padding:3px; border-radius:50%; background:rgba(0,188,183,.16); color:var(--sc-teal-ink);}
.pb-link{display:inline-flex; align-items:center; gap:8px; font-size:16px; font-weight:700; color:#00726f; text-decoration:none;}
.pb-link:hover{color:#00605d;}
.pc-arr{width:10px; height:10px; overflow:visible; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;}
.pc-arr-l{opacity:0; transition:opacity .15s;} .pc-arr-h{transition:transform .15s;}
.pb-link:hover .pc-arr-l{opacity:1;} .pb-link:hover .pc-arr-h{transform:translateX(3px);}
.pb-hero .pb-link svg.pc-arr{width:10px !important; height:10px !important;}
#features-payments .sk-qa-a{display:grid !important; grid-template-rows:0fr !important;}
#features-payments .sk-qa.open .sk-qa-a{grid-template-rows:1fr !important;}
#features-payments .sk-qa-a > div{overflow:hidden; min-height:0;}
/* FAQ buttons (the shared accordion's multi-line rules were not carried over) */
#features-payments .sk-qa button{display:flex; align-items:center; justify-content:space-between; gap:20px; width:100%; padding:22px 0; border:0; background:none; font:inherit; font-size:17px; font-weight:600; color:var(--pc-ink); text-align:left; cursor:pointer;}
#features-payments .sk-qa button:hover span{color:#00726f;}
#features-payments .sk-qa button i{flex:0 0 30px; height:30px; display:flex; align-items:center; justify-content:center; border-radius:8px; background:#eef6f5; color:#007a76; font-style:normal;}
#features-payments .sk-qa button i svg{width:14px; height:14px;}
#features-payments .sk-qa.open button i{background:#007a76; color:#fff;}
#features-payments .sk-qa button:focus-visible{outline:2px solid #007a76; outline-offset:4px; border-radius:6px;}

/* ==== hero: rosette and printing receipt ==== */
.pbx-hero{background:linear-gradient(180deg,#fbfcfe,#f4f8fa) !important;}
.pbx-hero::before, .pbx-hero::after{display:none !important;}
.pbx-hero .pc-hero-art{position:relative;}
.pbr{position:absolute; z-index:-1; left:50%; top:50%; width:760px; height:760px; margin:-380px 0 0 -330px; opacity:.32; pointer-events:none;
  -webkit-mask:radial-gradient(closest-side,#000 60%,transparent); mask:radial-gradient(closest-side,#000 60%,transparent);}
@media (prefers-reduced-motion:no-preference){ .pbr .o{animation:pbr-turn 140s linear infinite;} .pbr .i{animation:pbr-turn 100s linear infinite reverse;} }
@keyframes pbr-turn{to{transform:rotate(360deg);}}
.pbt{position:absolute; left:-46px; bottom:-56px; z-index:3; width:250px;}
.pbt-p{position:relative; overflow:hidden; border-radius:4px 4px 0 0; filter:drop-shadow(0 22px 30px rgba(13,27,42,.28));}
.pbt-in{padding:16px 16px 22px; background:#fff; font-family:'SFMono-Regular',ui-monospace,Menlo,monospace; color:#0b1a24;
  -webkit-mask:linear-gradient(#000,#000) top/100% calc(100% - 8px) no-repeat, conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/12px 8px repeat-x;
  mask:linear-gradient(#000,#000) top/100% calc(100% - 8px) no-repeat, conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/12px 8px repeat-x;}
.pbt-h b{display:block; font-family:'Archivo',sans-serif; font-size:13px; font-weight:700;} .pbt-h small{display:block; font-size:9.5px; color:#62707c;}
.pbt-by{margin:8px 0 10px; padding-bottom:10px; border-bottom:1px dashed #d6dde3; font-size:8.5px; line-height:1.45; color:#56677a;}
.pbt-l, .pbt-t{display:flex; justify-content:space-between; gap:10px; padding:3px 0; font-size:10px;} .pbt-l.m{color:#62707c;}
.pbt-t{margin:6px 0; padding:7px 0; border-top:1px dashed #d6dde3; border-bottom:1px dashed #d6dde3; font-size:12px; font-weight:700;}
.pbt-c{margin-top:10px; text-align:center;} .pbt-c small{display:block; font-size:8.5px; color:#62707c; letter-spacing:.06em; text-transform:uppercase;} .pbt-c b{font-size:12px; letter-spacing:.08em;}
@media (prefers-reduced-motion:no-preference){ .pbt-p{animation:pbt-print 9s cubic-bezier(.4,0,.2,1) infinite;} }
@keyframes pbt-print{0%,6%{clip-path:inset(0 0 100% 0); transform:translateY(-14px);} 34%,86%{clip-path:inset(0 0 0 0); transform:none;} 94%,100%{clip-path:inset(0 0 0 0); transform:none; opacity:0;}}
@media (max-width:1000px){ .pbt{left:6px; bottom:-40px; width:220px;} .pbr{width:560px; height:560px; margin:-280px 0 0 -280px;} }
@media (max-width:560px){ .pbt{width:190px; bottom:-60px;} }
@keyframes pbt-print{0%,5%{clip-path:inset(0 0 100% 0); transform:translateY(-16px);} 30%,90%{clip-path:inset(0 0 0 0); transform:none;} 97%,100%{clip-path:inset(0 0 100% 0); transform:translateY(-16px);}}
.pbt{left:-90px; bottom:-34px; z-index:5;}
@media (max-width:1000px){ .pbt{left:-6px; bottom:-50px;} .pbr{opacity:.2;} }
@media (min-width:1001px){ .pbt{left:40px; bottom:-70px;} }
@media (max-width:560px){ .pbt{width:176px; left:auto; right:6px; bottom:-80px;} .pbt-in{padding:12px 12px 18px;} }
@media (min-width:1001px){ .pbt{bottom:-10px;} }

/* ==== payouts: one price split in a bar; the payout lands ==== */
.py-s2 .py-big b{transition:color .4s;}
.pyx-big.flip b{animation:pyx-pop .5s ease;}
@keyframes pyx-pop{40%{transform:translateY(-3px); color:#007a76;}}
.pyx-split{margin:16px 0 14px; padding:16px; border-radius:12px; background:#f6f9fc;}
.pyx-top{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:10px; font-size:12.5px; color:#56677a;}
.pyx-top b{font-size:18px; font-weight:600; color:#0b1a24; font-variant-numeric:tabular-nums;}
.pyx-bar{display:flex; gap:3px; height:14px;}
.pyx-bar i{display:block; height:100%; border-radius:4px; transition:flex-grow 1s cubic-bezier(.2,.8,.2,1);}
.pyx-bar .you{flex:100 1 0; background:linear-gradient(90deg,#007a76,#14a39b);} .pyx-bar .fee{flex:15 1 0; background:#c9d2da;}
.pyx-split.go .pyx-bar .you{animation:pyx-grow 1.1s cubic-bezier(.2,.8,.2,1);}
@keyframes pyx-grow{from{flex-grow:0;}}
.pyx-leg{display:flex; justify-content:space-between; gap:10px; margin-top:10px; font-size:11.5px; color:#56677a;}
.pyx-leg span{display:flex; align-items:center; gap:6px;} .pyx-leg b{color:#0b1a24; font-weight:600;}
.pyx-leg i{width:8px; height:8px; border-radius:2px;} .pyx-leg .you i{background:#007a76;} .pyx-leg .fee i{background:#c9d2da;}
.py-s2 .py-seg i{transition:background-color .35s, color .35s;}
.py-po span{position:relative;}
.pyx-prog{display:block; height:3px; margin-top:8px; border-radius:3px; background:#eef1f4; overflow:hidden;}
.pyx-prog i{display:block; height:100%; width:0; background:#007a76;}
.py-po b{transition:color .4s;} .py-po b.hit{color:#1a874b;}
/* the three points: plain rows with a teal tick */
.py-s2 .py-three .em-inc-ic{display:none !important;}
.py-s2 .py-three .em-inc-col{position:relative; display:block !important; padding-left:16px !important; border:0 !important; background:none !important; box-shadow:none !important;}
.py-s2 .py-three .em-inc-col::before{content:"" !important; display:block !important; position:absolute !important; left:0; top:4px; width:1px !important; height:17px !important; background:#007a76 !important; border:0 !important;}
.py-s2 .py-three .em-inc-col b{display:block !important; margin-bottom:4px;} .py-s2 .py-three .em-inc-col b::before, .py-s2 .py-three .em-inc-col b::after{display:none !important;}
@media (max-width:900px){ .py-s2 .py-three{display:grid !important; grid-template-columns:minmax(0,1fr) !important; gap:20px !important;} }
.py-po em{font-style:normal; display:block; font-size:11px; color:#62707c; margin-top:2px;}

/* ==== sales tax: plain rows, and each tax result stamped in turn ==== */
.py-s3{background:#fff !important;}
.py-s3 .py-num-l{display:none !important;}
.py-s3 .py-pts > div{position:relative; padding-left:16px !important;}
.py-s3 .py-pts > div::before{content:""; position:absolute; left:0; top:4px; width:1px; height:17px; background:#007a76;}
.py-s3 .py-pts b{display:block; margin-bottom:4px;}
.py-s3 .py-taxcard{box-shadow:0 0 0 1px rgba(13,27,42,.07), 0 30px 60px -36px rgba(13,27,42,.3) !important; border:0 !important;}
.py-s3 .py-tr:not(.py-th){transition:background-color .5s ease;}
.py-s3 .py-tr.now{background:#f6f9fc;}
.py-s3 .py-tr:not(.py-th) em{opacity:0; transform:scale(1.5) rotate(-6deg); transition:opacity .25s ease, transform .35s cubic-bezier(.3,1.6,.5,1);}
.py-s3 .py-tr.done em{opacity:1; transform:none;}

/* ==== back office: brand colours, light numerals, a statement that adds itself up, a breathing skyline ==== */
.py-s4{position:relative; isolation:isolate; overflow:hidden; background:#f6f9fc !important;}
.pbs{position:absolute; z-index:-1; left:0; right:0; bottom:0; height:62%; display:flex; align-items:flex-end; gap:1.4%; padding:0 2%; pointer-events:none;
  -webkit-mask:linear-gradient(0deg,#000 10%,transparent); mask:linear-gradient(0deg,#000 10%,transparent);}
.pbs i{flex:1; height:var(--h); border-radius:6px 6px 0 0; background:linear-gradient(180deg, rgba(0,122,118,.16), rgba(0,122,118,.03)); transform-origin:bottom;}
@media (prefers-reduced-motion:no-preference){ .pbs i{animation:pbs-breathe var(--t) ease-in-out var(--d) infinite alternate;} }
@keyframes pbs-breathe{from{transform:scaleY(.55);} to{transform:scaleY(1.05);}}
.py-s4 .py-box{box-shadow:0 0 0 1px rgba(13,27,42,.06), 0 30px 60px -36px rgba(13,27,42,.3) !important; border:0 !important;}
.py-s4 .py-tiles{gap:0; border-top:1px solid #eef1f4; border-bottom:1px solid #eef1f4; margin-bottom:18px;}
.py-s4 .py-tiles span{padding:14px 14px 16px; border:0; border-left:1px solid #eef1f4; border-radius:0; background:none !important;}
.py-s4 .py-tiles span:first-child{border-left:0; padding-left:0;}
.py-s4 .py-tiles b{font-family:inherit; font-size:clamp(18px,1.8vw,24px); font-weight:300; letter-spacing:-.02em; color:#0b1a24 !important; font-variant-numeric:tabular-nums;}
.py-s4 .py-tiles small{color:#62707c !important;}
.py-s4 .py-bars{background:repeating-linear-gradient(180deg, transparent 0 41px, #f2f4f6 41px 42px); gap:22px;}
.py-s4 .py-bars i{max-width:40px; border-radius:6px 6px 0 0; background:linear-gradient(180deg,#14a39b,#007a76);}
.py-s4 .py-bars span:last-child i{background:linear-gradient(180deg,#5fd4cf,#14a39b); box-shadow:0 0 0 3px rgba(20,163,155,.12);}
.py-s4 .py-bars em{font-weight:500; color:#56677a;}
.py-s4 .py-stmt .py-l, .py-s4 .py-stmt .py-total, .py-s4 .py-stmt .py-due, .py-s4 .py-stmt .py-k{opacity:.15; transform:translateY(4px); transition:opacity .4s ease, transform .5s cubic-bezier(.2,.8,.2,1);}
.py-s4 .py-stmt .in{opacity:1 !important; transform:none !important;}
.py-s4 .py-total{border-top-color:#007a76;} .py-s4 .py-total b{color:#00605d;}
@media (max-width:760px){ .py-s4 .py-tiles span:nth-child(odd){border-left:0; padding-left:0;} .py-s4 .py-tiles span:nth-child(n+3){border-top:1px solid #eef1f4;} }

/* ==== hero, take two (Mehul: rosette out, checkout must fit): payment cards drifting in soft colour behind the checkout ==== */
.pbr{display:none !important;}
@media (min-width:961px){ .pyh{width:100% !important; margin-left:0 !important; top:40px !important;} }
.pbk{position:absolute; z-index:-1; inset:-120px -60px -120px -80px; pointer-events:none;}
.pbk .c{position:absolute; width:300px; aspect-ratio:1.586; border-radius:18px; overflow:hidden;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.5), 0 30px 60px -30px rgba(13,27,42,.35); opacity:.9;}
.pbk .c::after{content:""; position:absolute; inset:0; background:linear-gradient(115deg, rgba(255,255,255,.45) 0%, rgba(255,255,255,0) 40%);}
.pbk .chip{position:absolute; left:24px; top:46px; width:40px; height:30px; border-radius:6px; background:linear-gradient(135deg,#f6e3b0,#d9b866); opacity:.85;}
.pbk .ln{position:absolute; left:24px; bottom:42px; width:58%; height:9px; border-radius:5px; background:rgba(255,255,255,.55);}
.pbk .ln.s{bottom:24px; width:28%; opacity:.7;}
.pbk .c0{right:-30px; top:-10px; background:linear-gradient(135deg,#0f8f88,#5fd4cf); --r:12deg;}
.pbk .c1{left:-20px; bottom:30px; width:260px; background:linear-gradient(135deg,#7c6ce6,#c7bdfb); --r:-14deg;}
.pbk .c2{right:4%; bottom:-30px; width:240px; background:linear-gradient(135deg,#f2a65a,#fde0bf); --r:-6deg;}
.pbk .c3{left:34%; top:-60px; width:200px; background:linear-gradient(135deg,#0b1a24,#24465a); --r:8deg; opacity:.75;}
.pbk .c{transform:rotate(var(--r));}
@media (prefers-reduced-motion:no-preference){
  .pbk .c0{animation:pbk-a 14s ease-in-out infinite alternate;} .pbk .c1{animation:pbk-b 17s ease-in-out infinite alternate;}
  .pbk .c2{animation:pbk-a 19s ease-in-out infinite alternate-reverse;} .pbk .c3{animation:pbk-b 15s ease-in-out infinite alternate-reverse;}
}
@keyframes pbk-a{from{transform:translate(0,0) rotate(var(--r));} to{transform:translate(-18px,22px) rotate(calc(var(--r) + 5deg));}}
@keyframes pbk-b{from{transform:translate(0,0) rotate(var(--r));} to{transform:translate(20px,-18px) rotate(calc(var(--r) - 5deg));}}
@media (max-width:960px){ .pbk{inset:-60px -10px -80px -10px;} .pbk .c{width:200px;} .pbk .c1{width:170px;} .pbk .c2{width:160px;} .pbk .c3{width:140px;} }
@media (min-width:961px){
  .pyh .py-co{gap:14px !important; padding:16px !important; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) !important;}
  .pyh .py-co-l, .pyh .py-co-r{padding:20px 20px !important;}
  .pyh .py-h b{font-size:21px !important; white-space:nowrap;} .pyh .py-h span{width:24px !important; height:24px !important; font-size:11px !important;}
  .pyh .py-sub{margin:4px 0 12px 33px !important; font-size:12.5px !important;}
  .pyh .py-f{margin-bottom:10px !important;} .pyh .py-f small{font-size:11.5px !important;} .pyh .py-f i{padding:10px 11px !important; font-size:13px !important;}
  .pyh .py-wallets span{height:42px !important; font-size:14px !important;}
  .pyh .py-camp img{width:46px !important; height:46px !important;} .pyh .py-camp b{font-size:15px !important;} .pyh .py-camp small{font-size:11.5px !important;}
  .pyh .py-l{font-size:13.5px !important; padding:7px 0 !important;} .pyh .py-l.mut span{font-size:11px !important;}
  .pyh .py-total{flex-wrap:wrap;} .pyh .py-total b{font-size:26px !important;} .pyh .py-total span{font-size:11.5px !important;}
}
.pbk{inset:-60px -60px -120px -80px;} .pbk .c3{top:-10px;} .pbk .c0{top:10px;}
@media (max-width:960px){ .pbk{inset:30px -10px -80px -10px;} .pbk .c3{display:none;} .pbk .c0{top:0; right:-40px;} .pbk .c{opacity:.7;} }
@media (min-width:1001px){ .pbt{left:-70px !important; bottom:-80px !important; width:232px;} }
@media (min-width:1001px){ .pbt{left:-36px !important;} }
/* the hero checkout a little bigger: the art column takes more of the row (Mehul 2026-10-20) */
@media (min-width:1001px){
  .pbx-hero .pc-hero-in{grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr) !important;}
  .pyh .py-h b{font-size:23px !important;} .pyh .py-sub{font-size:13.5px !important;} .pyh .py-f i{padding:12px 12px !important; font-size:14px !important;}
  .pyh .py-l{font-size:14.5px !important;} .pyh .py-total b{font-size:30px !important;} .pyh .py-camp b{font-size:16px !important;}
}
@media (min-width:1001px){ .pbt{bottom:-118px !important;} }
@media (min-width:1001px){ .pbt{bottom:-92px !important;} }

/* ==== sales tax, take two: one order, the tax lifted out and sent away ==== */
.tx2{position:relative; display:grid; grid-template-columns:minmax(0,1.15fr) minmax(80px,.45fr) minmax(0,.8fr); align-items:center; margin-top:52px;}
.tx2-o{padding:20px 22px; border-radius:16px; background:#fff; box-shadow:0 0 0 1px rgba(13,27,42,.07), 0 30px 60px -36px rgba(13,27,42,.3);}
.tx2-o .h{display:flex; justify-content:space-between; align-items:baseline; padding-bottom:12px; border-bottom:1px solid #eef1f4;}
.tx2-o .h b{font-size:15px; font-weight:600; color:#0b1a24;} .tx2-o .h small{font-size:12px; color:#62707c;}
.tx2-o .ln{display:grid; grid-template-columns:minmax(0,1fr) auto 58px 70px; gap:12px; align-items:center; padding:14px 0; border-bottom:1px solid #f1f3f6;}
.tx2-o .ln b{display:block; font-size:14px; font-weight:600; color:#0b1a24;} .tx2-o .ln small{display:block; font-size:11.5px; color:#62707c;}
.tx2-o .ln strong{text-align:right; font-size:14px; font-weight:500; color:#0b1a24; font-variant-numeric:tabular-nums;}
.tx2-o .ln em{font-style:normal; padding:3px 9px; border-radius:20px; font-size:11px; font-weight:600; white-space:nowrap; opacity:0; transform:scale(1.6) rotate(-8deg); transition:opacity .2s, transform .35s cubic-bezier(.3,1.6,.5,1);}
.tx2-o .ln em.n{background:#eef1f4; color:#56677a;} .tx2-o .ln em.t{background:#fff3e0; color:#9d6000;}
.tx2-o .ln i{text-align:right; font-style:normal; font-size:12px; color:#9d6000; font-variant-numeric:tabular-nums; opacity:0; transition:opacity .3s .15s;}
.tx2-o .ln.on em{opacity:1; transform:none;} .tx2-o .ln.on i{opacity:1;}
.tx2-o .tot{display:flex; justify-content:space-between; align-items:baseline; padding-top:14px; font-size:13px; color:#56677a;}
.tx2-o .tot b{font-size:20px; font-weight:600; color:#9d6000; font-variant-numeric:tabular-nums;}
.tx2-path{width:100%; height:300px; overflow:visible;}
.tx2-path path{fill:none; stroke:#d6dde3; stroke-width:1.5; vector-effect:non-scaling-stroke;}
.tx2-path .p1{stroke:#e9c48a; stroke-dasharray:4 5;}
.tx2-coin{position:absolute; left:0; top:0; z-index:3; padding:5px 11px; border-radius:20px; background:#a26300; color:#fff; font-size:12px; font-weight:600; opacity:0; pointer-events:none; box-shadow:0 8px 18px -8px rgba(162,99,0,.6);}
.tx2-d{display:grid; gap:16px;}
.tx2-d .d{padding:18px 20px; border-radius:14px; background:#fff; box-shadow:0 0 0 1px rgba(13,27,42,.07), 0 24px 48px -32px rgba(13,27,42,.3); transition:box-shadow .5s, transform .5s;}
.tx2-d small{display:block; font-size:12px; color:#62707c;} .tx2-d b{display:block; margin:2px 0 4px; font-size:26px; font-weight:300; letter-spacing:-.02em; color:#0b1a24; font-variant-numeric:tabular-nums;}
.tx2-d span{display:block; font-size:12.5px; color:#56677a;}
.tx2-d .st{background:#fffaf2;} .tx2-d .st b{color:#9d6000;}
.tx2-d .st.hit{box-shadow:0 0 0 2px #e9c48a, 0 24px 48px -28px rgba(162,99,0,.4); transform:translateY(-2px);}
.tx2-d .po b{color:#00605d;}
.tx2-tags{list-style:none; display:flex; flex-wrap:wrap; gap:10px; margin:40px 0 0; padding:0;}
.tx2-tags li{display:inline-flex; align-items:center; gap:8px; padding:8px 14px 8px 12px; border-radius:100px; background:#f6f9fc; box-shadow:inset 0 0 0 1px #e3e8ee; font-size:13.5px; font-weight:500; color:#0b1a24;}
.tx2-tags li::before{content:""; width:6px; height:6px; border-radius:2px; background:#007a76;}
@media (max-width:900px){
  .tx2{grid-template-columns:minmax(0,1fr); gap:20px;} .tx2-path{display:none;}
  .tx2-d{grid-template-columns:1fr 1fr;} .tx2-o .ln{grid-template-columns:minmax(0,1fr) auto 64px; } .tx2-o .ln i{display:none;}
}
@media (max-width:560px){ .tx2-d{grid-template-columns:minmax(0,1fr);} .tx2-o{padding:16px;} .tx2-o .ln em{font-size:10px;} }


/* hero colour band (Mehul 2026-10-21, brand teal mix), after Stripe: a crisp-edged diagonal ribbon edge to edge, its colour running along
   it as soft blurred streams (a bright aqua core between violet and blue), lit with a soft glow, slowly flowing */
.pbx-hero{position:relative; z-index:1; overflow-x:clip; overflow-y:visible; isolation:isolate; margin-bottom:clamp(90px,11vw,170px);}
.pb-band{position:absolute; z-index:-1; left:-10%; right:-25%; top:71%; height:260px; overflow:hidden; transform:rotate(-9deg);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55), 0 40px 90px -30px rgba(0,122,118,.45), 0 -20px 80px -40px rgba(33,227,210,.5);}
.pb-band svg{position:absolute; top:0; left:0; width:200%; height:100%; filter:saturate(1.25) brightness(1.06); will-change:transform;}
.pb-band::after{content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,0) 30%, rgba(255,255,255,0) 70%, rgba(13,27,42,.10));}
@media (prefers-reduced-motion:no-preference){ .pb-band svg{animation:pb-flow 30s linear infinite;} }
@keyframes pb-flow{from{transform:translateX(0);} to{transform:translateX(-50%);}}
@media (max-width:900px){ .pb-band{left:-30%; right:-30%; top:auto; bottom:13%; height:195px;} }
@media (max-width:900px){ .pbx-hero{margin-bottom:0;} }

/* the entrance rise lets go once it ends, so the scroll flight can move the hero checkout and fade the receipt */
.pbx-hero .pyh, .pbx-hero .pbt{animation-fill-mode:backwards !important;}
@media (min-width:961px){ .py-s1 .pc-sh{max-width:min(520px,42%) !important;} }
/* the flight sets the transform every frame: no CSS transition on it, or it trails behind the scroll */
@media (min-width:961px){ .pbx-hero .pyh, .pbx-hero .pbt{transition:none !important;} .py-pin .py-card{margin-top:0;} }
/* (Mehul 2026-10-21: "rushing") more scroll for the flight: room under the heading so the checkout glides down over a longer stretch */
@media (min-width:961px){ .py-s1 .py-scroll{margin-top:clamp(100px,16vh,180px);} }

/* sales tax flow (Mehul 2026-10-22: "like the payments flow panel, improve a little, don't break it"): the same cards on a
   soft teal panel with fine hairlines, column labels, and a SideCoach node in the middle that the order flows through */
.tx2{grid-template-columns:minmax(0,1.1fr) minmax(170px,.62fr) minmax(0,.8fr); padding:34px 40px 46px; border-radius:22px; overflow:hidden; isolation:isolate;
  background:radial-gradient(45% 60% at 84% 55%, rgba(33,227,210,.16), transparent 70%), radial-gradient(40% 55% at 12% 60%, rgba(0,122,118,.07), transparent 70%), linear-gradient(180deg,#f3faf9,#e9f5f3);
  box-shadow:inset 0 0 0 1px rgba(0,122,118,.08);}
.tx2::before{content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; background:repeating-linear-gradient(90deg, rgba(0,96,93,.045) 0 1px, transparent 1px 7px);
  -webkit-mask:linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent); mask:linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);}
.tx2-eye{grid-column:1 / -1; display:grid; grid-template-columns:inherit; margin-bottom:22px;}
.tx2-eye span{text-align:center; font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:#7d9496;}
.tx2-mid{position:relative; align-self:stretch; display:flex; align-items:center;}
.tx2-path path{stroke:#a9d6d1; stroke-width:1.5;}
.tx2-path .p1{stroke:#e2bf86; stroke-dasharray:4 5;}
.tx2-path .q1, .tx2-path .q2{stroke-dasharray:7 93; stroke-width:3; stroke-linecap:round; animation:tx2-run 3.2s linear infinite;}
.tx2-path .q1{stroke:#d29a3a;} .tx2-path .q2{stroke:#12a58f; animation-delay:-1.6s;}
@keyframes tx2-run{from{stroke-dashoffset:100;} to{stroke-dashoffset:0;}}
@media (prefers-reduced-motion:reduce){ .tx2-path .q1, .tx2-path .q2{animation:none; display:none;} }
.tx2-node{position:absolute; left:50%; top:50%; z-index:2; width:118px; height:118px; margin:-59px 0 0 -59px; border-radius:50%; background:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  box-shadow:0 0 0 1px rgba(0,122,118,.08), 0 0 0 10px rgba(255,255,255,.45), 0 24px 50px -22px rgba(0,80,78,.45);}
.tx2-node b{font-size:17px; font-weight:700; letter-spacing:-.02em; color:#007a76;}
.tx2-node small{display:inline-flex; align-items:center; gap:4px; padding:3px 8px; border-radius:20px; background:#e7f5f1; color:#00605d; font-size:10px; font-weight:600; white-space:nowrap;}
.tx2-node small svg{width:10px; height:10px; fill:none; stroke:currentColor; stroke-width:3.4; stroke-linecap:round; stroke-linejoin:round;}
.tx2-d .d, .tx2-o{box-shadow:0 0 0 1px rgba(13,27,42,.06), 0 28px 56px -30px rgba(0,70,68,.35);}
.tx2-d .st.hit{box-shadow:0 0 0 2px #e9c48a, 0 24px 48px -28px rgba(162,99,0,.4);}
@media (max-width:900px){ .tx2{grid-template-columns:minmax(0,1fr); padding:22px 18px 26px;} .tx2-mid, .tx2-eye{display:none;} }

/* Financial Dashboard bars (Mehul 2026-10-22: "remove the gradient, make it look nice, not AI"): flat solid bars, slimmer,
   past months in a quiet tint and the current month in brand teal, small tabular labels, faint gridlines and a firm baseline */
.py-s4 .py-bars{background:repeating-linear-gradient(180deg, transparent 0 41px, #f1f4f6 41px 42px) !important; border-bottom:1px solid #cfd8dd !important;}
.py-s4 .py-bars i{max-width:36px !important; border-radius:4px 4px 0 0 !important; background:#a7d6d1 !important; box-shadow:none !important;}
.py-s4 .py-bars span:last-child i{background:#007a76 !important; box-shadow:none !important;}
.py-s4 .py-bars em{font-size:11.5px !important; font-weight:500 !important; color:#7a8a95 !important; font-variant-numeric:tabular-nums; letter-spacing:0;}
.py-s4 .py-bars span:last-child em{color:#00605d !important; font-weight:600 !important;}
.py-s4 .py-bars span:last-child small{color:#0b1a24; font-weight:600;}
/* the steps waiting their turn were faded to 35% opacity, below the contrast minimum (WCAG 1.4.3, 2026-10-28):
   they now stay fully opaque and dim by colour, the heading to a light grey that still clears 3:1 for its size and
   the text to the muted grey (4.5:1) */
.py-step{opacity:1;}
.py-step:not(.on) h3{color:#7b8894;}
.py-step:not(.on) p,.py-step:not(.on) .rs-checks li{color:#62707c;}