.dragons-metrics{
  margin:18px 0 22px;
  border:1px solid rgba(31,44,61,.12);
  border-radius:18px;
  padding:20px;
  background:linear-gradient(180deg,#16283c 0%,#20384f 100%);
  color:#f7f2e8;
  box-shadow:0 14px 34px rgba(18,35,53,.14)
}
.dragons-heading{display:flex;justify-content:space-between;gap:22px;align-items:flex-end;margin-bottom:16px}
.dragons-heading>div>span{display:block;color:#d9b872;font-size:10px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;margin-bottom:5px}
.dragons-heading h3{margin:0;font-family:Georgia,'Times New Roman',serif;font-size:28px;line-height:1.05;color:#fff}
.dragons-heading>p{max-width:620px;margin:0;color:rgba(255,255,255,.76);font-size:13px;line-height:1.55}
.dragons-heading strong{color:#fff}
.dragons-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.dragon-card{position:relative;min-height:175px;padding:16px;border:1px solid rgba(255,255,255,.12);border-radius:14px;background:rgba(255,255,255,.07)}
.dragon-card.emphasis{background:rgba(218,184,114,.10);border-color:rgba(218,184,114,.28)}
.dragon-card>span{display:block;color:#d9b872;font-size:10px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}
.dragon-card>strong{display:block;margin:10px 0 2px;color:#fff;font-family:Georgia,'Times New Roman',serif;font-size:29px;line-height:1}
.dragon-card>small{display:block;color:rgba(255,255,255,.58);font-size:10px;font-weight:750;min-height:16px}
.dragon-card>p{margin:13px 0 0;color:rgba(255,255,255,.76);font-size:11px;line-height:1.5}
.dragon-card.negative{background:rgba(171,67,67,.15);border-color:rgba(232,129,129,.34)}
.dragon-card.negative>strong{color:#ffd5d0}
.dragons-explainer{margin-top:14px;border-top:1px solid rgba(255,255,255,.12);padding-top:12px}
.dragons-explainer summary{cursor:pointer;color:#f6e8c9;font-size:12px;font-weight:850;list-style:none}
.dragons-explainer summary::-webkit-details-marker{display:none}
.dragons-explainer summary:after{content:'+';float:right;font-size:18px;line-height:1;color:#d9b872}
.dragons-explainer[open] summary:after{content:'−'}
.dragons-explain-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:13px}
.dragons-explain-grid article{padding:12px 13px;border-radius:11px;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.09)}
.dragons-explain-grid b{display:block;color:#fff;font-size:12px;margin-bottom:5px}
.dragons-explain-grid p{margin:0;color:rgba(255,255,255,.72);font-size:11px;line-height:1.52}
.dragons-explain-grid strong{color:#f4dba5}
.dragons-accounting-note{margin:11px 0 0;color:rgba(255,255,255,.62);font-size:10px;line-height:1.55}
.dragons-accounting-note strong{color:#f4dba5}
.dragons-gross-ledger{border-top:2px solid rgba(45,107,81,.18);border-bottom:2px solid rgba(45,107,81,.18);background:#eef7f1}
.dragons-gross-ledger.negative{background:#fff0ee;border-color:#efcbc6}

@media(max-width:1180px){.dragons-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){
  .dragons-metrics{padding:15px;border-radius:14px}
  .dragons-heading{display:block}
  .dragons-heading>p{margin-top:9px}
  .dragons-grid,.dragons-explain-grid{grid-template-columns:1fr}
  .dragon-card{min-height:auto}
  .dragon-card>strong{font-size:26px}
}