/* ============================================================
   HERO — TRANSPARENCIA (centered)
   ============================================================ */
.hero{padding:100px 0 56px;text-align:center}
.h-g{max-width:700px;margin:0 auto}
.h-sub{max-width:560px;margin-left:auto;margin-right:auto}
.h-ctas{justify-content:center}

/* ============================================================
   PRINCIPLES GRID
   ============================================================ */
.pr-g{display:grid;grid-template-columns:1fr;gap:14px}
.pr{padding:22px}
.pr .ic{font-size:24px;margin-bottom:10px}
.pr h3{font-size:15px;font-weight:600;margin-bottom:5px}
.pr p{font-size:13px;color:var(--muted);line-height:1.55}

/* ============================================================
   TARIFF TABLE
   ============================================================ */
.tf-wrap{max-width:800px;margin:0 auto;overflow-x:auto;-webkit-overflow-scrolling:touch}
.tf{width:100%;border-collapse:collapse;min-width:500px}
.tf thead th{font-family:var(--m);font-size:10px;letter-spacing:1px;text-transform:uppercase;padding:14px 16px;text-align:left;border-bottom:2px solid var(--bdr);color:var(--muted);white-space:nowrap}
.tf tbody td{font-size:13px;padding:14px 16px;border-bottom:1px solid var(--bdr);color:var(--muted);vertical-align:top}
.tf tbody tr td:first-child{color:var(--white);font-weight:500}
.tf tbody tr:last-child td{border-bottom:none}
.tf .hi{color:var(--mint);font-weight:600;font-family:var(--m)}
.tf-note{text-align:center;font-size:10px;color:var(--muted);margin-top:16px}

/* ============================================================
   EXAMPLE CALC
   ============================================================ */
.ex{border-radius:16px;background:var(--grad);padding:2px;max-width:520px;margin:0 auto}
.ex-i{background:var(--bg);border-radius:14px;padding:24px}
.ex-title{font-family:var(--m);font-size:11px;color:var(--muted);letter-spacing:1px;text-transform:uppercase;margin-bottom:20px;text-align:center}
.ex-row{display:flex;justify-content:space-between;align-items:center;padding:11px 0;border-bottom:1px solid var(--bdr);gap:8px}
.ex-row:last-of-type{border-bottom:none}
.ex-row .l{font-size:12px;color:var(--muted)}
.ex-row .v{font-family:var(--m);font-weight:600;font-size:13px;text-align:right}
.ex-hl{background:rgba(100,228,168,.08);border-radius:12px;padding:16px;display:flex;justify-content:space-between;align-items:center;margin-top:16px;flex-wrap:wrap;gap:8px}
.ex-hl .l{font-size:11px;color:var(--muted)}
.ex-hl .v{font-family:var(--m);font-size:clamp(20px,4vw,28px);font-weight:700;color:var(--mint)}

/* ============================================================
   GLOSSARY
   ============================================================ */
.gl-g{max-width:700px;margin:0 auto;display:flex;flex-direction:column;gap:8px}
.gl{border:1px solid var(--bdr);border-radius:12px;overflow:hidden}
.gl.act{background:rgba(255,255,255,.03);border-color:rgba(100,228,168,.15)}
.gl-q{width:100%;display:flex;justify-content:space-between;align-items:center;padding:14px 16px;background:none;border:none;color:var(--white);font-family:var(--f);font-size:13px;font-weight:500;text-align:left;gap:10px;cursor:pointer}
.gl-ic{color:var(--mint);font-size:18px;transition:.25s;flex-shrink:0;line-height:1}
.gl.act .gl-ic{transform:rotate(45deg)}
.gl-a{max-height:0;overflow:hidden;transition:max-height .35s ease}
.gl.act .gl-a{max-height:260px}
.gl-a p{padding:0 16px 14px;font-size:13px;color:var(--muted);line-height:1.65}

/* ============================================================
   SCENARIOS
   ============================================================ */
.scn-g{display:grid;grid-template-columns:1fr;gap:14px;max-width:700px;margin:0 auto}
.scn{padding:20px}
.scn-tag{font-family:var(--m);font-size:9px;letter-spacing:1px;text-transform:uppercase;padding:3px 10px;border-radius:50px;display:inline-block;margin-bottom:10px}
.scn-tag--q{background:rgba(100,228,168,.1);color:var(--mint)}
.scn h4{font-size:14px;font-weight:600;margin-bottom:6px}
.scn p{font-size:13px;color:var(--muted);line-height:1.6}

/* ============================================================
   COMPLIANCE GRID
   ============================================================ */
.cpl-g{display:grid;grid-template-columns:1fr;gap:14px}
.cpl{padding:22px;display:flex;gap:14px;align-items:flex-start}
.cpl-ic{width:40px;height:40px;min-width:40px;border-radius:10px;background:var(--grad);display:flex;align-items:center;justify-content:center;font-size:18px}
.cpl h4{font-size:14px;font-weight:600;margin-bottom:3px}
.cpl p{font-size:12px;color:var(--muted);line-height:1.55}

/* ============================================================
   RISK DISCLOSURE
   ============================================================ */
.rsk{max-width:700px;margin:0 auto;border-radius:14px;border:1px solid rgba(255,168,0,.15);background:rgba(255,168,0,.04);padding:28px}
.rsk h3{font-size:16px;font-weight:600;margin-bottom:10px;display:flex;align-items:center;gap:8px}
.rsk h3 span{font-size:20px}
.rsk p{font-size:13px;color:var(--muted);line-height:1.7;margin-bottom:10px}
.rsk p:last-child{margin-bottom:0}
.rsk ul{list-style:none;padding:0;margin:0 0 10px}
.rsk li{font-size:13px;color:var(--muted);line-height:1.6;padding:4px 0 4px 18px;position:relative}
.rsk li::before{content:'→';position:absolute;left:0;color:rgba(255,168,0,.6)}

/* ============================================================
   RESPONSIVE (page-specific)
   ============================================================ */
@media(min-width:640px){
  .pr-g{grid-template-columns:repeat(2,1fr)}
  .scn-g{grid-template-columns:repeat(2,1fr)}
}
@media(min-width:768px){
  .hero{padding:140px 0 80px}
  .pr-g{grid-template-columns:repeat(3,1fr)}
  .cpl-g{grid-template-columns:repeat(2,1fr)}
}