/* GST interest page (v2). Adds to gst_v2.css; only page-specific pieces. */
.int-h1 { font-size: clamp(34px, 8vw, 72px); line-height: .95; margin: 0 0 18px; }
.int-h2 { font-size: clamp(22px, 4.4vw, 38px); margin: 12px 0 10px; }
.int-chart { margin-top: 16px; width: 100%; max-width: 900px; }
.int-chart svg { display: block; width: 100%; height: auto; }
.int-chart .grid { stroke: var(--g2); stroke-width: 1; }
.int-chart .base { stroke: var(--white); stroke-width: 2; }
.int-chart .ax { fill: var(--g4); font: 600 12px var(--body); }
.int-chart .b-act { fill: var(--white); }
.int-chart .b-est { fill: transparent; stroke: var(--g5); stroke-width: 2; stroke-dasharray: 5 3; }
.int-chart .b-cur { stroke: var(--orange); }
.int-chart .acc { fill: var(--black); stroke: var(--orange); stroke-width: 2.5; }
.int-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13px; color: var(--g5); margin: 10px 0 6px; }
.int-legend i { display: inline-block; width: 14px; height: 12px; margin-right: 6px; vertical-align: -1px; }
.int-legend .k-act { background: var(--white); }
.int-legend .k-est { border: 2px dashed var(--g5); }
.int-legend .k-acc { width: 12px; border: 2.5px solid var(--orange); border-radius: 50%; }
#int-years table.t td.r, #int-ytd table.t td.r { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; }
.bar.int-me .fill { background: var(--orange); }
.bar.int-me .n, .bar.int-me .v { color: var(--orange); }
.int-context { border: 2px solid var(--white); padding: 18px 18px 8px; background: var(--g1); max-width: 900px; }
.int-context h2 { font-size: clamp(22px, 4vw, 30px); margin-bottom: 8px; }
.int-context h3 { margin: 20px 0 8px; }
.int-context p { color: #e6e6e6; }
@media (max-width: 480px) {
  .int-context { padding: 14px 12px 6px; }
  table.t { font-size: 13px; }
}