/* ============================================================
   MAXIMUM — payments page styles
   Extracted from an inline <style> in payments.html so the CSP can drop
   'unsafe-inline' from style-src-elem. Linked immediately after
   theme-green.css, the position the <style> block occupied, so the
   cascade order against site.css and the theme is unchanged.
   ============================================================ */
  .m-hero{padding-top:calc(var(--nav-h) + clamp(48px,7vw,96px));padding-bottom:clamp(40px,5vw,64px);position:relative;overflow:hidden;}
  .m-hero .grid-faint{position:absolute;inset:0;mask-image:linear-gradient(180deg,rgba(0,0,0,.4),transparent 80%);opacity:.45;}
  .m-crumb{font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--paper-faint);}
  .m-crumb a{color:var(--paper-dim);}
  .m-title-row{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap;margin-top:20px;}

  /* energia-style stage */
  .pay-stage{display:grid;grid-template-columns:0.66fr 1.7fr 0.84fr;gap:clamp(20px,2.4vw,38px);
    margin-top:clamp(40px,5vw,64px);align-items:stretch;}
  .pay-stats{display:flex;flex-direction:column;justify-content:center;gap:30px;}
  .pay-stat .stat{font-size:clamp(34px,3.6vw,54px);}
  .pay-diagram{position:relative;border:1px solid var(--line-soft);background:var(--ink-2);overflow:hidden;
    display:flex;align-items:center;justify-content:center;min-height:380px;}
  .pay-diagram::before{content:"";position:absolute;inset:0;pointer-events:none;
    background-image:linear-gradient(var(--line-soft) 1px,transparent 1px),linear-gradient(90deg,var(--line-soft) 1px,transparent 1px);
    background-size:34px 34px;mask-image:radial-gradient(circle at 46% 50%,#000 45%,transparent 88%);}
  .pay-diagram svg{position:relative;width:100%;height:auto;}
  .pay-notes{border-left:1px solid var(--line);padding-left:24px;display:flex;flex-direction:column;justify-content:center;gap:22px;}
  .pay-note .pnn{font-family:var(--font-mono);font-size:11px;color:var(--paper-faint);letter-spacing:.1em;}
  .pay-note .pnt{font-size:14px;font-weight:500;margin:5px 0 4px;}
  .pay-note p{font-size:13px;color:var(--paper-dim);line-height:1.5;margin:0;}

  .pay-pulse{animation:payflow 2.6s linear infinite;}
  @keyframes payflow{0%{transform:translateX(0);opacity:0;}12%{opacity:1;}88%{opacity:1;}100%{transform:translateX(186px);opacity:0;}}
  @media (prefers-reduced-motion:reduce){.pay-pulse{display:none;}}

  /* capabilities */
  .cap-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line-soft);
    border:1px solid var(--line-soft);margin-top:44px;}
  .cap{background:var(--ink);padding:clamp(26px,2.6vw,38px);display:flex;flex-direction:column;gap:16px;min-height:280px;}
  .cap .ci{font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;color:var(--paper-faint);}
  .cap h3{font-size:21px;}
  .cap ul{list-style:none;padding:0;margin:6px 0 0;display:flex;flex-direction:column;gap:9px;}
  .cap li{font-size:14px;color:var(--paper-dim);padding-left:18px;position:relative;}
  .cap li::before{content:"";position:absolute;left:0;top:9px;width:6px;height:1px;background:var(--paper-faint);}

  .rails{display:grid;grid-template-columns:repeat(6,1fr);gap:1px;background:var(--line-soft);border:1px solid var(--line-soft);margin-top:44px;}
  .rail-cell{background:var(--ink);padding:22px 18px;}
  .rail-cell .rn{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;color:var(--paper);}
  .rail-cell .rs{font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;color:var(--paper-faint);margin-top:8px;text-transform:uppercase;}
  .rail-cell.live .rn{color:var(--live);}

  @media (max-width:980px){
    .pay-stage{grid-template-columns:1fr;}
    .pay-stats{flex-direction:row;flex-wrap:wrap;gap:24px;}
    .pay-notes{border-left:0;border-top:1px solid var(--line);padding-left:0;padding-top:24px;}
    .cap-grid{grid-template-columns:1fr;}
    .rails{grid-template-columns:1fr 1fr 1fr;}
  }