/* ═══ mSamex static-page TEMPLATE (design system) ═══════════════════════════
 * One stylesheet for every content page (About / Press / Careers / Blog /
 * Fees …). Built ONLY on tokens.css variables so pages inherit theme + brand
 * automatically. Pair with /design/topmenu.{js,css} and /design/sitefoot.js.
 * Usage: tokens.css + topmenu.css + page.css, body > #msx-topmenu + main.pg
 * ──────────────────────────────────────────────────────────────────────── */
.pg { max-width: 1020px; margin: 0 auto; padding: 34px 20px 70px;
  font-family: var(--font, Geist, system-ui, sans-serif); color: var(--snow, #F2F5F8); }
.pg .mono { font-family: var(--mono, "Geist Mono", monospace); }

/* hero */
.pg-hero { margin: 10px 0 30px; }
.pg-hero h1 { font-size: 34px; font-weight: 800; letter-spacing: -.3px; margin: 0 0 10px; }
.pg-hero .lead { color: var(--snow-mute, #8B95A3); font-size: 16px; line-height: 1.65; max-width: 64ch; margin: 0; }
.pg-hero .kicker { display: inline-block; color: var(--mint, #00D68F); font: 700 11px/1 var(--font, Geist);
  letter-spacing: .12em; text-transform: uppercase; margin-bottom: 12px; }

/* sections + cards */
.pg h2 { font-size: 20px; font-weight: 700; margin: 34px 0 14px; }
.pg h3 { font-size: 15px; font-weight: 700; margin: 20px 0 8px; }
.pg p { color: var(--snow-mute, #8B95A3); font-size: 14.5px; line-height: 1.7; }
.pg p b, .pg p strong { color: var(--snow, #F2F5F8); }
.pg-card { border: 1px solid var(--line, #20242c); border-radius: 14px; padding: 22px 24px;
  background: var(--elevated, rgba(255,255,255,0.02)); margin: 0 0 18px; }
.pg-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin: 18px 0; }
.pg-grid .pg-card { margin: 0; }
.pg-stat .n { font-size: 26px; font-weight: 800; color: var(--mint, #00D68F); font-family: var(--mono, monospace); }
.pg-stat .k { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--snow-mute, #8B95A3); margin-top: 4px; }

/* tables (fees-style) */
.pg table { width: 100%; border-collapse: collapse; font-size: 13px; }
.pg thead th { text-align: left; padding: 9px 12px; font-size: 10.5px; letter-spacing: .07em;
  text-transform: uppercase; color: var(--snow-mute, #8B95A3); border-bottom: 2px solid var(--mint, #00D68F); }
.pg tbody td { padding: 8px 12px; border-bottom: 1px solid var(--line, #20242c); }
.pg tbody tr:last-child td { border-bottom: none; }

/* buttons + links */
.pg a { color: var(--mint, #00D68F); text-decoration: none; }
.pg a:hover { text-decoration: underline; }
.pg .btn-row { display: flex; gap: 10px; flex-wrap: wrap; margin: 20px 0 6px; }
.pg .pgbtn { display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; border-radius: 10px;
  font: 700 13.5px/1 var(--font, Geist); text-decoration: none !important; border: 1px solid var(--line, #20242c); color: var(--snow, #F2F5F8); }
.pg .pgbtn.pri { background: var(--mint, #00D68F); color: var(--ink, #06130d); border-color: transparent; }
.pg .pgbtn:hover { filter: brightness(1.08); }

/* faq */
.pg details { border: 1px solid var(--line, #20242c); border-radius: 10px; padding: 12px 16px; margin: 8px 0; }
.pg summary { cursor: pointer; font-weight: 600; font-size: 14px; color: var(--snow, #F2F5F8); }

/* blog list */
.pg .post-row { display: block; border: 1px solid var(--line, #20242c); border-radius: 14px;
  padding: 20px 22px; margin: 0 0 14px; text-decoration: none !important; }
.pg .post-row:hover { background: var(--elevated, rgba(255,255,255,0.03)); }
.pg .post-row h3 { margin: 0 0 6px; color: var(--snow, #F2F5F8); }
.pg .post-row p { margin: 0 0 8px; }
.pg .post-meta { font-size: 11.5px; color: var(--snow-mute, #8B95A3); font-family: var(--mono, monospace); }
/* article body */
.pg article p, .pg article li { color: var(--snow-mute, #8B95A3); font-size: 15px; line-height: 1.75; }
.pg article h2 { margin-top: 30px; }
.pg article code { background: var(--elevated, rgba(255,255,255,0.05)); padding: 2px 6px; border-radius: 5px; font-family: var(--mono, monospace); font-size: 13px; }

@media (max-width: 720px) { .pg-hero h1 { font-size: 26px; } .pg { padding: 22px 14px 50px; } }